关于uniapp:unittLive基于uniappuViewUI短视频聊天直播实例

55次阅读

共计 8092 个字符，预计需要花费 21 分钟才能阅读完成。

一、我的项目概述

uniapp-ttlive 一款基于 uni-app+uview-ui+vue.js+uapopup 等技术混合开发的多端仿造抖音短视频 / 直播 / 聊天我的项目。反对全屏沉迷式、高低滑动切换视频等性能。

二、预览成果

如下图：在 h5、小程序、APP 端编译成果

三、编码技术

  • 编码器 / 技术：HbuilderX3.1.21+Uniapp+Nvue+Vuex+Uapopup
  • UI 组件库：uView-ui / uni-ui
  • 矢量图标库：iconfont 字体图标
  • 弹窗组件：UApopup 基于 uni-app 封装跨端弹窗组件
  • 自定义导航条 + 底部菜单栏
  • 编译反对：H5+ 小程序 +APP 端

四、性能个性

✅ 反对全屏沉迷式通明模式
✅ 顺滑的高低滑动体验
✅ 迷你工夫进度条
✅ 自定义组件反对 Nvue 页面

五、目录构造 / 编译

我的项目中应用的组件库是 uview-ui，多平台疾速开发 UI 框架。

main.js 配置

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

import uView from 'uview-ui'
Vue.use(uView)

import API from '@/common/request'
Vue.prototype.$api = API

// 引入状态治理
import Store from './store'
Vue.prototype.$store = Store

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

// #ifdef APP-PLUS
plus.navigator.closeSplashscreen()
// #endif

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

思考到 Nvue 页面不反对 prototype 原型全局挂载，改为应用 globalData 来管制。

/**
 * 主入口配置
 * @author xiaoyan
 */
<script>
    export default {
        globalData: {
            // 全局设置状态栏和导航栏高度
            statusBarH: 0,
            customBarH: 0,
        },
        onLaunch: function() {
            uni.getSystemInfo({success: (e) => {
                    // 获取手机状态栏高度
                    let statusBar = e.statusBarHeight
                    let customBar
                    
                    // #ifndef MP
                    customBar = statusBar + (e.platform == 'android' ? 50 : 45)
                    // #endif
                    
                    // #ifdef MP-WEIXIN
                    // 获取胶囊按钮的布局地位信息
                    let menu = wx.getMenuButtonBoundingClientRect()
                    // 导航栏高度 = 胶囊下间隔 + 胶囊上间隔 - 状态栏高度
                    customBar = menu.bottom + menu.top - statusBar
                    // #endif
                    
                    // #ifdef MP-ALIPAY
                    customBar = statusBar + e.titleBarHeight
                    // #endif
                    
                    // 兼容 nvue 写法（H5/ 小程序 /APP/APP-Nvue）this.globalData.statusBarH = statusBar
                    this.globalData.customBarH = customBar
                }
            })
        },
        onShow: function() {console.log('App Show')
        },
        onHide: function() {console.log('App Hide')
        }
    }
</script>

uniapp 自定义 navbar+tabbar 组件

大家看到的顶部导航条及底部菜单栏，是全新开发的反对 nvue 组件。

<!-- 导航条模板 -->
<template>
    <view class="ua__navbar">
        <view class="ua__navbar-wrap" :class="{'custom': custom,'fixed': fixed || transparent}"
            :style="{'height': customBarH +'px','padding-top': (custom ? statusBarH : 0) +'px','background': bgcolor,'color': color,'z-index': zIndex}">
            <!-- // 左侧 (返回) -->
            <view class="action navbar-action__left" v-if="back && back!='false'"@click="onBack">
                <template v-if="$slots.back">
                    <slot name="back" />
                </template>
                <template v-else><text class="iconfont nvuefont"
                        :style="{'color': color}">{{'\ue84c'}}</text></template>
                <slot name="backText" />
            </view>
            <slot name="left" />

            <!-- // 题目 -->
            <view v-if="!search" class="navbar-title" :class="{'center': center}">
                <template v-if="$slots.title">
                    <slot name="title" />
                </template>
                <template v-else><text :style="{'color': color}">{{title}}</text></template>
            </view>

            <!-- // 搜寻框 -->
            <view v-if="search" class="action navbar-action__search">
                <slot name="search" />
            </view>

            <!-- // 右侧 -->
            <view class="action navbar-action__right">
                <slot name="right" />
            </view>
        </view>
    </view>
</template>

更多具体介绍，大家能够去参看之前的分享文章。
uniapp 自定义导航栏 + 菜单栏组件

uniapp 封装自定义弹框组件

uaPopup 全新封装的一款多端弹窗组件，反对 nvue 页面。

