基於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
