uni-ttLive：基于uniapp+uViewUI短视频+聊天直播实例

一、项目概述

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

uniapp自定义navbar+tabbar组件

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

更多详细介绍，大家可以去参看之前的分享文章。
uniapp自定义导航栏+菜单栏组件

uniapp封装自定义弹框组件

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

支持20+自定义参数，支持标签式+函数式两种调用方式。

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

uniapp短视频/直播

项目中小视频/直播页面整体分为顶部导航区+视频区+底部区三个部分。
视频可以上下滑动切换，支持播放/暂停，点赞评论

    
        
            
            
                
                {{`\ue607`}}
            
            
            
                
                    
                    
                        
                            {{item.author}}
                            {{item.isFollow ? '已关注' : '关注'}}
                        
                        
                            #{{kw}}
                        
                        {{item.desc}}
                    
                    
                    
                        {{`\ue734`}}
                        {{`\ue635`}}{{item.likeNum+(item.isLike ? 1 : 0)}}
                        {{`\ue632`}}{{item.replyNum}}
                        {{`\ue63b`}}{{item.shareNum}}
                    
                
            
        
    
    
    

短视频底部新增了一条时间播放进度条。

// 播放进度变化时触发
handleTimeUpdate(e) {
    let { currentTime, duration } = e.detail
    
    this.progressBar = parseInt((currentTime / duration).toFixed(2) * parseInt(this.winWidth))
},

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

最后附上一个最新项目案例
https://segmentfault.com/a/11...