基于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开发短视频/直播的一些分享，希望对大家有些许帮助。??
最后附上两个最近项目实例
Electron13+Vue3仿Mac桌面：https://www.cnblogs.com/xiaoyan2017/p/14926338.html
Vite2.x+Electron后台管理系统：https://www.cnblogs.com/xiaoyan2017/p/14727973.html