uniapp仿抖音App界面|uni-app小视频

Uni-liveshow直播室是一个基于vue+Nvue+uniapp技术开发的集仿制抖音小视频/App聊天/直播功能混合项目。可实现类似抖音上下滑动切换视频播放,支持编译到多端。

效果展示:

技术栈:

  • 编辑器+技术:HBuilderX + vue/NVue/uniapp/vuex
  • iconfont图标:阿里字体图标库
  • 自定义导航栏 + 底部Tabbar
  • 弹窗组件:uniPop(uni-app封装自定义Modal弹窗)
  • 测试环境:H5端/小程序/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
},

到这里大体就介绍差不多了,后续会继续更新一些项目实例。💪💪

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

相关文章

来自专栏Java大联盟

新手福利,通过一个简单示例快速上手Spring Boot+Vue前后端分离

Vue + Element UI 并不是真正的前后端分离,它只有前端服务,并没有后端服务提供数据接口,很多小伙伴在后台留言希望楠哥能写一篇完整的 Spring ...

10020
来自专栏大前端开发

《Vue3.0抢先学》系列之:组件生命周期

在组件化的框架中,比如Angular、React或Vue,都为组件定义了生命周期这个概念,每个组件实例在被创建时都要经过一系列的初始化过程,例如:需要设置数据监...

8920
来自专栏大前端开发

《Vue3.0抢先学》系列之:网友们都惊呆了!

今天开始,我想给大家讲点新东西。大家不用大喊学不动,请放松心情随意观看,我也讲不出什么很深奥难学的东西,本系列文章都会是些比较浅显易懂的家常内容。

9920
来自专栏大前端开发

《Vue3.0抢先学》系列之:使用Composition API

在上一篇文章中,我们大致了解了如何使用Vue3.0编写一个简单的计数器程序。不过,正如熟悉Vue2.x的朋友所看到的,我们用Vue3.0实现出来的代码和Vue2...

17530
来自专栏大前端开发

《Vue3.0抢先学》系列之:一个简单的例子

书接上文:你被我撩拨了一下,从Github上下载了Vue3.0的源码。然后呢,你是不是已经迫不及待的想知道到底怎么样快速的把这个源代码用起来呢?

16720
来自专栏大前端开发

《Vue3.0抢先学》系列之:组件属性Props

组件,是封装和复用性的体现。封装,将尽量少的细节暴露给外界;复用,在保证整体功能的情况下通过一些方式提供灵活性、可变性。这些设计指导原则可以让我们在程序开发的过...

9010
来自专栏大前端开发

《Vue3.0抢先学》系列之:更多响应式API示例

这几天,我们陆续学习了解了关于Vue3.0的一些新特性,尤其是新的Composition API的用法。这套新的API中最重要、最核心的部分,恐怕就是实现响应式...

8020
来自专栏全栈工程师成长之路

前端开发学习-UI库MDB

目前我在工作之余,会对自己进行一些能力的提升和加强,除了对自己硬实力有提升的网课,我始终还是没有放弃自学前端开发,毕竟开发一个自己的个人网站,是我一直都想做的事...

8110
来自专栏大前端开发

《Vue3.0抢先学》系列之:响应式之Ref vs. Reactive

在上文中,我们使用Vue3.0最新的Composition API改写了由Options API写成的计数器示例。我们发现,原先的数据响应式监听的用法发生了变化...

10310
来自专栏大前端开发

《Vue3.0抢先学》系列之:使用render函数

还记得Vue2.x中组件的 render 方法么?我们除了可以用template来进行模板化的渲染输出,还可以用 render 方法进行编程式的渲染。模板有着看...

9710

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励