首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Coding
V2EX  ›  程序员

vue+UniApp 仿抖音 App 小视频|uniapp 直播界面

  •  
  •   xiaoyan2017 · 32 天前 · 1112 次点击
    这是一个创建于 32 天前的主题,其中的信息可能已经有所发展或是发生改变。

    项目介绍

    Uni 直播 uniLiveShow 是基于 uni-app 开发的多端小视频 /聊天 /直播室实例项目,之前就有使用vue+uniapp 仿微信即时聊天,这次直播项目用到了 vue+Nvue+uniapp+vuex+swiper 等技术实现。并且小视频及直播页面均可类似抖音一样上下滑动切换,有播放、暂停、点赞、评论、商品等功能。

    多端预览图

    技术实现

    • 编辑器+技术:HBuilderX2.3.9 + vue/NVue/uniapp/vuex
    • iconfont 图标:阿里字体图标库
    • 自定义导航栏 + 底部 Tabbar
    • 弹窗组件:uniPop ( uni-app 封装自定义 Modal 弹窗)
    • 测试环境:H5 端 /微信小程序 /App 端 /真机
     /**
      * @tpl 	uniapp 主入口页面
      * @about 	Q:282310962  wx:xy190310
      */
    
    import Vue from 'vue'
    import App from './App'
    
    // >>>引入 css
    import './assets/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'
    Vue.component('header-bar', headerBar)
    Vue.component('tab-bar', tabBar)
    
    // >>>引入 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 聊天室 App|vue+uniapp 仿微信聊天界面|仿微信朋友圈

    uniapp 仿抖音实现

    uni-app+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>
        const videoJson = require('./mock-video.js')
        
        // 引入商品广告、评论
        import videoCart from '@/components/cp-video/cart.vue'
        import videoComment from '@/components/cp-video/comment'
        
        let timer = null
        export default {
            data() {
                return {
                    videoIndex: 0,
                    vlist: videoJson,
                    
                    isPlay: true,    //当前视频是否播放中
                    clickNum: 0,    //记录点击次数
                }
            },
            components: {
                videoCart, videoComment
            },
            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(this.$refs['myVideo' + i][0])
                        this.videoContextList.push(uni.createVideoContext('myVideo' + i, this));
                    }
                    
                    setTimeout(() => {
                        this.play(this.videoIndex)
                    }, 200)
                },
                
                // 滑动切换
                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)
                },
                
                
                // 喜欢
                handleIsLike(index){
                    let vlist = this.vlist
                    vlist[index].islike =! vlist[index].islike
                    this.vlist = vlist
                },
                // 显示评论
                handleVideoComment() {
                    this.$refs.videoComment.show()
                },
                
                // 显示购物车
                handleVideoCart(index) {
                    this.$refs.videoCart.show(index)
                },
            }
        }
    </script>
    

    如果在开发时遇到 video 不能覆盖的问题,可改 vue 页面为 nvue,不过需要注意 nvue 页面 css 写法。 最后分享个:react+react-redux 仿微信 web 版聊天|网页版聊天室

    作者:xiaoyan2017
    链接: https://juejin.im/post/5dc97bfef265da4d026271b5
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    5 回复  |  直到 2019-11-13 15:06:55 +08:00
        1
    yueshang1   31 天前
    差评,没有源码分享
        2
    yuwangG   31 天前
    差评,没有源码分享
        3
    misty8873   31 天前
    差评,没有源码分享
        4
    shede333   31 天前
    差评,没有源码分享
        5
    galikeoy   31 天前
    这 B 是个机器人吧
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1377 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 23ms · UTC 00:26 · PVG 08:26 · LAX 16:26 · JFK 19:26
    ♥ Do have faith in what you're doing.