基于vue+uniapp直播項(xiàng)目實(shí)現(xiàn)uni-app仿抖音/陌陌直播室功能

更新時(shí)間：2019年11月12日 08:17:07 作者：xiaoyan2017

uni-liveShow是一個(gè)基于vue+uni-app技術(shù)開(kāi)發(fā)的集小視頻/IM聊天/直播等功能于一體的微直播項(xiàng)目。本文通過(guò)實(shí)例圖文的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧

一、項(xiàng)目簡(jiǎn)介

uni-liveShow是一個(gè)基于vue+uni-app技術(shù)開(kāi)發(fā)的集小視頻/IM聊天/直播等功能于一體的微直播項(xiàng)目。界面仿制抖音|火山小視頻/陌陌直播，支持編譯到多端(H5、小程序、App端) 且兼容效果一致。

二、效果預(yù)覽

在H5、小程序、App端測(cè)試效果如下：(后續(xù)大圖均為APP端)

三、使用技術(shù)

編碼器+技術(shù)：HBuilderX + vue/NVue/uniapp/vuex
iconfont圖標(biāo)：阿里字體圖標(biāo)庫(kù)
自定義導(dǎo)航欄 + 底部Tabbar
彈窗組件：uniPop（uni-app封裝自定義彈出窗）
測(cè)試環(huán)境：H5端 + 小程序 + App端

◆ uniapp計(jì)算設(shè)備頂部狀態(tài)欄高度

/**
 * @desc uniapp主頁(yè)面App.vue
 * @about Q：282310962 wx：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>

◆ 項(xiàng)目中頂部透明導(dǎo)航欄設(shè)置

頂部導(dǎo)航欄采用的是自定義模式，可設(shè)置透明背景(如：個(gè)人主頁(yè)/朋友圈動(dòng)態(tài)) 具體可參看這篇文章：http://www.dhdzp.com/article/174034.htm

<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>

◆ uniapp仿抖音小視頻效果

項(xiàng)目中小視頻界面功能效果類(lèi)似抖音/火山小視頻，使用swiper組件實(shí)現(xiàn)上下滑動(dòng)切換視頻播放。

<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 ? '已關(guān)注' : '關(guān)注'}}</text>
 </view>
 <view class="item reply" @tap="handleVideoComment"><text class="iconfont icon-pinglun mr_5"></text> 寫(xiě)評(píng)論...</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>

視頻滑動(dòng)切換播放、暫停及單擊/雙擊判斷，商品及評(píng)論展示

<script>
 // 引入商品廣告、評(píng)論
 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, //當(dāng)前視頻是否播放中
 clickNum: 0, //記錄點(diǎn)擊次數(shù)
 }
 },
 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][0])
 this.videoContextList.push(uni.createVideoContext('myVideo' + i, this));
 }
 
 setTimeout(() => {
 this.play(this.videoIndex)
 }, 200)
 },
 
 // 滑動(dòng)切換
 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[index].play()
 this.isPlay = true
 },
 // 暫停
 pause(index) {
 this.videoContextList[index].pause()
 this.isPlay = false
 },
 // 點(diǎn)擊視頻事件
 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[index].islike =! vlist[index].islike
 this.vlist = vlist
 },
 // 顯示評(píng)論
 handleVideoComment() {
 this.$refs.videoComment.show()
 },
 
 // 顯示購(gòu)物車(chē)
 handleVideoCart(index) {
 this.$refs.videoCart.show(index)
 },
 }
 }
</script>

在項(xiàng)目開(kāi)發(fā)過(guò)程中，遇到了視頻video層級(jí)高不能覆蓋的問(wèn)題，使用nvue頁(yè)面就可以解決view覆蓋在video之上。.nvue(native vue的縮寫(xiě))

更多關(guān)于nvue頁(yè)面開(kāi)發(fā)，可以參看：uniapp開(kāi)發(fā)nvue頁(yè)面

◆ uniapp聊天頁(yè)面實(shí)現(xiàn)

項(xiàng)目中的聊天頁(yè)面，功能效果這里就不詳細(xì)介紹了，可參看這篇：uni-app聊天室|vue+uniapp仿微信聊天實(shí)例

◆ 直播頁(yè)面live.nvue

為避免video不能覆蓋問(wèn)題，直播頁(yè)面采用的是nvue編寫(xiě)，開(kāi)發(fā)過(guò)程也遇到了一些坑，尤其是css，全部是flex布局，而且不能多級(jí)嵌套，有些css屬性不支持。

<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">
 <!-- //直播區(qū) -->
 <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">小時(shí)榜第{{item.hourRank}}名</text>
 </view>
 <text class="nlv-uid">U直播:{{item.uid}}</text>
 </view>
 
 <!-- //底部信息欄 -->
 <view class="nlv-footToolbar">
 <!-- 送禮物提示 -->
 <view class="nlv-giftTipPanel">
 ...
 </view>
 
 <!-- 滾動(dòng)msg信息 -->
 <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">說(shuō)點(diǎn)什么...</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>
 
 <!-- 商品廣告、滾動(dòng)消息、禮物 -->
 <live-cart ref="liveCart" :vlist="vlist" />
 <roll-msg ref="rollMsg" :vlist="vlist" />
 <live-gift ref="liveGift" />
 </div>
</template>

另外引入阿里字體圖標(biāo)也需注意：通過(guò)weex方式引入

beforeCreate() {
 // 引入iconfont字體
 // #ifdef APP-PLUS
 const domModule = weex.requireModule('dom')
 domModule.addRule('fontFace', {
 fontFamily: "nvueIcon",
 'src': "url('../../../static/fonts/iconfont.ttf')"
 });
 // #endif
},

至于視頻滑動(dòng)切換和上面小視頻操作差不多，就不貼碼了。到這里，uni-liveShow項(xiàng)目基本介紹完了，希望對(duì)大家有些許幫助。💪

最后，附上兩個(gè)vue/react項(xiàng)目案例：

vue+vuex+vue-router仿微信網(wǎng)頁(yè)版聊天室http://www.dhdzp.com/article/160487.htm

angular+ng-router手機(jī)端聊天IM實(shí)戰(zhàn)開(kāi)發(fā)http://www.dhdzp.com/article/71356.htm

總結(jié)

以上所述是小編給大家介紹的基于vue+uniapp直播項(xiàng)目實(shí)現(xiàn)uni-app仿抖音/陌陌直播室功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: