一、項目簡介 uni-liveShow是一個基於vue+uni-app技術開發的集小視頻/IM聊天/直播等功能於一體的微直播項目。界面仿製抖音|火山小視頻/陌陌直播，支持編譯到多端(H5、小程式、App端) 且相容效果一致。 二、效果預覽 在H5、小程式、App端測試效果如下：(後續大圖均為APP端 ...
一、項目簡介
uni-liveShow是一個基於vue+uni-app技術開發的集小視頻/IM聊天/直播等功能於一體的微直播項目。界面仿製抖音|火山小視頻/陌陌直播，支持編譯到多端(H5、小程式、App端) 且相容效果一致。
二、效果預覽
在H5、小程式、App端測試效果如下：(後續大圖均為APP端)
三、使用技術
- 編碼器+技術：HBuilderX + vue/NVue/uniapp/vuex
- iconfont圖標：阿裡字體圖標庫
- 自定義導航欄 + 底部Tabbar
- 彈窗組件：uniPop（uni-app封裝自定義彈出窗）
- 測試環境：H5端 + 小程式 + App端
◆ uniapp計算設備頂部狀態欄高度
/** * @desc uniapp主頁面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>
◆ 項目中頂部透明導航欄設置
頂部導航欄採用的是自定義模式，可設置透明背景(如：個人主頁/朋友圈動態) 具體可參看這篇文章：uni-app自定義導航欄按鈕|uniapp仿微信頂部導航條
<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仿抖音小視頻效果
項目中小視頻界面功能效果類似抖音/火山小視頻，使用swiper組件實現上下滑動切換視頻播放。
<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>
視頻滑動切換 播放、暫停 及單擊/雙擊判斷，商品及評論展示
<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][0])
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[index].play()
this.isPlay = true
},
// 暫停
pause(index) {
this.videoContextList[index].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[index].islike =! vlist[index].islike
this.vlist = vlist
},
// 顯示評論
handleVideoComment() {
this.$refs.videoComment.show()
},
// 顯示購物車
handleVideoCart(index) {
this.$refs.videoCart.show(index)
},
}
}
</script>
在項目開發過程中，遇到了視頻video層級高不能覆蓋的問題，使用nvue頁面就可以解決view覆蓋在video之上。.nvue (native vue的縮寫)
更多關於nvue頁面開發，可以參看：uniapp開發nvue頁面
◆ uniapp聊天頁面實現
項目中的聊天頁面，功能效果這裡就不詳細介紹了，可參看這篇：uni-app聊天室|vue+uniapp仿微信聊天實例
◆ 直播頁面live.nvue
為避免video不能覆蓋問題，直播頁面採用的是nvue編寫，開發過程也遇到了一些坑，尤其是css，全部是flex佈局，而且不能多級嵌套，有些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"> <!-- //直播區 --> <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> <!-- 滾動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">說點什麼...</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;"></text></view> <view class="btn-toolitem btn-toolitem-cart" @tap="handleLiveGift"><text class="iconfont i-btntool"></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>
另外引入阿裡字體圖標也需註意：通過weex方式引入
beforeCreate() { // 引入iconfont字體 // #ifdef APP-PLUS const domModule = weex.requireModule('dom') domModule.addRule('fontFace', { fontFamily: "nvueIcon", 'src': "url('../../../static/fonts/iconfont.ttf')" }); // #endif },
至於視頻滑動切換和上面小視頻操作差不多，就不貼碼了。 到這裡，uni-liveShow項目基本介紹完了，希望對大家有些許幫助。
