经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » HTML5 » 查看文章
基于vue+uniapp直播项目|uni-app仿抖音/陌陌直播室
来源：cnblogs　　作者：xiaoyan2017　　时间：2019/11/12 8:43:41　　对本文有异议

 一、项目简介

uni-liveShow是一个基于vue+uni-app技术开发的集小视频/IM聊天/直播等功能于一体的微直播项目。界面仿制抖音|火山小视频/陌陌直播，支持编译到多端(H5、小程序、App端) 且兼容效果一致。

二、效果预览

在H5、小程序、App端测试效果如下：(后续大图均为APP端)

三、使用技术

  • 编码器+技术：HBuilderX + vue/NVue/uniapp/vuex
  • iconfont图标：阿里字体图标库
  • 自定义导航栏 + 底部Tabbar
  • 弹窗组件：uniPop（uni-app封装自定义弹出窗）
  • 测试环境：H5端 + 小程序 + App端

◆ uniapp计算设备顶部状态栏高度

  1.  /**
  2.   * @desc   uniapp主页面App.vue
  3.   * @about  Q：282310962  wx：xy190310
  4.   */
  5.  
  6. <script>
  7.     import Vue from 'vue'
  8.     export default {
  9.         onLaunch: function() {
  10.             // console.log('App Launch')
  11.             uni.getSystemInfo({
  12.                 success:function(e){
  13.                     Vue.prototype.statusBar = e.statusBarHeight
  14.                     // #ifndef MP
  15.                     if(e.platform == 'android') {
  16.                         Vue.prototype.customBar = e.statusBarHeight + 50
  17.                     }else {
  18.                         Vue.prototype.customBar = e.statusBarHeight + 45
  19.                     }
  20.                     // #endif
  21.                     
  22.                     // #ifdef MP-WEIXIN
  23.                     let custom = wx.getMenuButtonBoundingClientRect()
  24.                     Vue.prototype.customBar = custom.bottom + custom.top - e.statusBarHeight
  25.                     // #endif
  26.                     
  27.                     // #ifdef MP-ALIPAY
  28.                     Vue.prototype.customBar = e.statusBarHeight + e.titleBarHeight
  29.                     // #endif
  30.                 }
  31.             })
  32.         },
  33.     }
  34. </script>

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

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

 

  1. <header-bar :isBack="true" title=" " :bgColor="{background: 'transparent'}" transparent>
  2.     <text slot="back" class="uni_btnIco iconfont icon-guanbi" style="font-size: 25px;"></text>
  3.     <text slot="iconfont" class="uni_btnIco iconfont icon-dots mr_5" style="font-size: 25px;"></text>
  4. </header-bar>

