Uni

2022-12-12 08:16| 来源: 网络整理| 查看: 265

项目概况

uniapp-ttLive 一款使用uni-app+uview-ui开发的跨端短视频/直播聊天项目。

如下图：编译至小程序+h5+App端效果

采用swiper组件实现小视频上下滑动切换。支持播放/暂停。

运用技术编辑器/技术：HbuilderX3.1.21+Uniapp+Nvue+VuexUI组件库：uView-ui / uni-ui矢量图标库：iconfont字体图标弹窗组件：ua-popup 基于uni-app封装跨端弹窗组件自定义导航条+底部菜单栏编译：h5+小程序+APP端配置main.jsimport 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()项目结构目录

由于prototype不支持nvue页面，所以使用globalData全局设置状态栏高度。

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 } }) }, onShow: function() { console.log('App Show') }, onHide: function() { console.log('App Hide') } } uniapp自定义组件

项目中导航条ua-navbar及底部菜单栏ua-tabbar组件，均是自定义组件。

组件支持镂空在video组件上面，实现全屏沉浸式效果。

之前有过这方面的分享，如果感兴趣可以去看看，另外两个组件均上传至uniapp插件市场。

uniapp自定义组件uaNavbar+uaTabbar

uaPopup全新支持nvue弹窗组件

uapopup针对uniapp短视频直播项目开发的一款全端弹窗组件。

支持函数调用及组件写法调用。

export default { methods: { handleOk() { let $ua = this.$refs.uapopup $ua.open({ content: '人生漫漫，且行且珍惜', customStyle: {'background-color': 'rgba(170, 0, 127, 0.6)', 'color': '#fff'}, time: 3, onClose() { $ua.open({ type: 'android', content: '不要等待机会，而要创造机会', customStyle: {'width': '210px'}, btns: [ { text: '关闭', click() { $ua.close() } }, { text: '确定', style: 'color:#00aa00;', click() { // ... } } ] }) } }) } } }

调用非常简单，支持20+参数混合搭配使用。

uni-app跨平台自定义弹窗组件

uni-app直播/短视频

项目中直播/短视频页面整体分为顶部导航区域、视频区域、底部菜单栏区域三个部分。

{{`\ue607`}} {{item.author}} {{item.isFollow ? '已关注' : '关注'}} #{{kw}} {{item.desc}} {{`\ue734`}} {{`\ue635`}}{{item.likeNum+(item.isLike ? 1 : 0)}} {{`\ue632`}}{{item.replyNum}} {{`\ue63b`}}{{item.shareNum}} const app = getApp() import videoJSON from '@/mock/videolist.js' export default { data() { return { // 导航栏高度 customBarHeight: app.globalData.customBarH, navbarBgcolor: '#21252b', tabbarBgcolor: '#21252b', tabNavLs: [ {label: '附近动态', badge: 5, lists: []}, {label: '关注', lists: []}, {label: '推荐', dot: true, lists: []}, ], // 当前选项卡 currentTab: 0, // 当前视频索引 currentVideo: 0, // 视频数据 videoList: videoJSON, // 视频是否播放中 isPlaying: false, // 点击次数 clickNum: 0, // 视频播放进度条 progressBar: 0, clickTimer: null, // 屏幕宽高 winWidth: '', winHeight: '', popupGoodsList: [], showGoodsPopup: false, showReplyPopup: false, showSharePopup: false, } }, watch: { currentTab(val) { this.changeTabPanel(val) } }, computed:{ customBarMargin() { return `margin-top: ${this.customBarHeight}px` } }, created() { // 引入iconfont字体 // #ifdef APP-NVUE const domModule = weex.requireModule('dom') domModule.addRule('fontFace', { fontFamily: "nvueIcon", 'src': "url('/static/fonts/iconfont.ttf')" }); // #endif let wW = uni.getSystemInfoSync().windowWidth let wH = uni.getSystemInfoSync().windowHeight this.winWidth = `${wW}px` this.winHeight = `${wH}px` }, methods: { // 长按动态 handleDynamicMenu(e) { let points // #ifndef APP-NVUE points = [e.touches[0].clientX, e.touches[0].clientY] // #endif // #ifdef APP-NVUE points = [e.touches[0].screenX, e.touches[0].screenY] // #endif this.$refs.uapopup.open({ type: 'contextmenu', follow: points, btns: [ {text: '不感兴趣'}, {text: '复制'}, { text: '举报', style: 'color:#f00;', click: () => { this.$refs.uapopup.close() } }, ], }) }, /* ++++++++++ { 视频播放模块 } ++++++++++ */ getVideoCtx() { // return this.$refs['vdplayer' + this.currentVideo][0] return uni.createVideoContext('vdplayer'+ this.currentVideo, this) }, // 垂直滑动视频 handleSwipeVertical(e) { let index = e.detail.current this.progressBar = 0 this.isPlaying = false let video = this.getVideoCtx() if(!video) return video.pause() // 重新开始 video.seek(0) this.currentVideo = index // 自动播放 this.handlePlay() }, handlePlay() { let video = this.getVideoCtx() if(!video) return video.play() this.isPlaying = true }, handlePause() { let video = this.getVideoCtx() if(!video) return video.pause() this.isPlaying = false }, // 点击视频（单击/双击） handleVideoClicked() { this.clickTimer && clearTimeout(this.clickTimer) this.clickNum++ this.clickTimer = setTimeout(() => { if(this.clickNum >= 2) { console.log('你双击了') }else { console.log('你单击了') if(this.isPlaying) { this.handlePause() }else { this.handlePlay() } } this.clickNum = 0 }, 250) }, ... } }

另外，短视频底部有一条时间刻度进度条。

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

yeah，基于uniapp开发抖音短视频/直播聊天项目就分享到这里了。

【本文地址】

公司简介

联系我们