基于vue+uniapp直播项目|uni-app仿抖音/陌陌直播室

胡子头 發表於 2019-11-11 15:49:00

基于vue+uniapp直播项目|uni-app仿抖音/陌陌直播室

<h3> 一、项目简介</h3>
uni-liveShow是一个基于vue+uni-app技术开发的集小视频/IM聊天/直播等功能于一体的微直播项目。界面仿制抖音|火山小视频/陌陌直播，支持编译到多端(H5、小程序、App端) 且兼容效果一致。
<h3>二、效果预览</h3>
在H5、小程序、App端测试效果如下：(后续大图均为APP端)
<img src="https://img2018.cnblogs.com/common/1289798/201911/1289798-20191111141512652-843587761.png">
<h3>最新版uniapp+vue3+uv-ui跨三端短视频+直播+聊天【H5+小程序+App端】</h3>
<h3>Uniapp-DeepSeek跨三端AI助手|uniapp+vue3+deepseek-v3流式ai聊天模板</h3>
<h3>uniapp+vue3聊天室|uni-app+vite4+uv-ui跨端仿微信app聊天语音/朋友圈</h3>
<h3>三、使用技术</h3>
<ul>
<li>编码器+技术：HBuilderX + vue/NVue/uniapp/vuex</li>
<li>iconfont图标：阿里字体图标库</li>
<li>自定义导航栏 + 底部Tabbar</li>
<li>弹窗组件：uniPop（uni-app封装自定义弹出窗）</li>
<li>测试环境：H5端 + 小程序 + App端</li>
</ul>
<img src="https://img2018.cnblogs.com/common/1289798/201911/1289798-20191111142351930-2077179343.png">
<img src="https://img2018.cnblogs.com/common/1289798/201911/1289798-20191111142453241-1318863269.png">
<img src="https://img2018.cnblogs.com/common/1289798/201911/1289798-20191111142553532-187838933.png">
<img src="https://img2018.cnblogs.com/common/1289798/201911/1289798-20191111142613325-253123084.png">
<img src="https://img2018.cnblogs.com/common/1289798/201911/1289798-20191111142646059-455222398.png">
<img src="https://img2018.cnblogs.com/common/1289798/201911/1289798-20191111142706873-2058201438.png">
<img src="https://img2018.cnblogs.com/common/1289798/201911/1289798-20191111142724961-1949640182.png">
<img src="https://img2018.cnblogs.com/common/1289798/201911/1289798-20191111142753777-975337354.png">
<img src="https://img2018.cnblogs.com/common/1289798/201911/1289798-20191111142819186-306833064.png">
<img src="https://img2018.cnblogs.com/common/1289798/201911/1289798-20191111142833167-804594646.png">
<img src="https://img2018.cnblogs.com/common/1289798/201911/1289798-20191111142853823-1326367501.png">
<img src="https://img2018.cnblogs.com/common/1289798/201911/1289798-20191111142915213-291644114.png">
<img src="https://img2018.cnblogs.com/common/1289798/201911/1289798-20191111142932865-1314047629.png">
<img src="https://img2018.cnblogs.com/common/1289798/201911/1289798-20191111143009820-293586239.png">
<img src="https://img2018.cnblogs.com/common/1289798/201911/1289798-20191111143027700-207603792.png">
<img src="https://img2018.cnblogs.com/common/1289798/201911/1289798-20191111143036146-1786237268.png">
<img src="https://img2018.cnblogs.com/common/1289798/201911/1289798-20191111143051899-1096882063.png">
<img src="https://img2018.cnblogs.com/common/1289798/201911/1289798-20191111143111846-1787499603.png">
◆ uniapp计算设备顶部状态栏高度
<div class="cnblogs_code">
<pre> /**
* @desc uniapp主页面App.vue
* @aboutQ：282310962wx：xy190310
*/