◆ uniapp仿抖音小视频效果

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

  1. <swiper :indicator-dots="false" :duration="200" :vertical="true" :current="videoIndex" @change="handleSlider" style="height: 100%;">
  2.     <block v-for="(item,index) in vlist" :key="index">
  3.         <swiper-item>
  4.             <view class="uni_vdplayer">
  5.                 <video :id="'myVideo' + index" :ref="'myVideo' + index" class="player-video" :src="item.src" 
  6.                 :controls="false" :loop="true" :show-center-play-btn="false" objectFit="fill">
  7.                 </video>
  8.                 <!-- 中间播放按钮 -->
  9.                 <view class="vd-cover flexbox" @click="handleClicked(index)"><text v-if="!isPlay" class="iconfont icon-bofang"></text></view>
  10.                 <!-- 底部信息 -->
  11.                 <view class="vd-footToolbar flexbox flex_alignb">
  12.                     <view class="vd-info flex1">
  13.                         <view class="item at">
  14.                             <view class="kw" v-for="(kwItem,kwIndex) in item.keyword" :key="kwIndex"><text class="bold fs_18 mr_5">＃</text> {{kwItem}}</view>
  15.                         </view>
  16.                         <view class="item subtext">{{item.subtitle}}</view>
  17.                         <view class="item uinfo flexbox flex_alignc">
  18.                             <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>
  19.                         </view>
  20.                         <view class="item reply" @tap="handleVideoComment"><text class="iconfont icon-pinglun mr_5"></text> 写评论...</view>
  21.                     </view>
  22.                     <view class="vd-sidebar">
  23.                         <view v-if="item.cart" class="ls cart flexbox bg_linear3" @tap="handleVideoCart(index)"><text class="iconfont icon-cart"></text></view>
  24.                         <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>
  25.                         <view class="ls" @tap="handleVideoComment"><text class="iconfont icon-liuyan"></text><text class="num">{{item.replyNum}}</text></view>
  26.                         <view class="ls"><text class="iconfont icon-share"></text><text class="num">{{item.shareNum}}</text></view>
  27.                     </view>
  28.                 </view>
  29.             </view>
  30.         </swiper-item>
  31.     </block>
  32. </swiper>

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

  1. <script>
  2.     // 引入商品广告、评论
  3.     import videoCart from '@/components/cp-video/cart.vue'
  4.     import videoComment from '@/components/cp-video/comment'
  5.     
  6.     let timer = null
  7.     export default {
  8.         data() {
  9.             return {
  10.                 videoIndex: 0,
  11.                 vlist: videoJson,
  12.                 
  13.                 isPlay: true,    //当前视频是否播放中
  14.                 clickNum: 0,    //记录点击次数
  15.             }
  16.         },
  17.         components: {
  18.             videoCart, videoComment
  19.         },
  20.         onLoad(option) {
  21.             this.videoIndex = parseInt(option.index)
  22.         },
  23.         onReady() {
  24.             this.init()
  25.         },
  26.         methods: {
  27.             init() {
  28.                 this.videoContextList = []
  29.                 for(var i = 0; i < this.vlist.length; i++) {
  30.                     // this.videoContextList.push(this.$refs['myVideo' + i][0])
  31.                     this.videoContextList.push(uni.createVideoContext('myVideo' + i, this));
  32.                 }
  33.                 
  34.                 setTimeout(() => {
  35.                     this.play(this.videoIndex)
  36.                 }, 200)
  37.             },
  38.             
  39.             // 滑动切换
  40.             handleSlider(e) {
  41.                 let curIndex = e.detail.current
  42.                 if(this.videoIndex >= 0){
  43.                     this.videoContextList[this.videoIndex].pause()
  44.                     this.videoContextList[this.videoIndex].seek(0)
  45.                     this.isPlay = false
  46.                 }
  47.                 if(curIndex === this.videoIndex + 1) {
  48.                     this.videoContextList[this.videoIndex + 1].play()
  49.                     this.isPlay = true
  50.                 }else if(curIndex === this.videoIndex - 1) {
  51.                     this.videoContextList[this.videoIndex - 1].play()
  52.                     this.isPlay = true
  53.                 }
  54.                 this.videoIndex = curIndex
  55.             },
  56.             // 播放
  57.             play(index) {
  58.                 this.videoContextList[index].play()
  59.                 this.isPlay = true
  60.             },
  61.             // 暂停
  62.             pause(index) {
  63.                 this.videoContextList[index].pause()
  64.                 this.isPlay = false
  65.             },
  66.             // 点击视频事件
  67.             handleClicked(index) {
  68.                 if(timer){
  69.                     clearTimeout(timer)
  70.                 }
  71.                 this.clickNum++
  72.                 timer = setTimeout(() => {
  73.                     if(this.clickNum >= 2){
  74.                         console.log('双击视频')
  75.                     }else{
  76.                         console.log('单击视频')
  77.                         if(this.isPlay){
  78.                             this.pause(index)
  79.                         }else{
  80.                             this.play(index)
  81.                         }
  82.                     }
  83.                     this.clickNum = 0
  84.                 }, 300)
  85.             },
  86.             
  87.             
  88.             // 喜欢
  89.             handleIsLike(index){
  90.                 let vlist = this.vlist
  91.                 vlist[index].islike =! vlist[index].islike
  92.                 this.vlist = vlist
  93.             },
  94.             // 显示评论
  95.             handleVideoComment() {
  96.                 this.$refs.videoComment.show()
  97.             },
  98.             
  99.             // 显示购物车
  100.             handleVideoCart(index) {
  101.                 this.$refs.videoCart.show(index)
  102.             },
  103.         }
  104.     }
  105. </script>

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

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

◆ uniapp聊天页面实现

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

