uni-app直播实例|仿抖音小视频|uniapp仿陌陌直播

优直播uni-liveShow是基于vue+uni-app+vuex+nvue+swiper等技术开发仿制抖音|火山小视频/陌陌直播实战项目，支持编译到三端(H5、小程序、App端) 且兼容效果一致。

使用技术

编码器+技术：HBuilderX + vue/NVue/uniapp/vuex
iconfont图标：阿里字体图标库
自定义导航栏 + 底部Tabbar
弹窗组件：uniPop（uni-app封装自定义弹出窗）
测试环境：H5端 + 小程序 + App端

◆ uniapp透明导航栏

顶部导航栏采用的是自定义模式，可设置透明背景(如：个人主页/朋友圈动态) 具体可参看这篇文章：uni-app自定义导航栏按钮|uniapp仿微信顶部导航条

 /*** @desc     uni-app主入口页面* @about   Q：282310962  wx：xy190310*/import Vue from 'vue'
import App from './App'// ***引入css
import './static/fonts/iconfont.css'
import './assets/css/reset.css'
import './assets/css/layout.css'// ***引入状态管理
import store from './store'
Vue.prototype.$store = store// ***引入公共组件
import headerBar from './components/header/header.vue'
import tabBar from './components/tabbar/tabbar.vue'
import popupWindow from './components/popupWindow.vue'
Vue.component('header-bar', headerBar)
Vue.component('tab-bar', tabBar)
Vue.component('popup-window', popupWindow)// ***引入自定义弹窗组件uniPop
import uniPop from './components/uniPop/uniPop.vue'
Vue.component('uni-pop', uniPop)Vue.config.productionTip = false
App.mpType = 'app'const app = new Vue({...App
})
app.$mount()

◆ uniapp实现抖音小视频界面

项目中小视频界面功能效果类似抖音/火山小视频，使用swiper组件实现上下滑动切换视频播放。

<swiper :indicator-dots="false" :duration="200" :vertical="true" :current="videoIndex" @change="handleSlider" style="height: 100%;"><block v-for="(item,index) in vlist" :key="index"><swiper-item><view class="uni_vdplayer"><video :id="'myVideo' + index" :ref="'myVideo' + index" class="player-video" :src="item.src" :controls="false" :loop="true" :show-center-play-btn="false" objectFit="fill"></video><!-- 中间播放按钮 --><view class="vd-cover flexbox" @click="handleClicked(index)"><text v-if="!isPlay" class="iconfont icon-bofang"></text></view><!-- 底部信息 --><view class="vd-footToolbar flexbox flex_alignb"><view class="vd-info flex1"><view class="item at"><view class="kw" v-for="(kwItem,kwIndex) in item.keyword" :key="kwIndex"><text class="bold fs_18 mr_5">＃</text> {{kwItem}}</view></view><view class="item subtext">{{item.subtitle}}</view><view class="item uinfo flexbox flex_alignc"><image class="avator" :src="item.avator" mode="aspectFill" /><text class="name">{{item.author}}</text> <text class="btn-attention bg_linear1" :class="item.attention ? 'on' : ''" @tap="handleAttention(index)">{{item.attention ? '已关注' : '关注'}}</text></view><view class="item reply" @tap="handleVideoComment"><text class="iconfont icon-pinglun mr_5"></text> 写评论...</view></view><view class="vd-sidebar"><view v-if="item.cart" class="ls cart flexbox bg_linear3" @tap="handleVideoCart(index)"><text class="iconfont icon-cart"></text></view><view class="ls" @tap="handleIsLike(index)"><text class="iconfont icon-like" :class="item.islike ? 'like' : ''"></text><text class="num">{{ item.likeNum+(item.islike ? 1: 0) }}</text></view><view class="ls" @tap="handleVideoComment"><text class="iconfont icon-liuyan"></text><text class="num">{{item.replyNum}}</text></view><view class="ls"><text class="iconfont icon-share"></text><text class="num">{{item.shareNum}}</text></view></view></view></view></swiper-item></block>
</swiper>

视频video不能覆盖的问题，使用nvue页面就可以解决view覆盖在video之上，更多关于nvue页面开发，可以参看：uniapp开发nvue页面

项目中的聊天页面，功能效果这里就不详细介绍了，可参看这篇：uni-app聊天室|vue+uniapp仿微信聊天实例

