uni-app仿抖音APP短视频+直播+聊天实例|uniapp全屏滑动小视频+直播

基于uniapp+uView-ui跨端H5+小程序+APP短视频|直播项目uni-ttLive。

uni-ttLive一款全新基于uni-app技术开发的仿制抖音/快手短视频直播项目。支持全屏丝滑般上下滑动切换小视频，迷你时间进度条，Nvue解决视频层级显示，可编译兼容H5+小程序+APP端。

◆ 一览效果

编译至 [小程序+H5+App端] 效果如下

◆ 运用技术

编辑器：HbuilderX 3.1.21

框架技术：Uniapp+Vue.js+Nvue+Vuex

UI组件库：uView-ui^1.8.4

弹框组件：uaPopup1.1.0（基于uniapp封装多端弹框组件）

自定义组件：uaNavbar+uaTabbar组件

编译支持：小程序+H5+APP端

◆ 功能特性

✅ 经典的自定义dock凸起菜单

✅ 丝滑般的滑动体验

✅ 迷你小视频时间进度线

✅ 短视频可播放/暂停，第N个开始滑动

✅ 自定义naNavbar+uaPopup组件支持Nvue视频页

◆ 目录结构

◆ 多端Navbar+Tabbar组件

在components下新建ua-navbar和ua-tabbar组件。自HBuilderX 2.5.5起支持easycom组件模式，无需自动引入，即可使用。

