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

我是老刘 發表於 2021-9-19 17:17:00

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

基于uniapp+uView-ui跨端H5+小程序+APP短视频|直播项目uni-ttLive。
uni-ttLive一款全新基于uni-app技术开发的仿制抖音/快手短视频直播项目。支持全屏丝滑般上下滑动切换小视频，迷你时间进度条，Nvue解决视频层级显示，可编译兼容H5+小程序+APP端。
<h3 id="一项目简介" style="margin: 10px 0; padding: 0; font-size: 16px; line-height: 1.5; font-family: "Helvetica Neue", Helvetica, Verdana, Arial, sans-serif">◆ 一览效果</h3>
编译至 [小程序+H5+App端] 效果如下
<img src="https://img2020.cnblogs.com/blog/1289798/202109/1289798-20210919113454774-496012762.png">
<h3>最新版uniapp+vue3+uv-ui跨三端短视频+直播+聊天【H5+小程序+App端】</h3>
<h3>Uniapp-DeepSeek跨三端AI助手|uniapp+vue3+deepseek-v3流式ai聊天模板</h3>
<h3>uniapp+vue3酒店预订|vite5+uniapp预约订房系统模板(h5+小程序+App端)</h3>
<h3>uniapp+vue3聊天室|uni-app+vite4+uv-ui跨端仿微信app聊天语音/朋友圈</h3>
<h3 id="一项目简介" style="margin: 10px 0; padding: 0; font-size: 16px; line-height: 1.5; font-family: "Helvetica Neue", Helvetica, Verdana, Arial, sans-serif">◆ 运用技术</h3>
编辑器：HbuilderX 3.1.21
框架技术：Uniapp+Vue.js+Nvue+Vuex
UI组件库：uView-ui^1.8.4
弹框组件：uaPopup1.1.0（基于uniapp封装多端弹框组件）
自定义组件：uaNavbar+uaTabbar组件
编译支持：小程序+H5+APP端
<img src="https://img2020.cnblogs.com/blog/1289798/202109/1289798-20210919152223581-1891563905.gif">
<h3 id="一项目简介" style="margin: 10px 0; padding: 0; font-size: 16px; line-height: 1.5; font-family: "Helvetica Neue", Helvetica, Verdana, Arial, sans-serif">◆ 功能特性</h3>
✅ 经典的自定义dock凸起菜单
✅ 丝滑般的滑动体验
✅ 迷你小视频时间进度线
✅ 短视频可播放/暂停，第N个开始滑动
✅ 自定义naNavbar+uaPopup组件支持Nvue视频页
<img src="https://img2020.cnblogs.com/blog/1289798/202109/1289798-20210919154118766-1746488037.gif">
<img src="https://img2020.cnblogs.com/blog/1289798/202109/1289798-20210919154144696-2050374861.gif">
<h3 id="一项目简介" style="margin: 10px 0; padding: 0; font-size: 16px; line-height: 1.5; font-family: "Helvetica Neue", Helvetica, Verdana, Arial, sans-serif">◆ 目录结构</h3>
<img src="https://img2020.cnblogs.com/blog/1289798/202109/1289798-20210919154319154-680774938.png">
<img src="https://img2020.cnblogs.com/blog/1289798/202109/1289798-20210919154434959-1300685209.png">
<img src="https://img2020.cnblogs.com/blog/1289798/202109/1289798-20210919154455983-722306897.png">
<img src="https://img2020.cnblogs.com/blog/1289798/202109/1289798-20210919154532165-423218479.png">
<img src="https://img2020.cnblogs.com/blog/1289798/202109/1289798-20210919154606201-1530277190.png">
<img src="https://img2020.cnblogs.com/blog/1289798/202109/1289798-20210919154731320-515266890.png">
<img src="https://img2020.cnblogs.com/blog/1289798/202109/1289798-20210919154743368-907285942.png">
<img src="https://img2020.cnblogs.com/blog/1289798/202109/1289798-20210919154756474-502028471.png">
<img src="https://img2020.cnblogs.com/blog/1289798/202109/1289798-20210919154817530-1987647135.png">
<img src="https://img2020.cnblogs.com/blog/1289798/202109/1289798-20210919154928639-1193050458.png">
<img src="https://img2020.cnblogs.com/blog/1289798/202109/1289798-20210919154942052-785878747.png">
<img src="https://img2020.cnblogs.com/blog/1289798/202109/1289798-20210919155006258-1899448799.png">
<img src="https://img2020.cnblogs.com/blog/1289798/202109/1289798-20210919155200620-67699333.png">
<img src="https://img2020.cnblogs.com/blog/1289798/202109/1289798-20210919155224672-2086588353.png">
<img src="https://img2020.cnblogs.com/blog/1289798/202109/1289798-20210919155240836-1076065178.png">
<img src="https://img2020.cnblogs.com/blog/1289798/202109/1289798-20210919155253955-1920741226.png">
<h3 id="一项目简介" style="margin: 10px 0; padding: 0; font-size: 16px; line-height: 1.5; font-family: "Helvetica Neue", Helvetica, Verdana, Arial, sans-serif">◆ 多端Navbar+Tabbar组件</h3>
<img src="https://img2020.cnblogs.com/blog/1289798/202109/1289798-20210919161704941-465513903.png">
<img src="https://img2020.cnblogs.com/blog/1289798/202109/1289798-20210919161852537-859771924.png">
<img src="https://img2020.cnblogs.com/blog/1289798/202109/1289798-20210919162009440-1438563430.png">
在components下新建ua-navbar和ua-tabbar组件。自HBuilderX 2.5.5起支持easycom组件模式，无需自动引入，即可使用。
<img src="https://img2020.cnblogs.com/blog/1289798/202109/1289798-20210919160617017-1372849276.png">
<div class="cnblogs_code">
<pre>
<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></pre>
</div>
<img src="https://img2020.cnblogs.com/blog/1289798/202109/1289798-20210919161100724-200353677.png">
具体的详细介绍，可参看之前的分享文章。组件已经上传至uniapp插件市场，有需要的可以一次性拿走。
https://www.cnblogs.com/xiaoyan2017/p/14978408.html
<h3 id="一项目简介" style="margin: 10px 0; padding: 0; font-size: 16px; line-height: 1.5; font-family: "Helvetica Neue", Helvetica, Verdana, Arial, sans-serif">◆ 自定义全端弹窗组件uaPopup</h3>
项目中使用到的弹窗均是ua-popup自定义组件实现效果。支持函数式+组件式混合调用。并且支持Nvue原生页面。
<img src="https://img2020.cnblogs.com/blog/1289798/202109/1289798-20210919162420410-1501762107.gif">
<div class="cnblogs_code">
<pre><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},
]"
/></pre>
</div>
<div class="cnblogs_code">
<pre><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></pre>
</div>
支持20+参数自定义配置，多种弹窗动画及弹窗类型。具体的介绍，可以参看之前的分享文章。
https://www.cnblogs.com/xiaoyan2017/p/14993445.html
<h3 id="一项目简介" style="margin: 10px 0; padding: 0; font-size: 16px; line-height: 1.5; font-family: "Helvetica Neue", Helvetica, Verdana, Arial, sans-serif">◆ uniapp短视频效果</h3>
 <img src="https://img2020.cnblogs.com/blog/1289798/202109/1289798-20210919163809211-361332444.png">
