最近在捣鼓uniapp小视频项目，结合之前开发的一些自定义插件，就开发了一个uniapp仿抖音短视频uni-ttLive项目。

uni-ttlive 一款基于uniapp+vue.js+uView+uaPopup等技术开发的仿抖音短视频+直播+聊天项目。

实现技术

• 使用技术：uniapp+vue.js
• 组件库：uni-ui、uView-ui
• 弹窗组件：ua-popup
• 自定义topbar+tabbar

项目包含短视频、直播及聊天三个大模块。

首页短视频可以流畅上下滑动切换，底部显示小视频播放mini进度条。其中小视频和直播页面采用了nvue组件写法。

main.js配置

/**
 * 主入口配置
 * @author YXY
 */

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页面，通过globalData来保存全局状态栏及导航栏高度。

<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
				}
			})
		},
	}
</script>

<style>
	/*每个页面公共css */
	/* #ifndef APP-NVUE */
	@import './static/fonts/iconfont.css';
	/* #endif */
</style>
<style lang="scss">
	@import './style/reset.scss';
	@import './style/layout.scss';
	
	@import "uview-ui/index.scss";
</style>

hbuilderx2.5起，支持easycom自动导入组件模式。将自定义组件放在components目录下。

vue+uniapp跨平台开发初体验

uaPopup一款基于uni-app自定义弹框组件(加强版)

emmm，暂时分享到这里。欢迎大家一起交流讨论哈！

最近有些小忙，可能不会过多的分享一些技术文章，敬请谅解。