反对 20+ 自定义参数，反对标签式 + 函数式两种调用形式。

<ua-popup v-model="isVisibleConfirm" shadeClose="false" title="题目" xclose z-index="1001"
    content="<div style='color:#ff557f;padding:20px 40px;'> 预测将来的最好方法是本人亲手发明将来！</div>"
    :btns="[{text: '勾销', click: handleCancel},
        {text: '确定', style: 'color:#00aa00;', click: handleOk},
    ]"
/>
<script>
export default {
    methods: {handleOk() {
            let $ua = this.$refs.uapopup
            $ua.open({
                content: '人生漫漫，且行且珍惜',
                customStyle: {'background-color': 'rgba(170, 0, 127, 0.6)', 'color': '#fff'},
                time: 3,
                onClose() {
                    $ua.open({
                        type: 'android',
                        content: '<div style="color:#aa007f"> 不要期待机会，而要发明机会 </div>',
                        customStyle: {'width': '210px'},
                        btns: [
                            {
                                text: '敞开',
                                click() {$ua.close()
                                }
                            },
                            {
                                text: '确定',
                                style: 'color:#00aa00;',
                                click() {// ...}
                            }
                        ]
                    })
                }
            })
        }
    }
}
</script>

如果感兴趣的话，能够参看之前的这篇分享文章。
uaPopup 弹窗：一款 uniapp 的平台弹窗组件

uniapp 短视频 / 直播

我的项目中小视频 / 直播页面整体分为顶部导航区 + 视频区 + 底部区三个局部。
视频能够高低滑动切换，反对播放 / 暂停，点赞评论

<view v-if="currentTab == 2" class="ua__tabcnt-recommend">
    <swiper class="ua__vdplayer-swiper flex1" :current="currentVideo" vertical @change="handleSwipeVertical">
        <swiper-item v-for="(item, index) in videoList" :key="index">
            <!-- 视频模块 -->
            <view class="ua__vdplayer-video flex1">
                <video class="vdplayer" :id="'vdplayer' + index":ref="'vdplayer'+ index" 
                    :src="item.src"
                    :controls="false" :loop="true" :show-center-play-btn="false" object-fit="fill"
                    :autoplay="index == currentVideo"
                    @play="isPlaying=true" @timeupdate="handleTimeUpdate"
                    :style="{'width': winWidth,'height': winHeight}"
                >
                </video>
                <view class="ua__vdplayer-playwrap" @click="handleVideoClicked"><view v-if="!isPlaying" class="ua__vdplayer-playbtn"><text class="iconfont">{{`\ue607`}}</text></view></view>
            </view>
            <!-- 信息模块 -->
            <view class="ua__vdplayer-info flexbox flex-col">
                <view class="flexbox flex-row flex-alignb">
                    <!-- // 左侧信息 -->
                    <view class="vdinfo__left flex1">
                        <view class="ltitem uavatar flexbox flex-row">
                            <navigator url="#" class="flexbox flex-alignc flex-row"><image class="uimg" :src="item.avatar" /><text class="uname">{{item.author}}</text></navigator>
                            <view class="flexbox btn" :class="{'actived': item.isFollow}" @click="handleFollow(index)"><text class="btn-text">{{item.isFollow ? '已关注' : '关注'}}</text></view>
                        </view>
                        <view v-if="item.topic" class="ltitem flexbox flex-row">
                            <view class="kw" v-for="(kw, index2) in item.topic" :key="index2"><text class="lbl">#{{kw}}</text></view>
                        </view>
                        <view class="ltitem"><text class="desc">{{item.desc}}</text></view>
                    </view>
                    <!-- // 右侧按钮 -->
                    <view class="vdinfo__right flexbox flex-col">
                        <view class="rtitem ball" v-if="item.goods&&item.goods.length > 0" @click="handleShowGoodsPopup(item.goods)"><text class="icon iconfont">{{`\ue734`}}</text></view>
                        <view class="rtitem" :class="{'isliked': item.isLike}" @click="handleLiked(index)"><text class="icon iconfont">{{`\ue635`}}</text><text class="num">{{item.likeNum+(item.isLike ? 1 : 0)}}</text></view>
                        <view class="rtitem" @click="showReplyPopup = true"><text class="icon iconfont">{{`\ue632`}}</text><text class="num">{{item.replyNum}}</text></view>
                        <view class="rtitem" @click="showSharePopup = true"><text class="icon iconfont">{{`\ue63b`}}</text><text class="num">{{item.shareNum}}</text></view>
                    </view>
                </view>
            </view>
        </swiper-item>
    </swiper>
    <!-- 底部播放进度条 -->
    <view class="ua__vdplayer-progress"><view class="bar" :style="{'width': progressBar+'px'}"></view></view>
</view>

短视频底部新增了一条工夫播放进度条。

// 播放进度变动时触发
handleTimeUpdate(e) {let { currentTime, duration} = e.detail
    
    this.progressBar = parseInt((currentTime / duration).toFixed(2) * parseInt(this.winWidth))
},
<script>
    const app = getApp()
    import videoJSON from '@/mock/videolist.js'
    
    export default {data() {
            return {
                // 导航栏高度
                customBarHeight: app.globalData.customBarH,
                navbarBgcolor: '#21252b',
                tabbarBgcolor: '#21252b',
                
                tabNavLs: [{label: '左近动静', badge: 5, lists: []},
                    {label: '关注', lists: []},
                    {label: '举荐', dot: true, lists: []},
                ],
                // 以后选项卡
                currentTab: 0,
                
                // 以后视频索引
                currentVideo: 0,
                // 视频数据
                videoList: videoJSON,
                // 视频是否播放中
                isPlaying: false,
                // 点击次数
                clickNum: 0,
                // 视频播放进度条
                progressBar: 0,
                clickTimer: null,
                
                // 屏幕宽高
                winWidth: '',
                winHeight: '',
                
                popupGoodsList: [],
                showGoodsPopup: false,
                showReplyPopup: false,
                showSharePopup: false,
            }
        },
        watch: {currentTab(val) {this.changeTabPanel(val)
            }
        },
        computed:{customBarMargin() {return `margin-top: ${this.customBarHeight}px`
            }
        },
        created() {
            // 引入 iconfont 字体
            // #ifdef APP-NVUE
            const domModule = weex.requireModule('dom')
            domModule.addRule('fontFace', {
                fontFamily: "nvueIcon",
                'src': "url('/static/fonts/iconfont.ttf')"
            });
            // #endif
            
            let wW = uni.getSystemInfoSync().windowWidth
            let wH = uni.getSystemInfoSync().windowHeight
            this.winWidth = `${wW}px`
            this.winHeight = `${wH}px`
        },
        methods: {
            
            // 长按动静
            handleDynamicMenu(e) {
                let points
                // #ifndef APP-NVUE
                points = [e.touches[0].clientX, e.touches[0].clientY]
                // #endif
                // #ifdef APP-NVUE
                points = [e.touches[0].screenX, e.touches[0].screenY]
                // #endif
                
                this.$refs.uapopup.open({
                    type: 'contextmenu',
                    follow: points,
                    btns: [{text: '不感兴趣'},
                        {text: '复制'},
                        {
                            text: '举报',
                            style: 'color:#f00;',
                            click: () => {this.$refs.uapopup.close()
                            }
                        },
                    ],
                })
            },
            
            /* ++++++++++ {视频播放模块} ++++++++++ */
            getVideoCtx() {// return this.$refs['vdplayer' + this.currentVideo][0]
                return uni.createVideoContext('vdplayer'+ this.currentVideo, this)
            },
            
            // 垂直滑动视频
            handleSwipeVertical(e) {
                let index = e.detail.current
                this.progressBar = 0
                this.isPlaying = false
                let video = this.getVideoCtx()
                if(!video) return
                video.pause()
                // 从新开始
                video.seek(0)
                
                this.currentVideo = index
                
                // 自动播放
                this.handlePlay()},
            
            handlePlay() {let video = this.getVideoCtx()
                if(!video) return
                video.play()
                this.isPlaying = true
            },
            
            handlePause() {let video = this.getVideoCtx()
                if(!video) return
                video.pause()
                this.isPlaying = false
            },
            
            // 点击视频（单击 / 双击）handleVideoClicked() {this.clickTimer && clearTimeout(this.clickTimer)
                this.clickNum++
                this.clickTimer = setTimeout(() => {if(this.clickNum >= 2) {console.log('你双击了')
                    }else {console.log('你单击了')
                        if(this.isPlaying) {this.handlePause()
                        }else {this.handlePlay()
                        }
                    }
                    this.clickNum = 0
                }, 250)
            },
            
            ...
        }
    }
</script>

OKey，基于 Uniapp 开发仿造抖音短视频 / 直播实例就分享到这里。

最初附上一个最新我的项目案例
https://segmentfault.com/a/11…

正文完
uniapp
发表至： uni-app
2021-09-20
 0
关于uni-app:uniapp打包web项目uniapp开发vue网页应用
关于uniapp:uniapp返回上一级页面前先判断是否需要弹出提示弹出提示后用户点击确定返回上一级页面点击取消就阻止返回
关于uniapp:uniapp项目实践总结十二封装通用请求上传以及下载方法
关于uniapp:unisimplerouter使用vuerouter管理uniapp路由