<!-- 导航条模板 -->
<template>
    <view class="ua__navbar">
        <view class="ua__navbar-wrap" :class="{\'custom\': custom, \'fixed\': fixed || transparent}"
            :style="{\'height\': customBarH + \'px\', \'padding-top\': (custom ? statusBarH : 0) + \'px\', \'background\': bgcolor, \'color\': color, \'z-index\': zIndex}">
            <!-- //左侧 (返回) -->
            <view class="action navbar-action__left" v-if="back && back!=\'false\'" @click="onBack">
                <template v-if="$slots.back">
                    <slot name="back" />
                </template>
                <template v-else><text class="iconfont nvuefont"
                        :style="{\'color\': color}">{{\'\ue84c\'}}</text></template>
                <slot name="backText" />
            </view>
            <slot name="left" />

            <!-- //标题 -->
            <view v-if="!search" class="navbar-title" :class="{\'center\': center}">
                <template v-if="$slots.title">
                    <slot name="title" />
                </template>
                <template v-else><text :style="{\'color\': color}">{{title}}</text></template>
            </view>

            <!-- //搜索框 -->
            <view v-if="search" class="action navbar-action__search">
                <slot name="search" />
            </view>

            <!-- //右侧 -->
            <view class="action navbar-action__right">
                <slot name="right" />
            </view>
        </view>
    </view>
</template>

具体的详细介绍，可参看之前的分享文章。组件已经上传至uniapp插件市场，有需要的可以一次性拿走。

https://www.cnblogs.com/xiaoyan2017/p/14978408.html

◆ 自定义全端弹窗组件uaPopup

项目中使用到的弹窗均是ua-popup自定义组件实现效果。支持函数式+组件式混合调用。并且支持Nvue原生页面。

<ua-popup v-model="isVisibleConfirm" shadeClose="false" title="标题" xclose z-index="1001"
    content="<div style=\'color:#ff557f;padding:20px 40px;\'>预测未来的最好办法是自己亲手创造未来！</div>"
    :btns="[
        {text: \'取消\', click: handleCancel},
        {text: \'确定\', style: \'color:#00aa00;\', click: handleOk},
    ]"
/>

<script>
export default {
    methods: {
        handleOk() {
            let $ua = this.$refs.uapopup
            $ua.open({
                content: \'人生漫漫，且行且珍惜\',
                customStyle: {\'background-color\': \'rgba(170, 0, 127, 0.6)\', \'color\': \'#fff\'},
                time: 3,
                onClose() {
                    $ua.open({
                        type: \'android\',
                        content: \'<div style="color:#aa007f">不要等待机会，而要创造机会</div>\',
                        customStyle: {\'width\': \'210px\'},
                        btns: [
                            {
                                text: \'关闭\',
                                click() {
                                    $ua.close()
                                }
                            },
                            {
                                text: \'确定\',
                                style: \'color:#00aa00;\',
                                click() {
                                    // ...
                                }
                            }
                        ]
                    })
                }
            })
        }
    }
}
</script>

支持20+参数自定义配置，多种弹窗动画及弹窗类型。具体的介绍，可以参看之前的分享文章。

https://www.cnblogs.com/xiaoyan2017/p/14993445.html

◆ uniapp短视频效果

 

短视频页面分为顶部菜单+视频信息区+底部dock菜单三个模块。视频区使用swiper组件实现上下滑动切换。

<view v-if="currentTab == 2" class="ua__tabcnt-recommend">
    <swiper class="ua__vdplayer-swiper flex1" :current="currentVideo" vertical @change="handleSwipeVertical">
        <swiper-item v-for="(item, index) in videoList" :key="index">
            <!-- 视频模块 -->
            <view class="ua__vdplayer-video flex1">
                <video class="vdplayer" :id="\'vdplayer\' + index" :ref="\'vdplayer\' + index" 
                    :src="item.src"
                    :controls="false" :loop="true" :show-center-play-btn="false" object-fit="fill"
                    :autoplay="index == currentVideo"
                    @play="isPlaying=true" @timeupdate="handleTimeUpdate"
                    :style="{\'width\': winWidth, \'height\': winHeight}"
                >
                </video>
                <view class="ua__vdplayer-playwrap" @click="handleVideoClicked"><view v-if="!isPlaying" class="ua__vdplayer-playbtn"><text class="iconfont">{{`\ue607`}}</text></view></view>
            </view>
            <!-- 信息模块 -->
            <view class="ua__vdplayer-info flexbox flex-col">
                <view class="flexbox flex-row flex-alignb">
                    <!-- //左侧信息 -->
                    <view class="vdinfo__left flex1">
                        <view class="ltitem uavatar flexbox flex-row">
                            <navigator url="#" class="flexbox flex-alignc flex-row"><image class="uimg" :src="item.avatar" /><text class="uname">{{item.author}}</text></navigator>
                            <view class="flexbox btn" :class="{\'actived\': item.isFollow}" @click="handleFollow(index)"><text class="btn-text">{{item.isFollow ? \'已关注\' : \'关注\'}}</text></view>
                        </view>
                        <view v-if="item.topic" class="ltitem flexbox flex-row">
                            <view class="kw" v-for="(kw, index2) in item.topic" :key="index2"><text class="lbl">#{{kw}}</text></view>
                        </view>
                        <view class="ltitem"><text class="desc">{{item.desc}}</text></view>
                    </view>
                    <!-- //右侧按钮 -->
                    <view class="vdinfo__right flexbox flex-col">
                        <view class="rtitem ball" v-if="item.goods&&item.goods.length > 0" @click="handleShowGoodsPopup(item.goods)"><text class="icon iconfont">{{`\ue734`}}</text></view>
                        <view class="rtitem" :class="{\'isliked\': item.isLike}" @click="handleLiked(index)"><text class="icon iconfont">{{`\ue635`}}</text><text class="num">{{item.likeNum+(item.isLike ? 1 : 0)}}</text></view>
                        <view class="rtitem" @click="showReplyPopup = true"><text class="icon iconfont">{{`\ue632`}}</text><text class="num">{{item.replyNum}}</text></view>
                        <view class="rtitem" @click="showSharePopup = true"><text class="icon iconfont">{{`\ue63b`}}</text><text class="num">{{item.shareNum}}</text></view>
                    </view>
                </view>
            </view>
        </swiper-item>
    </swiper>
    <!-- 底部播放进度条 -->
    <view class="ua__vdplayer-progress"><view class="bar" :style="{\'width\': progressBar+\'px\'}"></view></view>
</view>

顶部导航条及底部tabbar菜单支持全屏沉浸式，并且视频底侧显示Mini播放进度条。

// 播放进度变化时触发
handleTimeUpdate(e) {
    let { currentTime, duration } = e.detail
    
    this.progressBar = parseInt((currentTime / duration).toFixed(2) * parseInt(this.winWidth))
},

uniapp小视频暂停/播放、上下滑动切换、单击/双击判断等操作。

<script>
    const app = getApp()
    import videoJSON from \'@/mock/videolist.js\'
    
    export default {
        data() {
            return {
                // 导航栏高度
                customBarHeight: app.globalData.customBarH,
                navbarBgcolor: \'#21252b\',
                tabbarBgcolor: \'#21252b\',
                
                tabNavLs: [
                    {label: \'附近动态\', badge: 5, lists: []},
                    {label: \'关注\', lists: []},
                    {label: \'推荐\', dot: true, lists: []},
                ],
                // 当前选项卡
                currentTab: 0,
                
                // 当前视频索引
                currentVideo: 0,
                // 视频数据
                videoList: videoJSON,
                // 视频是否播放中
                isPlaying: false,
                // 点击次数
                clickNum: 0,
                // 视频播放进度条
                progressBar: 0,
                clickTimer: null,
                
                // 屏幕宽高
                winWidth: \'\',
                winHeight: \'\',
                
                popupGoodsList: [],
                showGoodsPopup: false,
                showReplyPopup: false,
                showSharePopup: false,
            }
        },
        watch: {
            currentTab(val) {
                this.changeTabPanel(val)
            }
        },
        computed:{
            customBarMargin() {
                return `margin-top: ${this.customBarHeight}px`
            }
        },
        created() {
            // 引入iconfont字体
            // #ifdef APP-NVUE
            const domModule = weex.requireModule(\'dom\')
            domModule.addRule(\'fontFace\', {
                fontFamily: "nvueIcon",
                \'src\': "url(\'/static/fonts/iconfont.ttf\')"
            });
            // #endif
            
            let wW = uni.getSystemInfoSync().windowWidth
            let wH = uni.getSystemInfoSync().windowHeight
            this.winWidth = `${wW}px`
            this.winHeight = `${wH}px`
        },
        methods: {
            
            // 长按动态
            handleDynamicMenu(e) {
                let points
                // #ifndef APP-NVUE
                points = [e.touches[0].clientX, e.touches[0].clientY]
                // #endif
                // #ifdef APP-NVUE
                points = [e.touches[0].screenX, e.touches[0].screenY]
                // #endif
                
                this.$refs.uapopup.open({
                    type: \'contextmenu\',
                    follow: points,
                    btns: [
                        {text: \'不感兴趣\'},
                        {text: \'复制\'},
                        {
                            text: \'举报\',
                            style: \'color:#f00;\',
                            click: () => {
                                this.$refs.uapopup.close()
                            }
                        },
                    ],
                })
            },
            
            /* ++++++++++ { 视频播放模块 } ++++++++++ */
            getVideoCtx() {
                // return this.$refs[\'vdplayer\' + this.currentVideo][0]
                return uni.createVideoContext(\'vdplayer\'+ this.currentVideo, this)
            },
            
            // 垂直滑动视频
            handleSwipeVertical(e) {
                let index = e.detail.current
                this.progressBar = 0
                this.isPlaying = false
                let video = this.getVideoCtx()
                if(!video) return
                video.pause()
                // 重新开始
                video.seek(0)
                
                this.currentVideo = index
                
                // 自动播放
                this.handlePlay()
            },
            
            handlePlay() {
                let video = this.getVideoCtx()
                if(!video) return
                video.play()
                this.isPlaying = true
            },
            
            handlePause() {
                let video = this.getVideoCtx()
                if(!video) return
                video.pause()
                this.isPlaying = false
            },
            
            // 点击视频（单击/双击）
            handleVideoClicked() {
                this.clickTimer && clearTimeout(this.clickTimer)
                this.clickNum++
                this.clickTimer = setTimeout(() => {
                    if(this.clickNum >= 2) {
                        console.log(\'你双击了\')
                    }else {
                        console.log(\'你单击了\')
                        if(this.isPlaying) {
                            this.handlePause()
                        }else {
                            this.handlePlay()
                        }
                    }
                    this.clickNum = 0
                }, 250)
            },
            
            ...
        }
    }
</script>

◆ uniapp直播效果

为了解决video层级高的问题，直播和小视频页面均是全屏沉浸式Nvue语法编码开发。并且项目中的uaNavbar+uaTabbar+uaPopup自定义组件兼容支持Nvue页面。

<!-- 直播页面模板 -->
<template>
    <view class="ua__container flexbox flex1 flex-col">
        <view class="ua__scrollview flex1">
            <view class="ua__vdplayer-wrapls flex1">
                <swiper class="ua__vdplayer-swiper flex1" :current="currentVideo" vertical @change="handleSwipeVertical">
                    <swiper-item v-for="(item, index) in liveList.list" :key="index">
                        <!-- 视频模块 -->
                        <view class="ua__vdplayer-video flex1">
                            <video class="vdplayer" :id="\'vdplayer\' + index" :ref="\'vdplayer\' + index" 
                                :src="item.src"
                                :controls="false" :loop="true" :show-center-play-btn="false" object-fit="fill"
                                :autoplay="index == currentVideo"
                                @play="isPlaying=true"
                                :style="{\'width\': winWidth, \'height\': winHeight}"
                            >
                            </video>
                        </view>
                        
                        <!-- //顶部导航条 -->
                        <view class="ua__vdplayer-navbar">
                            <ua-navbar :back="false" custom bgcolor="transparent">
                                ...
                            </ua-navbar>
                        </view>
                        
                        <view class="ua__vdplayer-toplevel flexbox flex-row" :style="customBarMargin">
                            ...
                        </view>
                        
                        <!-- 底部信息模块 -->
                        <view class="ua__liveplayer-ftinfo flexbox flex-col">
                            <!-- 送礼物gif -->
                            <view v-if="gifGiftData" class="lvplayer__giftips flexbox flex-row flex-alignc">
                                ...
                            </view>
                            <!-- 滚动聊天消息 -->
                            <scroll-view class="lvplayer__chatinfo" scroll-y show-scrollbar="false">
                                <block v-for="(msg, index2) in item.message" :key="index2">
                                    <view v-if="msg.type == \'notice\'" class="row"><view class="item"><text class="text notice">{{msg.content}}</text></view></view>
                                    <view v-else class="row"><view class="item"><text class="user">{{msg.user}}</text><text class="text">{{msg.content}}</text></view></view>
                                </block>
                            </scroll-view>
                            <!-- 底部toolbar -->
                            <view class="lvplayer__footbar">
                                <view class="lvplayer__footbar-editor flexbox flex-row">
                                    <input class="editor flex1" placeholder="聊点什么..." placeholder-style="color: #eee;" disabled @click="handleReplyPopup(item.message)" />
                                    <view class="btns flexbox flex-row">
                                        ...
                                    </view>
                                </view>
                            </view>
                        </view>
                    </swiper-item>
                </swiper>
            </view>
        </view>
        
        <!-- //函数式弹框 -->
        <ua-popup ref="uapopup" />
        
        <!-- 商品弹框 -->
        <ua-popup v-model="showGoodsPopup" title="商品" position="bottom" round>
            <scroll-view class="popup__goodslist" scroll-y="true">
                <view v-for="(item,index) in popupGoodsList" :key="index" class="gitem flexbox flex-row">
                    <image class="gpic" :src="item.pic" />
                    <view class="ginfo flex1">
                        <text class="title">{{item.name}}</text><text class="price">￥{{item.price}}</text>
                    </view>
                    <view class="gbtn"><text class="gbtn-text">去购买</text></view>
                </view>
            </scroll-view>
        </ua-popup>
        
        <!-- 评论弹框 -->
        <ua-popup v-model="showReplyPopup" position="bottom" :customStyle="{\'background-color\': \'transparent\'}" @close="closeReplyPopup">
            <scroll-view class="popup__chatwrap">
                ...
            </scroll-view>
        </ua-popup>
        
        <!-- 送礼物弹框 -->
        <ua-popup v-model="showGiftPopup" position="bottom" round :customStyle="{\'background-color\': \'#21252b\'}">
            <scroll-view class="popup__giftlist">
                ...
            </scroll-view>
        </ua-popup>
    </view>
</template>

ok，以上就是uniapp开发短视频/直播的一些分享，希望对大家有些许帮助。