Project introduction

U live broadcast is a tiktok project based on uniapp+vue+nvue+vuex technology, which is a small video / live interface / chat function. It is designed to simulate the function of the small video and the live broadcast of the unfamiliar street. It can also function such as sliding, switching, playing, pause, comment, and merchandise.

Technical framework

• Editor + technology: hbuilderx + Vue / nvue / uniapp / vuex
• Iconfont Icon: alifont Icon Library
• Custom navigation bar + bottom tabbar
• Unipop (uniapp)
• Test environment: H5 / Applet / APP / real machine

App.vue Page get top status bar height

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

Top transparent navigation bar implementation

Due to the limitations of the native navigation bar, some effects are not easy to implement. Therefore, the top navigation bar mode is customized, and transparent background (such as personal homepage / circle of friends dynamic) effect can be set. For details, please refer to this article:Uni app custom navigation bar button | uniapp imitates the top navigation bar of wechat

<header-bar :isBack="true" :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>

Tiktok video switching

Uniapp+swiper achieves tiktok / volcano video with small and small sliding video effects, clicking on playback, pause, dot call, commentary and other functions.

<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>
                <! -- middle play button -- >
                <view class="vd-cover flexbox" @click="handleClicked(index)"><text v-if="!isPlay" class="iconfont icon-bofang"></text></view>
                <! -- bottom message -- >
                <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  ?'followed ':'followed'} < / text > and
                        </view>
                        <view class="item reply" @tap="handleVideoComment"><text class="iconfont icon-pinglun mr_ 5 "> < / text > write comments... < / 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>
    let timer = null
    export default {
        data() {
            return {
                videoIndex: 0,
                vlist: videoJson,

                Isplay: true, // is the current video playing
                Clicknum: 0, // record the number of hits
            }
        },
        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)
            },

            //Slide switch
            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
            play(index) {
                this.videoContextList[index].play()
                this.isPlay = true
            },
            //Pause
            pause(index) {
                this.videoContextList[index].pause()
                this.isPlay = false
            },
            //Click on video events
            handleClicked(index) {
                if(timer){
                    clearTimeout(timer)
                }
                this.clickNum++
                timer = setTimeout(() => {
                    if(this.clickNum >= 2){
                        console.log ('double click video')
                    }else{
                        console.log ('click video')
                        if(this.isPlay){
                            this.pause(index)
                        }else{
                            this.play(index)
                        }
                    }
                    this.clickNum = 0
                }, 300)
            },

            //Like it
            handleIsLike(index){
                let vlist = this.vlist
                vlist[index].islike =! vlist[index].islike
                this.vlist = vlist
            },
            //Show comments
            handleVideoComment() {
                this.$refs.videoComment.show()
            },

            //Shopping cart display
            handleVideoCart(index) {
                this.$refs.videoCart.show(index)
            },
        }
    }
</script>

Development of small video based on nvue

Due to the high level of native components such as native video and map, although the cover view component can cover it, it can’t embed sub components and has a large limitation, so it can only write. Nvue (native Vue) page. The syntax structure of nvue page is similar to Vue, but it needs to pay attention to the way CSS is written, and only flex layout mode can be used. Some other CSS properties are invalid. There are also differences in the introduction of iconfont.
Nvue introduces iconfont mode

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

Well, the above is the introduction of uniapp development small video / live project, I hope to help you a little bit A kind of
Finally, share H5 instant im projects developed before
HTML5 fun chat | imitation of wechat H5 voice | shake a shake | map | red envelope

This work adoptsCC agreementThe author and the link to this article must be indicated in the reprint