◆ 直播页面live.nvue

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

  1. <template>
  2.     <div class="nlv__container">
  3.         <view class="nlv_main">
  4.             <swiper class="nlv-swiper" :indicator-dots="false" :vertical="false" :current="videoIndex" @change="handleSlider">
  5.                 <swiper-item v-for="(item, index) in vlist" :key="index">
  6.                     <!-- //直播区 -->
  7.                     <view class="nlv-playerbox">
  8.                         <video :id="'myVideo' + index" :ref="'myVideo' + index" class="player-video" :src="item.src" :autoplay="index == videoIndex"
  9.                         :controls="false" :loop="true" :show-center-play-btn="false" objectFit="fill" :style="{height: winHeight, width: winWidth}">
  10.                         </video>
  11.                         
  12.                         <!-- //顶部 -->
  13.                         <view class="nlv_topbar" :style="{ height: headerBarH, 'padding-top': statusBarH }">
  14.                             ...
  15.                         </view>
  16.                         
  17.                         <!-- //排名信息 -->
  18.                         <view class="nlv-rankbox" :style="{top: headerBarH}">
  19.                             <view class="nlv-rkls">
  20.                                 <text class="rkitem">总排名{{item.allRank}}</text>
  21.                                 <text v-if="item.hourRank" class="rkitem">小时榜第{{item.hourRank}}名</text>
  22.                             </view>
  23.                             <text class="nlv-uid">U直播:{{item.uid}}</text>
  24.                         </view>
  25.                         
  26.                         <!-- //底部信息栏 -->
  27.                         <view class="nlv-footToolbar">
  28.                             <!-- 送礼物提示 -->
  29.                             <view class="nlv-giftTipPanel">
  30.                                 ...
  31.                             </view>
  32.                             
  33.                             <!-- 滚动msg信息 -->
  34.                             <scroll-view class="nlv-rollMsgPanel" scroll-y show-scrollbar="false">
  35.                                 <block v-for="(msgitem, msgidx) in item.rollmsg" :key="msgidx">
  36.                                     <view class="nlv-msglist"><view class="msg_bg"><text class="msg_name">{{msgitem.uname}}</text> <text class="msg_text">{{msgitem.content}}</text></view></view>
  37.                                 </block>
  38.                             </scroll-view>
  39.                             
  40.                             <view class="nlv-infobox">
  41.                                 <view class="nlv_reply" @tap="handleRollMsg(index)"><text class="nlv_reply_text">说点什么...</text></view>
  42.                                 <view class="nlv_btntool">
  43.                                     ...
  44.                                     <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>
  45.                                     <view class="btn-toolitem btn-toolitem-cart" @tap="handleLiveGift"><text class="iconfont i-btntool">&#xe600;</text></view>
  46.                                     ...
  47.                                 </view>
  48.                             </view>
  49.                         </view>
  50.                     </view>
  51.                 </swiper-item>
  52.             </swiper>
  53.         </view>
  54.         
  55.         <!-- 商品广告、滚动消息、礼物 -->
  56.         <live-cart ref="liveCart" :vlist="vlist" />
  57.         <roll-msg ref="rollMsg" :vlist="vlist" />
  58.         <live-gift ref="liveGift" />
  59.     </div>
  60. </template>

另外引入阿里字体图标也需注意：通过weex方式引入

  1. beforeCreate() {
  2.     // 引入iconfont字体
  3.     // #ifdef APP-PLUS
  4.     const domModule = weex.requireModule('dom')
  5.     domModule.addRule('fontFace', {
  6.         fontFamily: "nvueIcon",
  7.         'src': "url('../../../static/fonts/iconfont.ttf')"
  8.     });
  9.     // #endif
  10. },

至于视频滑动切换和上面小视频操作差不多，就不贴码了。 到这里，uni-liveShow项目基本介绍完了，希望对大家有些许帮助。??

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

vue+vuex+vue-router仿微信网页版聊天室  https://www.cnblogs.com/xiaoyan2017/p/10793728.html

angular+ng-router手机端聊天IM实战开发   https://www.cnblogs.com/xiaoyan2017/p/11194828.html

 

原文链接：http://www.cnblogs.com/xiaoyan2017/p/11835641.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

HTML5热门文章

  • Webpack友好的错误提示插件friendly-errors-webpack-plugin
  • uni-app 微信小程序 picker 三级联动
  • 记录vue用 html5+做移动APP 用barcode做扫一扫功能时安卓 的bug(黑屏、错位等等)和解决方法
  • H5+ 操作手机日历
  • uni-app开发经验分享十五： uni-app 蓝牙打印功能
  • 设计中的设计PDF下载高清完整扫描原版
  • 前端canvas动画如何转成mp4视频的方法
  • antd通过 filterDropdown 自定义--按某天时间搜索
  • H5+ API 设置手机状态栏颜色以及沉浸式状态栏
  • elementui中el-input联想搜索框

    • HTML5推荐文章

  • canvas实现动态替换人物的背景颜色
  • form 表单恢复初始数据
  • canvas?中如何实现物体的框选
  • 前端canvas中物体边框和控制点的实现示例
  • FileReader()读取文件、图片上传预览
  • 跨域访问方法介绍(5)--使用 window.postMessage 传递数据
  • 跨域访问方法介绍(3)--使用片段识别符传值
  • 跨域访问方法介绍(4)--使用 window.name 传值
  • HTML
  • 前端常用模板引擎- artTemplate

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号