<script>
import Vue from 'vue'
export default {
 onLaunch: function() {
 // console.log('App Launch')
 uni.getSystemInfo({
 success:function(e){
 Vue.prototype.statusBar = e.statusBarHeight
 // #ifndef MP
 if(e.platform == 'android') {
 Vue.prototype.customBar = e.statusBarHeight + 50
 }else {
 Vue.prototype.customBar = e.statusBarHeight + 45
 }
 // #endif

 // #ifdef MP-WEIXIN
 let custom = wx.getMenuButtonBoundingClientRect()
 Vue.prototype.customBar = custom.bottom + custom.top - e.statusBarHeight
 // #endif

 // #ifdef MP-ALIPAY
 Vue.prototype.customBar = e.statusBarHeight + e.titleBarHeight
 // #endif
 }
 })
 },
}
</script></pre>
</div>
◆ 项目中顶部透明导航栏设置
顶部导航栏采用的是自定义模式，可设置透明背景(如：个人主页/朋友圈动态) 具体可参看这篇文章：uni-app自定义导航栏按钮|uniapp仿微信顶部导航条
<img src="https://img2018.cnblogs.com/common/1289798/201911/1289798-20191111145017989-313515647.png"> <img src="https://img2018.cnblogs.com/common/1289798/201911/1289798-20191111145231824-203216773.png">
<div class="cnblogs_code">
<pre><header-bar :isBack="true" title=" " :bgColor="{background: 'transparent'}" transparent>
<text slot="back" class="uni_btnIco iconfont icon-guanbi" style="font-size: 25px;"></text>
<text slot="iconfont" class="uni_btnIco iconfont icon-dots mr_5" style="font-size: 25px;"></text>
</header-bar></pre>
</div>
◆ uniapp仿抖音小视频效果
项目中小视频界面功能效果类似抖音/火山小视频，使用swiper组件实现上下滑动切换视频播放。
<img src="https://img2018.cnblogs.com/common/1289798/201911/1289798-20191111151907463-1872302574.png">
<div class="cnblogs_code">
<pre><swiper :indicator-dots="false" :duration="200" :vertical="true" :current="videoIndex" @change="handleSlider" style="height: 100%;">
<block v-for="(item,index) in vlist" :key="index">
 <swiper-item>
 <view class="uni_vdplayer">
 <video :id="'myVideo' + index" :ref="'myVideo' + index" class="player-video" :src="item.src"
 :controls="false" :loop="true" :show-center-play-btn="false" objectFit="fill">
 </video>
 
 <view class="vd-cover flexbox" @click="handleClicked(index)"><text v-if="!isPlay" class="iconfont icon-bofang"></text></view>
 
 <view class="vd-footToolbar flexbox flex_alignb">
 <view class="vd-info flex1">
 <view class="item at">
 <view class="kw" v-for="(kwItem,kwIndex) in item.keyword" :key="kwIndex"><text class="bold fs_18 mr_5">＃</text> {{kwItem}}</view>
 </view>
 <view class="item subtext">{{item.subtitle}}</view>
 <view class="item uinfo flexbox flex_alignc">
 <image class="avator" :src="item.avator" mode="aspectFill" /><text class="name">{{item.author}}</text> <text class="btn-attention bg_linear1" :class="item.attention ? 'on' : ''" @tap="handleAttention(index)">{{item.attention ? '已关注' : '关注'}}</text>
 </view>
 <view class="item reply" @tap="handleVideoComment"><text class="iconfont icon-pinglun mr_5"></text> 写评论...</view>
 </view>
 <view class="vd-sidebar">
 <view v-if="item.cart" class="ls cart flexbox bg_linear3" @tap="handleVideoCart(index)"><text class="iconfont icon-cart"></text></view>
 <view class="ls" @tap="handleIsLike(index)"><text class="iconfont icon-like" :class="item.islike ? 'like' : ''"></text><text class="num">{{ item.likeNum+(item.islike ? 1: 0) }}</text></view>
 <view class="ls" @tap="handleVideoComment"><text class="iconfont icon-liuyan"></text><text class="num">{{item.replyNum}}</text></view>
 <view class="ls"><text class="iconfont icon-share"></text><text class="num">{{item.shareNum}}</text></view>
 </view>
 </view>
 </view>
 </swiper-item>
</block>
</swiper></pre>
</div>
视频滑动切换播放、暂停及单击/双击判断，商品及评论展示
<div class="cnblogs_code">
<pre><script>
// 引入商品广告、评论
import videoCart from '@/components/cp-video/cart.vue'
import videoComment from '@/components/cp-video/comment'

