基于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 */ <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>
◆ 项目中顶部透明导航栏设置
顶部导航栏采用的是自定义模式,可设置透明背景(如:个人主页/朋友圈动态) 具体可参看这篇文章:
<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聊天页面实现
项目中的聊天页面,功能效果这里就不详细介绍了,可参看这篇:
◆ 直播页面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项目基本介绍完了,希望对大家有些许帮助。
上一篇: 巴菲特:自动驾驶汽车将是保险公司的噩梦
下一篇: 用机器人维护网络安全 能防住网络袭击吗?
推荐阅读
-
基于ECMAScript6即ECMAScript2015的javascriptclass类封装的简单使用实例讲解
-
A5创业项目推荐:SaaS云建站、虚拟试衣应用等获得融资
-
直通硅谷创新创业大赛华南赛区完美闭关,项目质量获评委点赞
-
Android仿QQ复制昵称效果2
-
2018年最成功的创业案例:从小程序“跳”到拼多多、再“刷”到抖音
-
天九共享集团:不想让项目死在路上 自己就得“死”在看项目的路上
-
一年营收200亿?抖音只吃了“短视频创业”市场中很小一块
-
php中突破基于HTTP_REFERER的防盗链措施(stream_context_create)
-
LotusPhp笔记之:基于ObjectUtil组件的使用分析
-
详解基于angular路由的requireJs按需加载js