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

一、项目概述 uniapp-ttlive 一款基于uni-app+uview-ui+vue.js+uapopup等技术混合开发的多端仿制抖音短视频/直播/聊天项目。支持全屏沉浸式、上下滑动切换视频等功能。
二、预览效果 【uni-ttLive（基于uniapp+uViewUI短视频+聊天直播实例）】如下图：在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 = StoreVue.config.productionTip = false App.mpType = 'app'// #ifdef APP-PLUS plus.navigator.closeSplashscreen() // #endifconst 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.detailthis.progressBar = parseInt((currentTime / duration).toFixed(2) * parseInt(this.winWidth)) },

OKey，基于Uniapp开发仿制抖音短视频/直播实例就分享到这里。
最后附上一个最新项目案例
https://segmentfault.com/a/11...