◆ uniapp仿陌陌直播页面

解决video不能覆盖问题，直播页面采用的是nvue编写

<template><div class="nlv__container"><view class="nlv_main"><swiper class="nlv-swiper" :indicator-dots="false" :vertical="false" :current="videoIndex" @change="handleSlider"><swiper-item v-for="(item, index) in vlist" :key="index"><!-- //直播区 --><view class="nlv-playerbox"><video :id="'myVideo' + index" :ref="'myVideo' + index" class="player-video" :src="item.src" :autoplay="index == videoIndex":controls="false" :loop="true" :show-center-play-btn="false" objectFit="fill" :style="{height: winHeight, width: winWidth}"></video><!-- //顶部 --><view class="nlv_topbar" :style="{ height: headerBarH, 'padding-top': statusBarH }">...</view><!-- //排名信息 --><view class="nlv-rankbox" :style="{top: headerBarH}"><view class="nlv-rkls"><text class="rkitem">总排名{{item.allRank}}</text><text v-if="item.hourRank" class="rkitem">小时榜第{{item.hourRank}}名</text></view><text class="nlv-uid">U直播:{{item.uid}}</text></view><!-- 底部信息栏 --><view class="nlv-footToolbar"><!-- 送礼物提示 -->...<!-- 滚动msg信息 --><scroll-view class="nlv-rollMsgPanel" scroll-y show-scrollbar="false"><block v-for="(msgitem, msgidx) in item.rollmsg" :key="msgidx"><view class="nlv-msglist"><view class="msg_bg"><text class="msg_name">{{msgitem.uname}}</text> <text class="msg_text">{{msgitem.content}}</text></view></view></block></scroll-view><view class="nlv-infobox"><view class="nlv_reply" @tap="handleRollMsg(index)"><text class="nlv_reply_text">说点什么...</text></view><view class="nlv_btntool"><view class="btn-toolitem"><text class="iconfont i-btntool"></text></view><view v-if="item.cart" class="btn-toolitem" @tap="handleLiveCart(index)"><text class="iconfont i-btntool" style="color: #ff4e0e;font-size: 20px;"></text></view><view class="btn-toolitem btn-toolitem-cart" @tap="handleLiveGift"><text class="iconfont i-btntool"></text></view><view class="btn-toolitem"><text class="iconfont i-btntool"></text></view><view class="btn-toolitem"><text class="iconfont i-btntool"></text></view></view></view></view></view></swiper-item></swiper></view><!-- 商品广告、滚动消息、礼物 -->...</div>
</template><script>// 引入视频数据const liveJson = require('../mock-live.js')// 引入商品广告、滚动消息json、礼物import liveCart from './cp-live/cart.vue'import rollMsg from './cp-live/rollmsg'import liveGift from './cp-live/gift'let timer = nullexport default {data() {return {statusBarH: '',headerBarH: '',winHeight: '',winWidth: '',videoIndex: 0,vlist: liveJson,clickNum: 0,  //记录点击次数}},components: {liveCart, rollMsg, liveGift},beforeCreate() {// 引入iconfont字体// #ifdef APP-PLUSconst domModule = weex.requireModule('dom')domModule.addRule('fontFace', {fontFamily: "nvueIcon",'src': "url('../../../static/fonts/iconfont.ttf')"});// #endif},created() {// 获取设备宽、高、状态栏高度let _sH = uni.getSystemInfoSync().statusBarHeightlet _hH = _sH + 50let _wH = uni.getSystemInfoSync().windowHeightlet _wW = uni.getSystemInfoSync().windowWidththis.statusBarH = `${_sH}px`this.headerBarH = `${_hH}px`this.winHeight = `${_wH}px`this.winWidth = `${_wW}px`},onLoad(option) {// 获取列表页索引this.videoIndex = parseInt(option.index)},onReady() {this.init()},methods: {init() {this.videoContextList = []for(var i = 0; i < this.vlist.length; i++) {// this.videoContextList.push(uni.createVideoContext('myVideo' + i, this))// #ifdef APP-PLUS-NVUEthis.videoContextList.push(this.$refs['myVideo' + i][0])// #endif// #ifndef APP-PLUSthis.videoContextList.push(uni.createVideoContext('myVideo' + i, this))// #endif}},// >>> 【视频播放处理模块】-------------------------------------// 滑动切换handleSlider(e) {let curIndex = e.detail.currentif(this.videoIndex >= 0){this.videoContextList[this.videoIndex].pause()this.videoContextList[this.videoIndex].seek(0)}if(curIndex === this.videoIndex + 1) {console.log('向左滑动')this.videoContextList[this.videoIndex + 1].play()}else if(curIndex === this.videoIndex - 1) {console.log('向右滑动')this.videoContextList[this.videoIndex - 1].play()}this.videoIndex = curIndex},// 播放play(index) {this.videoContextList[index].play()},// 暂停pause(index) {this.videoContextList[index].pause()},...}}
</script>