let timer = null
export default {
 data() {
 return {
 videoIndex: 0,
 vlist: videoJson,

 isPlay: true, //当前视频是否播放中
 clickNum: 0, //记录点击次数
 }
 },
 components: {
 videoCart, videoComment
 },
 onLoad(option) {
 this.videoIndex = parseInt(option.index)
 },
 onReady() {
 this.init()
 },
 methods: {
 init() {
 this.videoContextList = []
 for(var i = 0; i < this.vlist.length; i++) {
 // this.videoContextList.push(this.$refs['myVideo' + i])
 this.videoContextList.push(uni.createVideoContext('myVideo' + i, this));
 }

 setTimeout(() => {
 this.play(this.videoIndex)
 }, 200)
 },

 // 滑动切换
 handleSlider(e) {
 let curIndex = e.detail.current
 if(this.videoIndex >= 0){
 this.videoContextList[this.videoIndex].pause()
 this.videoContextList[this.videoIndex].seek(0)
 this.isPlay = false
 }
 if(curIndex === this.videoIndex + 1) {
 this.videoContextList[this.videoIndex + 1].play()
 this.isPlay = true
 }else if(curIndex === this.videoIndex - 1) {
 this.videoContextList[this.videoIndex - 1].play()
 this.isPlay = true
 }
 this.videoIndex = curIndex
 },
 // 播放
 play(index) {
 this.videoContextList.play()
 this.isPlay = true
 },
 // 暂停
 pause(index) {
 this.videoContextList.pause()
 this.isPlay = false
 },
 // 点击视频事件
 handleClicked(index) {
 if(timer){
 clearTimeout(timer)
 }
 this.clickNum++
 timer = setTimeout(() => {
 if(this.clickNum >= 2){
 console.log('双击视频')
 }else{
 console.log('单击视频')
 if(this.isPlay){
 this.pause(index)
 }else{
 this.play(index)
 }
 }
 this.clickNum = 0
 }, 300)
 },


 // 喜欢
 handleIsLike(index){
 let vlist = this.vlist
 vlist.islike =! vlist.islike
 this.vlist = vlist
 },
 // 显示评论
 handleVideoComment() {
 this.$refs.videoComment.show()
 },

 // 显示购物车
 handleVideoCart(index) {
 this.$refs.videoCart.show(index)
 },
 }
}
</script></pre>
</div>
在项目开发过程中，遇到了视频video层级高不能覆盖的问题，使用nvue页面就可以解决view覆盖在video之上。<code>.nvue </code>(native vue的缩写)
更多关于nvue页面开发，可以参看：uniapp开发nvue页面
◆ uniapp聊天页面实现
项目中的聊天页面，功能效果这里就不详细介绍了，可参看这篇：uni-app聊天室|vue+uniapp仿微信聊天实例
◆ 直播页面live.nvue
为避免video不能覆盖问题，直播页面采用的是nvue编写，开发过程也遇到了一些坑，尤其是css，全部是flex布局，而且不能多级嵌套，有些css属性不支持。
<img src="https://img2018.cnblogs.com/common/1289798/201911/1289798-20191111153133567-494357286.png">
<div class="cnblogs_code">
<pre><template>
<div class="nlv__container">
 <view class="nlv_main">
 <swiper class="nlv-swiper" :indicator-dots="false" :vertical="false" :current="videoIndex" @change="handleSlider">
 <swiper-item v-for="(item, index) in vlist" :key="index">
 
 <view class="nlv-playerbox">
 <video :id="'myVideo' + index" :ref="'myVideo' + index" class="player-video" :src="item.src" :autoplay="index == videoIndex"
 :controls="false" :loop="true" :show-center-play-btn="false" objectFit="fill" :style="{height: winHeight, width: winWidth}">
 </video>

 
 <view class="nlv_topbar" :style="{ height: headerBarH, 'padding-top': statusBarH }">
 ...
 </view>

 
 <view class="nlv-rankbox" :style="{top: headerBarH}">
 <view class="nlv-rkls">
 <text class="rkitem">总排名{{item.allRank}}</text>
 <text v-if="item.hourRank" class="rkitem">小时榜第{{item.hourRank}}名</text>
 </view>
 <text class="nlv-uid">U直播:{{item.uid}}</text>
 </view>

 
 <view class="nlv-footToolbar">
 
 <view class="nlv-giftTipPanel">
 ...
 </view>

 
 <scroll-view class="nlv-rollMsgPanel" scroll-y show-scrollbar="false">
 <block v-for="(msgitem, msgidx) in item.rollmsg" :key="msgidx">
 <view class="nlv-msglist"><view class="msg_bg"><text class="msg_name">{{msgitem.uname}}</text> <text class="msg_text">{{msgitem.content}}</text></view></view>
 </block>
 </scroll-view>

 <view class="nlv-infobox">
 <view class="nlv_reply" @tap="handleRollMsg(index)"><text class="nlv_reply_text">说点什么...</text></view>
 <view class="nlv_btntool">
 ...
 <view v-if="item.cart" class="btn-toolitem" @tap="handleLiveCart(index)"><text class="iconfont i-btntool" style="color: #ff4e0e;font-size: 20px;">&#xe61e;</text></view>
 <view class="btn-toolitem btn-toolitem-cart" @tap="handleLiveGift"><text class="iconfont i-btntool">&#xe600;</text></view>
 ...
 </view>
 </view>
 </view>
 </view>
 </swiper-item>
 </swiper>
 </view>

 
 <live-cart ref="liveCart" :vlist="vlist" />
 <roll-msg ref="rollMsg" :vlist="vlist" />
 <live-gift ref="liveGift" />
</div>
</template></pre>
</div>
另外引入阿里字体图标也需注意：通过weex方式引入
<div class="cnblogs_code">
<pre>beforeCreate() {
// 引入iconfont字体
// #ifdef APP-PLUS
const domModule = weex.requireModule('dom')
domModule.addRule('fontFace', {
 fontFamily: "nvueIcon",
 'src': "url('../../../static/fonts/iconfont.ttf')"
});
// #endif
},</pre>
</div>
至于视频滑动切换和上面小视频操作差不多，就不贴码了。 到这里，uni-liveShow项目基本介绍完了，希望对大家有些许帮助。💪
<blockquote>
<h4>最后附上几个最新原创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>
 

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

頁: [1]

琼殿技术论坛's Archiver

基于vue+uniapp直播项目|uni-app仿抖音/陌陌直播室