基于android的防抖音直播,基于vue+uniapp直播项目实现uni-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

*/

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

}

})

},

}

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

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

◆ uniapp仿抖音小视频效果

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

:controls="false" :loop="true" :show-center-play-btn="false" objectFit="fill">

＃ {{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 = 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)

},

}

}

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

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

◆ uniapp聊天页面实现

项目中的聊天页面，功能效果这里就不详细介绍了，可参看这篇：uni-app聊天室|vue+uniapp仿微信聊天实例

◆ 直播页面live.nvue

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

:controls="false" :loop="true" :show-center-play-btn="false" objectFit="fill" :style="{height: winHeight, width: winWidth}">

...

总排名{{item.allRank}}

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

U直播:{{item.uid}}

...

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

说点什么...

...





...

另外引入阿里字体图标也需注意：通过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项目基本介绍完了，希望对大家有些许帮助。💪

最后，附上两个vue/react项目案例：

总结

以上所述是小编给大家介绍的基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！