至此，基于uniapp+vue直播项目就介绍这么多了，希望能够喜欢！！

◆ 最后附上react、RN项目实战案例

RN仿微信聊天室：https://blog.csdn.net/yanxinyun1990/article/details/100573360

react+redux网页版聊天实例：https://blog.csdn.net/yanxinyun1990/article/details/94143575

uni-app直播实例|仿抖音小视频|uniapp仿陌陌直播相关推荐

android 仿抖音编辑视频,Android 仿抖音之使用OpenGL实现抖音视频录制
前言在之前写了仿抖音的第一步,就是使用OpenGL显示摄像头数据,今天这篇就是在之前的基础上来录制视频,并且对之前的代码的结构进行了简单的整理,然后进行了仿抖音的视频录制. 工程结构整理在仿抖音的 ...
基于Uni-APP多端「h5+小程序+App」高仿抖音小视频|直播|聊天实例
uni-ttLive 基于uni-app+uView-ui跨端开发短视频+直播聊天实例. 全新研发的一款多端仿制抖音短视频+直播+聊天项目,基于uniApp+Vue.js+Vuex+Nvue+uVie ...
FastDFS布式文件系统仿抖音小视频实现
目录 1.小视频功能说明 2.技术方案 3.FastDFS 3.1.FastDFS是什么? 3.2.工作原理 3.3.文件的上传 3.4.文件的下载 4.FastDFS环境搭建 4.1.搭建服务 4. ...
基于android的防抖音直播,uniapp 仿火山 / 抖音短视频|uni-App+vue 直播实例
项目简介 U直播是一个基于uniapp+vue+nvue+vuex等技术实现的小视频/直播界面/聊天等功能的跨端项目,分别仿制了抖音小视频.陌陌直播界面功能,可实现上下滑动切换播放.暂停,评论.商品等 ...
上车短视频赛道：基于uniapp框架快速搭建自己的仿抖音短视频APP
在今年也就是第48次发布的<中国互联网络发展状况统计报告>有这样一个数据,21年的上半年以来,我国我国网民规模达10.11亿,其中短视频用户达8.88亿.碎片化的生活场景下,短视频成为人们 ...
短视频源码仿抖音短视频APP源码短视频平台源码短视频源码
[WoShop仿抖音短视频源码的主要功能] 1.短视频带货:关联商品的短视频封面会有商品标识,短视频内容中会弹出商品链接 2.直播带货:短视频源码支持直播功能,直播间内可开启带货功能 3.邀请赚钱:用 ...
整合vite2.0+electron12+vant3.x跨端仿抖音短视频+聊天+直播exe应用
vite2-electron-douyin 基于vite2.x+electron模仿抖音短视频应用实例. 整合了vite2+electron跨端开发技术仿制抖音界面桌面版exe应用软件.基于Vite2 ...
仿抖音短视频APP源码如何开发抖音类似特效
仿抖音短视频APP源码如何开发抖音类似特效 1.特效概览特效列表特效列表 2.『灵魂出窍』抖音的实现效果如下: 灵魂出窍我的实现效果如下: ezgif.com-rotate.gif 代码实现 ...
如何开发仿抖音短视频APP源码？
如何开发仿抖音短视频APP源码? 流程列表开发一个短视频最主要的流程分为 3 个,下面我将分步教你实现这 3 个流程下的各个功能点,功能点 API 可按需调用: 视频拍摄 a.启动拍摄 b.给拍摄添 ...

uni-app直播实例|仿抖音小视频|uniapp仿陌陌直播

使用技术

uni-app直播实例|仿抖音小视频|uniapp仿陌陌直播相关推荐

最新文章

热门文章