艺宵网 程序开发 uniapp+vue.js短视频+直播聊天uni-ttLive

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

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

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

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

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

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

实现技术

  • 使用技术:uniapp+vue.js
  • 组件库:uni-ui、uView-ui
  • 弹窗组件:ua-popup
  • 自定义topbar+tabbar
uniapp+vue.js短视频+直播聊天uni-ttLive

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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目录下。

uniapp+vue.js短视频+直播聊天uni-ttLive
本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。http://www.yixao.net/procedure/29024.html
Vedu

作者: Vedu

这个人很懒,什么都没有留下~

发表评论

联系我们

联系我们

15378714280

在线咨询: QQ交谈

邮箱: yixaonet@163.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部