一、项目简介

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

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

}

})

},

}

◆ 项目中顶部透明导航栏设置

顶部导航栏采用的是自定义模式，可设置透明背景(如：个人主页/朋友圈动态) 具体可参看这篇文章：

◆ uniapp仿抖音小视频效果

项目中小视频界面功能效果类似抖音/火山小视频，使用swiper组件实现上下滑动切换视频播放。

＃ {{kwItem}}

{{item.subtitle}}

{{item.author}} {{item.attention ? '已关注' : '关注'}}

写评论...

{{ item.likeNum+(item.islike ? 1: 0) }}

{{item.replyNum}}

{{item.shareNum}}

视频滑动切换 播放、暂停 及单击/双击判断，商品及评论展示

//引入商品广告、评论

import videoCart from '@/components/cp-video/cart.vue'import videoComment from'@/components/cp-video/comment'let timer= nullexportdefault{

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.currentif(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].islikethis.vlist =vlist

},//显示评论

handleVideoComment() {this.$refs.videoComment.show()

},//显示购物车

handleVideoCart(index) {this.$refs.videoCart.show(index)

},

}

}

在项目开发过程中，遇到了视频video层级高不能覆盖的问题，使用nvue页面就可以解决view覆盖在video之上。.nvue(native vue的缩写)

更多关于nvue页面开发，可以参看：

◆ uniapp聊天页面实现

项目中的聊天页面，功能效果这里就不详细介绍了，可参看这篇：

◆ 直播页面live.nvue

为避免video不能覆盖问题，直播页面采用的是nvue编写，开发过程也遇到了一些坑，尤其是css，全部是flex布局，而且不能多级嵌套，有些css属性不支持。

...

总排名{{item.allRank}}

小时榜第{{item.hourRank}}名

U直播:{{item.uid}}

...

{{msgitem.uname}} {{msgitem.content}}

说点什么...

...

...