uni-app仿抖音APP短视频+直播+聊天实例|uniapp全屏滑动小视频+直播
基于uniapp+uView-ui跨端H5+小程序+APP短视频|直播项目uni-ttLive。
uni-ttLive一款全新基于uni-app技术开发的仿制抖音/快手短视频直播项目。支持全屏丝滑般上下滑动切换小视频，迷你时间进度条，Nvue解决视频层级显示，可编译兼容H5+小程序+APP端。
◆ 一览效果
编译至 [小程序+H5+App端] 效果如下
◆ 运用技术
编辑器：HbuilderX 3.1.21
框架技术：Uniapp+Vue.js+Nvue+Vuex
UI组件库：uView-ui^1.8.4
弹框组件：uaPopup1.1.0（基于uniapp封装多端弹框组件）
自定义组件：uaNavbar+uaTabbar组件
编译支持：小程序+H5+APP端
◆ 功能特性
经典的自定义dock凸起菜单
丝滑般的滑动体验
迷你小视频时间进度线
短视频可播放/暂停，第N个开始滑动
自定义naNavbar+uaPopup组件支持Nvue视频页
◆ 目录结构
◆ 多端Navbar+Tabbar组件
在components下新建ua-navbar和ua-tabbar组件。自HBuilderX 2.5.5起支持easycom组件模式，无需自动引入，即可使用。
<!-- 导航条模板 -->
<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://www.cnblogs.com/xiaoyan2017/p/14978408.html
◆ 自定义全端弹窗组件uaPopup
项目中使用到的弹窗均是ua-popup自定义组件实现效果。支持函数式+组件式混合调用。并且支持Nvue原生页面。
<ua-popup v-model="isVisibleConfirm" shadeClose="false" title="标题" xclose z-index="1001"
content="<div style='color:#ff557f;padding:20px 40px;'>预测未来的最好办法是自己亲手创造未来！</div>"
: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: '<div style="color:#aa007f">不要等待机会，而要创造机会</div>',
customStyle: {'width': '210px'},
btns: [
{
text: '关闭',
click() {
$ua.close()
}
},
{
text: '确定',
style: 'color:#00aa00;',
click() {
// ...
}
}
]
})
}
})
}
}
}
</script>
支持20+参数自定义配置，多种弹窗动画及弹窗类型。具体的介绍，可以参看之前的分享文章。
https://www.cnblogs.com/xiaoyan2017/p/14993445.html
◆ uniapp短视频效果
短视频页面分为顶部菜单+视频信息区+底部dock菜单三个模块。视频区使用swiper组件实现上下滑动切换。
<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>
顶部导航条及底部tabbar菜单支持全屏沉浸式，并且视频底侧显示Mini播放进度条。
// 播放进度变化时触发
handleTimeUpdate(e) {
let { currentTime, duration } = e.detail this.progressBar = parseInt((currentTime / duration).toFixed(2) * parseInt(this.winWidth))
},
uniapp小视频暂停/播放、上下滑动切换、单击/双击判断等操作。
<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() {
// 引入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)
}, ...
}
}
</script>
◆ uniapp直播效果
为了解决video层级高的问题，直播和小视频页面均是全屏沉浸式Nvue语法编码开发。并且项目中的uaNavbar+uaTabbar+uaPopup自定义组件兼容支持Nvue页面。
<!-- 直播页面模板 -->
<template>
<view class="ua__container flexbox flex1 flex-col">
<view class="ua__scrollview flex1">
<view class="ua__vdplayer-wrapls flex1">
<swiper class="ua__vdplayer-swiper flex1" :current="currentVideo" vertical @change="handleSwipeVertical">
<swiper-item v-for="(item, index) in liveList.list" :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"
:style="{'width': winWidth, 'height': winHeight}"
>
</video>
</view> <!-- //顶部导航条 -->
<view class="ua__vdplayer-navbar">
<ua-navbar :back="false" custom bgcolor="transparent">
...
</ua-navbar>
</view> <view class="ua__vdplayer-toplevel flexbox flex-row" :style="customBarMargin">
...
</view> <!-- 底部信息模块 -->
<view class="ua__liveplayer-ftinfo flexbox flex-col">
<!-- 送礼物gif -->
<view v-if="gifGiftData" class="lvplayer__giftips flexbox flex-row flex-alignc">
...
</view>
<!-- 滚动聊天消息 -->
<scroll-view class="lvplayer__chatinfo" scroll-y show-scrollbar="false">
<block v-for="(msg, index2) in item.message" :key="index2">
<view v-if="msg.type == 'notice'" class="row"><view class="item"><text class="text notice">{{msg.content}}</text></view></view>
<view v-else class="row"><view class="item"><text class="user">{{msg.user}}</text><text class="text">{{msg.content}}</text></view></view>
</block>
</scroll-view>
<!-- 底部toolbar -->
<view class="lvplayer__footbar">
<view class="lvplayer__footbar-editor flexbox flex-row">
<input class="editor flex1" placeholder="聊点什么..." placeholder-style="color: #eee;" disabled @click="handleReplyPopup(item.message)" />
<view class="btns flexbox flex-row">
...
</view>
</view>
</view>
</view>
</swiper-item>
</swiper>
</view>
</view> <!-- //函数式弹框 -->
<ua-popup ref="uapopup" /> <!-- 商品弹框 -->
<ua-popup v-model="showGoodsPopup" title="商品" position="bottom" round>
<scroll-view class="popup__goodslist" scroll-y="true">
<view v-for="(item,index) in popupGoodsList" :key="index" class="gitem flexbox flex-row">
<image class="gpic" :src="item.pic" />
<view class="ginfo flex1">
<text class="title">{{item.name}}</text><text class="price">￥{{item.price}}</text>
</view>
<view class="gbtn"><text class="gbtn-text">去购买</text></view>
</view>
</scroll-view>
</ua-popup> <!-- 评论弹框 -->
<ua-popup v-model="showReplyPopup" position="bottom" :customStyle="{'background-color': 'transparent'}" @close="closeReplyPopup">
<scroll-view class="popup__chatwrap">
...
</scroll-view>
</ua-popup> <!-- 送礼物弹框 -->
<ua-popup v-model="showGiftPopup" position="bottom" round :customStyle="{'background-color': '#21252b'}">
<scroll-view class="popup__giftlist">
...
</scroll-view>
</ua-popup>
</view>
</template>
ok，以上就是uniapp开发短视频/直播的一些分享，希望对大家有些许帮助。
最后附上两个最近项目实例
Electron13+Vue3仿Mac桌面：https://www.cnblogs.com/xiaoyan2017/p/14926338.html
Vite2.x+Electron后台管理系统：https://www.cnblogs.com/xiaoyan2017/p/14727973.html
uni-app仿抖音APP短视频+直播+聊天实例|uniapp全屏滑动小视频+直播的更多相关文章
- 关于个人项目（臻美MV【仿抖音App】）滑动切换视频的分析（前端角度）
我们知道你天天刷抖音的时候可以上滑切换视频,互不影响.那么我们站在前端的角度能否可以实现这种效果呢?这是我的个人项目:臻美MV 下面我是用Vue写的,现在我把它开源. Vue: 初始界面 <te ...
- Vue3.0短视频+直播|vue3+vite2+vant3仿抖音界面|vue3.x小视频实例
基于vue3.0构建移动端仿抖音/快手短视频+直播实战项目Vue3-DouYin. 5G时代已来,短视频也越来越成为新一代年轻人的娱乐方式,在这个特殊之年,又将再一次成为新年俗! 基于vue3.x+v ...
- 10分钟快速上车短视频风口：基于uniapp框架创建自己的仿抖音短视APP
在今年也就是第48次发布的<中国互联网络发展状况统计报告>有这样一个数据,21年的上半年以来,我国我国网民规模达10.11亿,其中短视频用户达8.88亿.碎片化的生活场景下,短视频成为人们 ...
- iOS多种刷新样式、音乐播放器、仿抖音视频、旅游App等源码
iOS精选源码 企业级开源项目,模仿艺龙旅行App 3D立体相册,可以旋转的立方体 横竖屏切换工具,使用陀螺仪检测手机设备方向,锁屏状... Swift版Refresh(可以自定义多种样式)架构方面有 ...
- Vite2+Electron仿抖音|vite2.x+electron12+vant3短视频|直播|聊天
整合vite2+electron12跨平台仿抖音电脑版实战Vite2-ElectronDouYin. 基于vite2.0+electron12+vant3+swiper6+v3popup等技术跨端仿制 ...
- 使用python爬虫,批量爬取抖音app视频（requests+Fiddler+appium）
抖音很火,楼主使用python随机爬取抖音视频,并且无水印下载,人家都说天下没有爬不到的数据,so,楼主决定试试水,纯属技术爱好,分享给大家.. 1.楼主首先使用Fiddler4来抓取手机抖音app这 ...
- from appium import webdriver 使用python爬虫,批量爬取抖音app视频（requests+Fiddler+appium）
使用python爬虫,批量爬取抖音app视频(requests+Fiddler+appium) - 北平吴彦祖 - 博客园 https://www.cnblogs.com/stevenshushu/p ...
- Python 爬虫——抖音App视频抓包
APP抓包 前面我们了解了一些关于 Python 爬虫的知识,不过都是基于 PC 端浏览器网页中的内容进行爬取.现在手机 App 用的越来越多,而且很多也没有网页端,比如抖音就没有网页版,那么上面的视 ...
- 教你用python爬取抖音app视频
记录一下如何用python爬取app数据,本文以爬取抖音视频app为例. 编程工具:pycharm app抓包工具:mitmproxy app自动化工具:appium 运行环境:windows10 思 ...
随机推荐
- 【笔记】numpy.array的常用基本运算以及对数据的操作
numpy.array的基本运算以及对数据的操作 设置一个问题,例如 这种只需要基本的运算就可以实现 类似的 numpy对向量的运算进行了优化,速度是相当快的,这种被称为universal funct ...
- iOS开发之Video转GIF
前言 最近遇到需要将video转化为gif的问题,网上找的在线转换限制太多,索性就自己写了一个工具APP.文章末尾有开源代码和打包好的APP,如有需要请自行下载. 效果图 核心代码 来源 class ...
- C++ 基于STL的演讲比赛流程管理系统(sort算法+小型算法(accumulate)+内建函数对象+string字符串拼接+字符串截取+多个容器基础操作+与用户交互+文件的读写+保存+重建+整体文件数据的清空)
1 /* 2 比赛规则: 3 学校举行一演讲比赛,共12个人参加,比赛两轮,第一轮为淘汰赛 第二轮为决赛 4 每名选手都有对应的编号:如10001~10012 5 比赛方式:分组比赛 每组6人 6 第 ...
- Git（12）-- Git 分支 - 分支简介
@ 目录 1.分支简介 1.1.初始化并首次提交 首次提交对象及其树结构: git 的 cat-file 的命令用法: 1.2.修改并第二次提交 第二次提交对象及其树结构: 1.3.修改并第三次提交 ...
- noip33
T1 第一个猎人死的轮数等于在1号猎人之前死的猎人数+1,如果当前这个人没死,那么他死在一号猎人之前的概率为 \(\frac{w_{i}}{w_{1}+w_{i}}\),因为每死一个就会造成1的贡献, ...
- 题解 Strange Housing
传送门 首先想了黑白染色,发现不会染 其实可以考虑如何动态地维护出这个点集 发现题面里对不在点集之中的点之间的连边没有要求 所以考虑不断向图中加点,为了满足要求,每次取一个与当前新图中相连的点 若它与 ...
- 【SpringMVC】SpringMVC搭建框架
开发环境 IDE:idea 2019.3.2 构建工具:maven3.5.4 服务器:tomcat 9.0.30 Spring版本:5.3.1 创建maven工程 添加打包方式:war 引入依赖 &l ...
- 微信小程序中h5跳转到登录页面，登陆成功返回携带参数，h5刷新
公司的一个小程序,要做一个活动,需要判断登录状态. 思路:h5跳转到登录页面,登陆成功携带token自动返回. 本来以为是个非常简单的功能,没想到..... 发帖记录一下 1.登录页面 用getCur ...
- WPF 中的 路由事件
public class ReportTimeEventArgs:RoutedEventArgs { public ReportTimeEventArgs(RoutedEvent routedEven ...
- 解析一个HTML字符串
存在问题 来自用户输入,一个文件或一个网站的HTML字符串,你可能需要对它进行解析并取其内容,或校验其格式是否完整,或想修改它.怎么办?jsonu能够帮你轻松解决这些问题 解决方法 使用静态Jsoup ...