短视频页面分为顶部菜单+视频信息区+底部dock菜单三个模块。视频区使用swiper组件实现上下滑动切换。
<div class="cnblogs_code">
<pre><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></pre>
</div>
顶部导航条及底部tabbar菜单支持全屏沉浸式，并且视频底侧显示Mini播放进度条。
<img src="https://img2020.cnblogs.com/blog/1289798/202109/1289798-20210919165051211-356328542.png">
<div class="cnblogs_code">
<pre>// 播放进度变化时触发
handleTimeUpdate(e) {
let { currentTime, duration } = e.detail

this.progressBar = parseInt((currentTime / duration).toFixed(2) * parseInt(this.winWidth))
},</pre>
</div>
uniapp小视频暂停/播放、上下滑动切换、单击/双击判断等操作。
<div class="cnblogs_code">
<pre><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 = .clientX, e.touches.clientY]
 // #endif
 // #ifdef APP-NVUE
 points = .screenX, e.touches.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]
 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></pre>
</div>
<h3 id="一项目简介" style="margin: 10px 0; padding: 0; font-size: 16px; line-height: 1.5; font-family: "Helvetica Neue", Helvetica, Verdana, Arial, sans-serif">◆ uniapp直播效果</h3>
<img src="https://img2020.cnblogs.com/blog/1289798/202109/1289798-20210919170305335-968654394.png">
为了解决video层级高的问题，直播和小视频页面均是全屏沉浸式Nvue语法编码开发。并且项目中的uaNavbar+uaTabbar+uaPopup自定义组件兼容支持Nvue页面。
<div class="cnblogs_code">
<pre>
<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">
 
 <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>
 
 <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></pre>
</div>
ok，以上就是uniapp开发短视频/直播的一些分享，希望对大家有些许帮助。💪
<blockquote>
<h4>最后附上3个最新原创uniapp+vue3实战项目实例</h4>
uniapp-welive仿微信/抖音直播带货|uni-app+vue3+pinia短视频直播商城
uniapp+vue3聊天室|uni-app+vite4+uv-ui跨端仿微信app聊天语音/朋友圈
uniapp-vue3-oadmin手机后台实例|vite5.x+uniapp多端仿ios管理系统
</blockquote>
<img src="https://img2020.cnblogs.com/blog/1289798/202106/1289798-20210624121021498-187424774.gif">
 

</div>
<div id="MySignature" role="contentinfo">
本文为博主原创文章，未经博主允许不得转载，欢迎大家一起交流 QQ（282310962） wx（xy190310） 
来源：https://www.cnblogs.com/xiaoyan2017/p/15312146.html

頁: [1]

琼殿技术论坛's Archiver

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