Uni-liveshow直播室是一个基于vue+Nvue+uniapp技术开发的集仿制抖音小视频/App聊天/直播功能混合项目。可实现类似抖音上下滑动切换视频播放,支持编译到多端。
公共组件及样式引入:
/**
* @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()
获取顶部导航栏状态条高度,这里是为了自定义导航栏适配到不同的平台
<script>
import Vue from 'vue'
export default {
onLaunch: function() {
// console.log('App Launch')
uni.getSystemInfo({
success:function(e){
Vue.prototype.statusBar = e.statusBarHeight
// #ifndef MP
if(e.platform == 'android') {
Vue.prototype.customBar = e.statusBarHeight + 50
}else {
Vue.prototype.customBar = e.statusBarHeight + 45
}
// #endif
// #ifdef MP-WEIXIN
let custom = wx.getMenuButtonBoundingClientRect()
Vue.prototype.customBar = custom.bottom + custom.top - e.statusBarHeight
// #endif
// #ifdef MP-ALIPAY
Vue.prototype.customBar = e.statusBarHeight + e.titleBarHeight
// #endif
}
})
},
}
</script>
uniapp仿抖音实现
uniapp+swiper+nvue技术实现仿抖音界面上下滑动切换视频效果,并且有点赞、评论及商品等功能,可以单击、双击判断。
<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>
小视频数据是通过模拟mock实现的
/**
* @desc 小视频JSON数据
*/
module.exports = [
{
id: 1,
avator: '/static/uimg/u__chat_img1.jpg',
poster: '/static/placeholder/video-img4.jpg',
src: '/static/placeholder/video.mp4',
author: '猪猪佩奇',
subtitle: '稻城亚丁-人间绝美景色',
keyword: ['美好回忆', '旅游圣地'],
playNum: 3172,
likeNum: 2518,
replyNum: 292,
shareNum: 107,
islike: false,
attention: false,
cart: [
{
name: '同款冬枣',
image: '/static/placeholder/cart-img1.jpg',
price: 9.90
},
{
name: '10斤装爆甜冰糖心红富士',
image: '/static/placeholder/cart-img2.jpg',
price: 9.90
},
{
name: '红心猕猴桃 单果40-70克',
image: '/static/placeholder/cart-img3.jpg',
price: 10.0
}
]
},
{
id: 2,
avator: '/static/uimg/u__chat_img12.jpg',
poster: '/static/placeholder/video-img0.jpg',
src: 'https://txmov2.a.yximgs.com/bs2/newWatermark/MTg3NDYzOTY3MjM_zh_3.mp4',
author: 'Alisa',
subtitle: '不要在乎别人的流言蜚语',
keyword: ['经典老歌'],
playNum: 9432,
likeNum: 5627,
replyNum: 1285,
shareNum: 638,
islike: true,
attention: true,
cart: ''
},
{
id: 3,
avator: '/static/uimg/u__chat_img5.jpg',
poster: '/static/placeholder/video-img2.jpg',
src: 'https://txmov2.a.yximgs.com/bs2/newWatermark/MTY3NTU3MzYzMTQ_zh_4.mp4',
author: '往后余生都是你',
subtitle: '能不能给我一首歌的时间,让你拾起从前的快乐',
keyword: '',
playNum: 7268,
likeNum: 3438,
replyNum: 1105,
shareNum: 327,
islike: false,
attention: false,
cart: [
{
name: 'YCID施蒂蓝玫瑰凝养柔滑唇膏',
image: 'https://cbu01.alicdn.com/img/ibank/2019/218/182/12384281812_1493014487.jpg',
price: 7.70
},
{
name: '玛可安迪新款抖音网红推荐口红',
image: 'https://cbu01.alicdn.com/img/ibank/2019/285/249/10457942582_1068990292.jpg',
price: 19.9
},
]
},
...
]
<script>
let timer = null
export default {
methods: {
...
// 滑动切换
handleSlider(e) {
let curIndex = e.detail.current
if(this.videoIndex >= 0){
this.videoContextList[this.videoIndex].pause()
this.videoContextList[this.videoIndex].seek(0)
this.isPlay = false
}
if(curIndex === this.videoIndex + 1) {
this.videoContextList[this.videoIndex + 1].play()
this.isPlay = true
}else if(curIndex === this.videoIndex - 1) {
this.videoContextList[this.videoIndex - 1].play()
this.isPlay = true
}
this.videoIndex = curIndex
},
// 播放
play(index) {
this.videoContextList[index].play()
this.isPlay = true
},
// 暂停
pause(index) {
this.videoContextList[index].pause()
this.isPlay = false
},
// 点击视频事件
handleClicked(index) {
if(timer){
clearTimeout(timer)
}
this.clickNum++
timer = setTimeout(() => {
if(this.clickNum >= 2){
console.log('双击视频')
}else{
console.log('单击视频')
if(this.isPlay){
this.pause(index)
}else{
this.play(index)
}
}
this.clickNum = 0
}, 300)
},
...
}
}
</script>
另外在开发小视频页面过程中,遇到了视频video层级过高不能被其他组件覆盖,如是使用nvue页面就可以解决view覆盖在video之上。.nvue (native vue的缩写), 且在nvue页面中使用iconfont图标库需注意引入方式
beforeCreate() {
// 引入iconfont字体
// #ifdef APP-PLUS
const domModule = weex.requireModule('dom')
domModule.addRule('fontFace', {
fontFamily: "nvueIcon",
'src': "url('../../../static/fonts/iconfont.ttf')"
});
// #endif
},
到这里大体就介绍差不多了,后续会继续更新一些项目实例。💪💪
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。