摘要：基于跨端开发短视频直播聊天实例。全新研发的一款多端仿制抖音短视频直播聊天项目，基于等技术开发而成。播放进度变化时触发小视频支持播放暂停，上下滑动切换效果。
全新研发的一款多端仿制抖音短视频+直播+聊天项目，基于
uniApp+Vue.js+Vuex+Nvue+uViewUI+uaPopup等技术开发而成。支持播放/暂停/上下滑动切换、全屏沉浸式体验。
一款集成了小视频、直播、聊天及朋友圈于一体的跨设备uniapp应用。
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编写，Nvue页面不支持prototype方式挂载的函数。
所有使用了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 } }) }, onShow: function() { console.log("App Show") }, onHide: function() { console.log("App Hide") } }</script>项目中的顶部导航栏和底部菜单栏采用自定义组件实现功能。支持Nvue页面悬浮video上面、全屏沉浸式透明模式。
<template> <view class="ua__navbar"> <view class="ua__navbar-wrap" :class="{"custom": custom, "fixed": fixed || transparent}" :style="{"height": customBarH + "px", "padding-top": (custom ? statusBarH : 0) + "px", "background": bgcolor, "color": color, "z-index": zIndex}"> <!-- //左侧 (返回) --> <view class="action navbar-action__left" v-if="back && back!="false"" @click="onBack"> <template v-if="$slots.back"> <slot name="back" /> </template> <template v-else><text class="iconfont nvuefont" :style="{"color": color}">{{"/ue84c"}}</text></template> <slot name="backText" /> </view> <slot name="left" /> <!-- //标题 --> <view v-if="!search" class="navbar-title" :class="{"center": center}"> <template v-if="$slots.title"> <slot name="title" /> </template> <template v-else><text :style="{"color": color}">{{title}}</text></template> </view> <!-- //搜索框 --> <view v-if="search" class="action navbar-action__search"> <slot name="search" /> </view> <view class="action navbar-action__right"> <slot name="right" /> </view> </view> </view></template>目前两个插件已经上传至uniapp插件市场，感兴趣的可以去看下。
https://ext.dcloud.net.cn/plugin?id=5593
https://ext.dcloud.net.cn/plugin?id=5592
该插件是针对这个项目特意开发的一款多端弹窗插件，支持h5+小程序+App+Nvue端。
项目中所有的弹窗均是使用这个uaPopup组件实现功能，亲测效果非常OK。
使用非常简单，hbuilderx2.5起支持easycom自动引入，支持函数式+组件式两种方式调用。
<ua-popup v-model="isVisibleConfirm" shadeClose="false" title="标题" xclose z-index="1001" content="预测未来的最好办法是自己亲手创造未来！" :btns="[ {text: "取消", click: handleCancel}, {text: "确定", style: "color:#00aa00;", click: handleOk}, ]"/>函数式支持多级嵌套调用。
<script>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() { // ... } } ] }) } }) } }}</script>拥有20+自定义参数，多种弹窗类型及动画模式。
https://blog.csdn.net/yanxinyun1990/article/details/118633711
项目中的小视频及直播页面分为顶部导航区+视频区+底部菜单区三个大模块。
<view v-if="currentTab == 2" class="ua__tabcnt-recommend"> <swiper class="ua__vdplayer-swiper flex1" :current="currentVideo" vertical @change="handleSwipeVertical"> <swiper-item v-for="(item, index) in videoList" :key="index"> <!-- 视频模块 --> <view class="ua__vdplayer-video flex1"> <video class="vdplayer" :id=""vdplayer" + index" :ref=""vdplayer" + index" :src="item.src" :controls="false" :loop="true" :show-center-play-btn="false" object-fit="fill" :autoplay="index == currentVideo" @play="isPlaying=true" @timeupdate="handleTimeUpdate" :style="{"width": winWidth, "height": winHeight}" > </video> <view class="ua__vdplayer-playwrap" @click="handleVideoClicked"><view v-if="!isPlaying" class="ua__vdplayer-playbtn"><text class="iconfont">{{`/ue607`}}</text></view></view> </view> <!-- 信息模块 --> <view class="ua__vdplayer-info flexbox flex-col"> <view class="flexbox flex-row flex-alignb"> <!-- //左侧信息 --> <view class="vdinfo__left flex1"> <view class="ltitem uavatar flexbox flex-row"> <navigator url="#" class="flexbox flex-alignc flex-row"><image class="uimg" :src="item.avatar" /><text class="uname">{{item.author}}</text></navigator> <view class="flexbox btn" :class="{"actived": item.isFollow}" @click="handleFollow(index)"><text class="btn-text">{{item.isFollow ? "已关注" : "关注"}}</text></view> </view> <view v-if="item.topic" class="ltitem flexbox flex-row"> <view class="kw" v-for="(kw, index2) in item.topic" :key="index2"><text class="lbl">#{{kw}}</text></view> </view> <view class="ltitem"><text class="desc">{{item.desc}}</text></view> </view> <!-- //右侧按钮 --> <view class="vdinfo__right flexbox flex-col"> <view class="rtitem ball" v-if="item.goods&&item.goods.length > 0" @click="handleShowGoodsPopup(item.goods)"><text class="icon iconfont">{{`/ue734`}}</text></view> <view class="rtitem" :class="{"isliked": item.isLike}" @click="handleLiked(index)"><text class="icon iconfont">{{`/ue635`}}</text><text class="num">{{item.likeNum+(item.isLike ? 1 : 0)}}</text></view> <view class="rtitem" @click="showReplyPopup = true"><text class="icon iconfont">{{`/ue632`}}</text><text class="num">{{item.replyNum}}</text></view> <view class="rtitem" @click="showSharePopup = true"><text class="icon iconfont">{{`/ue63b`}}</text><text class="num">{{item.shareNum}}</text></view> </view> </view> </view> </swiper-item> </swiper> <!-- 底部播放进度条 --> <view class="ua__vdplayer-progress"><view class="bar" :style="{"width": progressBar+"px"}"></view></view></view>小视频底部还新增了一个时间播放进度条，显示当前视频播放进度。
// 播放进度变化时触发handleTimeUpdate(e) { let { currentTime, duration } = e.detail this.progressBar = parseInt((currentTime / duration).toFixed(2) * parseInt(this.winWidth))},小视频支持播放/暂停，上下滑动切换效果。
<script> 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() {
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/120037.html
摘要：奔跑的脚步不会停止，历时一个多月的打磨，版本正式发布，支持发行到平台。至此，实现了小程序主流四端全覆盖另外，自版本开始，正式开源传送门，欢迎大家鼓励。 多端泛滥、精力有限，是很多前端开发者每日的梦魇。 uni-app遵循Vue.js语法规范，一套代码，多端发行，切实解决了众多开发者的痛点； 故自8月份发布以来，已有上万名开发人员拥抱uni-app，目前已累计创建了数万个应用，活跃的开发...
摘要：实际开发效果最近做了一款，打包了安卓，微信小程序个平台，产出的效果都还是不错，总体还是比较满意。建议如果你现在想做一款跨平台的产品，而且有和微信小程序的经验，最重要的，你不想学习一门新语言，那么也许是你的一个选择。 前言 最近前端最火热的话题无法就是flutter,不管是刷哪个论坛，必定有探讨flutter的文章。没用过flutter，但是对于跨平台的技术，最近一直都在研究。 为什么是...
小视频app服务器租用一年多少钱?小视频凭借制作门槛低、生产流程简单、参与性强等特点，成为全民参与录制的传播方式，受到很多站长们的青睐。如果我们要运营小视频APP网站的话，我们该怎么选择合适的视频app服务器呢?小视频app服务器租用费用具体多少一年?说到视频网站、直播网站、下载站等，大家首先想到的就是大带宽服务器，那么视频类网站服务器究竟选择多大的带宽和配置才合适呢?怎么选择合适的短视频app...
摘要：一小视频程序开发疑惑短视频存储在哪在短视频软件中，用户头像短视频文件等文件数据上传的量是很大的，数据库无法全部承担，故而只有文字数据用户名等会被存储在数据库中，像短视频用户头像等内容会被存储在专门的区域，比如服务器磁盘或三方云存储上。不参与小视频app程序开发的小伙伴们可能会有这样的疑惑：当我们把短视频上传至小视频程序中，无论上传者以后在不在线，其他用户都能够及时查看到他发的小视频，这是为什...
摘要：一小视频程序开发疑惑短视频存储在哪在短视频软件中，用户头像短视频文件等文件数据上传的量是很大的，数据库无法全部承担，故而只有文字数据用户名等会被存储在数据库中，像短视频用户头像等内容会被存储在专门的区域，比如服务器磁盘或三方云存储上。不参与小视频app程序开发的小伙伴们可能会有这样的疑惑：当我们把短视频上传至小视频程序中，无论上传者以后在不在线，其他用户都能够及时查看到他发的小视频，这是为什...
阅读 1071·2021-11-24 09:39
阅读 2721·2021-09-22 10:02
阅读 1236·2021-09-07 09:59
阅读 3307·2019-08-30 15:54
阅读 2368·2019-08-30 11:00
阅读 2567·2019-08-29 15:06
阅读 2052·2019-08-26 13:52
阅读 301·2019-08-26 13:24
