uniapp+vue.js短视频+直播聊天uni-ttLive

Vedu • 2021-09-12 15:50 • 程序开发 • 阅读 797

最近在捣鼓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 = StoreVue.config.productionTip = falseApp.mpType = 'app'// #ifdef APP-PLUSplus.navigator.closeSplashscreen()// #endifconst 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目录下。

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/procedure/29024.html

uniapp+vue.js短视频+直播聊天uni-ttLive

实现技术

main.js配置

相关推荐

发表评论