uniapp直播室|仿抖音視頻|nvue+uniapp高仿陌陌直播

1、介紹說明

U直播uniLiveShow是一款基於vue+Nvue+uni-app技術開發的綜合小視頻/聊天室/直播等功能的聊天直播項目。界面高仿熱門抖音|火山小視頻/陌陌直播，可滑動切換視頻播放，且支持編譯到多端且兼容效果一致。

2、項目預覽

在H五、小程序、App端及真機測試效果一致 以下：

3、編碼實現：

• 編輯器+技術：HBuilderX + vue/NVue/uniapp/vuex
• iconfont圖標：阿里字體圖標庫
• 自定義導航欄 + 底部Tabbar
• 彈窗組件：uniPop（uni-app封裝自定義Modal彈窗）
• 測試環境：H5端/小程序/App端/真機

頂部狀態條高度獲取

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

引入公共組件及樣式

import Vue from 'vue'
import App from './App'

import './static/fonts/iconfont.css'
import './assets/css/reset.css'
import './assets/css/layout.css'

// 狀態管理
import store from './store'
Vue.prototype.$store = store

// 公共組件
import headerBar from './components/header/header.vue'
import tabBar from './components/tabbar/tabbar.vue'
import popupWindow from './components/popupWindow.vue'
Vue.component('header-bar', headerBar)
Vue.component('tab-bar', tabBar)
Vue.component('popup-window', popupWindow)

// 自定義彈窗組件
import uniPop from './components/uniPop/uniPop.vue'
Vue.component('uni-pop', uniPop)

Vue.config.productionTip = false
App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

至於聊天頁面功能效果這裏就不講述了。
可參看這篇：uni-app聊天室App|vue+uniapp仿微信聊天界面實例

uniapp仿抖音效果

uni-app+nvue技術實現仿抖音界面滑動效果，且有點贊、評論及商品等功能，能夠單擊、雙擊判斷。

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

mock-video.js視頻模擬數據

/**
 * @desc 小視頻JSON數據
 */

module.exports = [
    {
        id: 1,
        avator: '/static/uimg/u__chat_img1.jpg',
        poster: '/static/placeholder/video-img4.jpg',
        src: '/static/placeholder/video.mp4',
        author: '豬豬佩奇',
        subtitle: '稻城亞丁-人間絕美景色',
        keyword: ['美好回憶', '旅遊聖地'],
        playNum: 3172,
        likeNum: 2518,
        replyNum: 292,
        shareNum: 107,
        islike: false,
        attention: false,
        cart: [
            {
                name: '同款冬棗',
                image: '/static/placeholder/cart-img1.jpg',
                price: 9.90
            },
            {
                name: '10斤裝爆甜冰糖心紅富士',
                image: '/static/placeholder/cart-img2.jpg',
                price: 9.90
            },
            {
                name: '紅心獼猴桃 單果40-70克',
                image: '/static/placeholder/cart-img3.jpg',
                price: 10.0
            }
        ]
    },
    {
        id: 2,
        avator: '/static/uimg/u__chat_img12.jpg',
        poster: '/static/placeholder/video-img0.jpg',
        src: 'https://txmov2.a.yximgs.com/bs2/newWatermark/MTg3NDYzOTY3MjM_zh_3.mp4',
        author: 'Alisa',
        subtitle: '不要在意別人的流言蜚語',
        keyword: ['經典老歌'],
        playNum: 9432,
        likeNum: 5627,
        replyNum: 1285,
        shareNum: 638,
        islike: true,
        attention: true,
        cart: ''
    },
    {
        id: 3,
        avator: '/static/uimg/u__chat_img5.jpg',
        poster: '/static/placeholder/video-img2.jpg',
        src: 'https://txmov2.a.yximgs.com/bs2/newWatermark/MTY3NTU3MzYzMTQ_zh_4.mp4',
        author: '日後餘生都是你',
        subtitle: '能不能給我一首歌的時間，讓你拾起從前的快樂',
        keyword: '',
        playNum: 7268,
        likeNum: 3438,
        replyNum: 1105,
        shareNum: 327,
        islike: false,
        attention: false,
        cart: [
            {
                name: 'YCID施蒂藍玫瑰凝養柔滑脣膏',
                image: 'https://cbu01.alicdn.com/img/ibank/2019/218/182/12384281812_1493014487.jpg',
                price: 7.70
            },
            {
                name: '瑪可安迪新款抖音網紅推薦口紅',
                image: 'https://cbu01.alicdn.com/img/ibank/2019/285/249/10457942582_1068990292.jpg',
                price: 19.9
            },
        ]
    },
    
    ...
]

<script>
    const videoJson = require('./mock-video.js')
    
    // 引入商品廣告、評論
    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頁面中使用iconfont圖標庫需注意引入方式

beforeCreate() {
    // 引入iconfont字體
    // #ifdef APP-PLUS
    const domModule = weex.requireModule('dom')
    domModule.addRule('fontFace', {
        fontFamily: "nvueIcon",
        'src': "url('../../../static/fonts/iconfont.ttf')"
    });
    // #endif
},

至此 uni-app開發直播聊天項目介紹到這裏，後續繼續爲你們分享實戰項目，但願能有一些許幫助！！

最後分享個基於H5+css3開發的視頻直播項目
http://www.javashuo.com/article/p-sfvjsoio-e.html