欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

基于vue+uniapp直播项目|uni-app仿抖音/陌陌直播室

程序员文章站 2022-05-22 20:59:33
一、项目简介 uni-liveShow是一个基于vue+uni-app技术开发的集小视频/IM聊天/直播等功能于一体的微直播项目。界面仿制抖音|火山小视频/陌陌直播,支持编译到多端(H5、小程序、App端) 且兼容效果一致。 二、效果预览 在H5、小程序、App端测试效果如下:(后续大图均为APP端 ......

 一、项目简介

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

二、效果预览

在h5、小程序、app端测试效果如下:(后续大图均为app端)

基于vue+uniapp直播项目|uni-app仿抖音/陌陌直播室

三、使用技术

  • 编码器+技术:hbuilderx + vue/nvue/uniapp/vuex
  • iconfont图标:阿里字体图标库
  • 自定义导航栏 + 底部tabbar
  • 弹窗组件:unipop(uni-app封装自定义弹出窗)
  • 测试环境:h5端 + 小程序 + app端

基于vue+uniapp直播项目|uni-app仿抖音/陌陌直播室

基于vue+uniapp直播项目|uni-app仿抖音/陌陌直播室

基于vue+uniapp直播项目|uni-app仿抖音/陌陌直播室

基于vue+uniapp直播项目|uni-app仿抖音/陌陌直播室

基于vue+uniapp直播项目|uni-app仿抖音/陌陌直播室

基于vue+uniapp直播项目|uni-app仿抖音/陌陌直播室

基于vue+uniapp直播项目|uni-app仿抖音/陌陌直播室

基于vue+uniapp直播项目|uni-app仿抖音/陌陌直播室

基于vue+uniapp直播项目|uni-app仿抖音/陌陌直播室

基于vue+uniapp直播项目|uni-app仿抖音/陌陌直播室

基于vue+uniapp直播项目|uni-app仿抖音/陌陌直播室

基于vue+uniapp直播项目|uni-app仿抖音/陌陌直播室

基于vue+uniapp直播项目|uni-app仿抖音/陌陌直播室

基于vue+uniapp直播项目|uni-app仿抖音/陌陌直播室

基于vue+uniapp直播项目|uni-app仿抖音/陌陌直播室

基于vue+uniapp直播项目|uni-app仿抖音/陌陌直播室

基于vue+uniapp直播项目|uni-app仿抖音/陌陌直播室

基于vue+uniapp直播项目|uni-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>

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

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

基于vue+uniapp直播项目|uni-app仿抖音/陌陌直播室 基于vue+uniapp直播项目|uni-app仿抖音/陌陌直播室

<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组件实现上下滑动切换视频播放。

基于vue+uniapp直播项目|uni-app仿抖音/陌陌直播室

<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属性不支持。

基于vue+uniapp直播项目|uni-app仿抖音/陌陌直播室

<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;">&#xe61e;</text></view>
                                    <view class="btn-toolitem btn-toolitem-cart" @tap="handlelivegift"><text class="iconfont i-btntool">&#xe600;</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项目基本介绍完了,希望对大家有些许帮助。