基于vue3.0+vant3.x短视频+直播+聊天模板

前段时间有给大家分享一个vue3移动端聊天项目,今天分享最新开发的vue3.0仿抖音实战项目。

Vue3Douyin 基于vite2构建工具搭建的一款vue3实例,使用了vue3.0.5+vuex+vue-router+vant3.x+v3popup等技术开发编码的一款移动端仿制抖音短视频|微信直播界面项目。

 

 

vue3.0-douyin 支持滑动切换视频、评论/点赞/分享、链接查看/小商品等功能。

 

使用技术

编辑器:VScode/Sublime3

使用技术:Vue3.x+Vuex4.x+Vue-Router4

组件库:Vant^3.0.4 (有赞移动端vue3组件库)

弹层组件:V3Popup(基于vue3自定义弹层组件)

字体图标:阿里iconfont图标库

导航栏+标签栏:基于vue3自定义navbar/tabbar组件

 

项目结构

项目的目录结构如下,非常清晰的分层结构。

 

 

 

 

 

 

 

 

 

 

vue3自定义手机端弹框

项目中的各种弹框效果,均是使用vue3自定义组件来实现。

之前有过一篇这方面的分享文章,感兴趣的可以去看看哈。

vue3系列:vue3.0自定义弹框组件V3Popup|vue3.x手机端弹框组件

 

vite.config.js项目配置

import vue from '@vitejs/plugin-vue'

import path from 'path'

/**
 * @type {import('vite').UserConfig}
 */
export default {
  plugins: [vue()],

  build: {
    // 基本目录
    // base: '/',

    /**
     * 输出文件目录
     * @default dist(默认)
     */
    // outDir: 'target',
  },

  // 环境配置
  server: {
    // 自定义接口
    port: 3000,

    // 是否自动浏览器打开
    open: false,

    // 是否开启https
    https: false,

    // 服务端渲染
    ssr: false,

    // 代理配置
    proxy: {
        // ...
    }
  },

  // 设置路径别名
  alias: {
    '@': path.resolve(__dirname, './src'),
    '@components': path.resolve(__dirname, './src/components'),
    '@views': path.resolve(__dirname, './src/views')
  }
}

 

vue3全局引入公共组件

新建plugins.js插件文件,用来引入一些常用的公共组件。

/**
 * 引入公共组件
 */

// 引入Vant3.x组件库
import Vant from 'vant'
import 'vant/lib/index.css'

// 引入Vue3.x移动端弹层组件
import V3Popup from '@components/v3popup'

import NavBar from '@components/navBar.vue'
import TabBar from '@components/tabBar.vue'

import Utils from './utils'
import Storage from './storage'

const Plugins = (app) => {
    app.use(Vant)
    app.use(V3Popup)

    // 注册公用组件
    app.component('navbar', NavBar)
    app.component('tabbar', TabBar)

    app.provide('utils', Utils)
    app.provide('storage', Storage)
}

 

vue3小视频/直播模板

项目中的小视频及直播模板使用了swipe来实现轮播滑动效果。

整体分为顶部导航/视频展示区/工具栏三大模块。

<template>
    <div class="bg-161823">
        <!-- >>顶部NavBar -->
        <navbar :back="false" bgcolor="transparent" transparent>
            <template v-slot:title>
                ...
            </template>
            <template v-slot:right><div><i class="iconfont icon-search"></i></div></template>
        </navbar>

        <!-- >>主面板 -->
        <div class="vui__scrollview flex1">
            <div class="vui__swipeview">
                <!-- ///滑动切换区 -->
                <van-swipe ref="swipeHorizontalRef" :show-indicators="false" :loop="false" @change="handleSwipeHorizontal">
                    <van-swipe-item v-for="(item,index) in videoLs" :key="index">
                        <template v-if="item.category == 'nearby'">
                            <div class="swipe__nearLs">
                                ...
                            </div>
                        </template>
                        <template v-if="item.category == 'recommend' || item.category == 'follow'">
                            <van-swipe vertical lazy-render :show-indicators="false" :loop="false" @change="handleSwipeVertical">
                                <van-swipe-item v-for="(item2, index2) in item.list" :key="index2">
                                    <!-- ///视频模块 -->
                                    <div class="swipe__video">
                                        <video class="vdplayer" :id="'vd-'+index+'-'+index2" loop preload="auto"
                                            :src="item2.src"
                                            :poster="item2.poster"
                                            webkit-playsinline="true" 
                                            x5-video-player-type="h5-page"
                                            x5-video-player-fullscreen="true"
                                            playsinline
                                            @click="handleVideoClicked"
                                        >
                                        </video>
                                        <span v-show="!isPlay" class="btn__play" @click="handleVideoClicked"><i class="iconfont icon-bofang"></i></span>
                                    </div>
                                    <!-- ///信息模块 -->
                                    <div class="swipe__vdinfo flexbox flex-col">
                                        <div class="flexbox flex-alignb">
                                            <!-- ///底部信息栏 -->
                                            <div class="swipe__footbar flex1">
                                                <div v-if="item2.ads" class="item swipe__superlk ads" @click="handleOpenLink(item2)">
                                                    <i class="iconfont icon-copylink fs-28"></i>查看详情<i class="iconfont icon-arrR fs-24"></i>
                                                </div>
                                                <div v-if="item2.collectionLs&&item2.collectionLs.length>0" class="item swipe__superlk">
                                                    <i class="iconfont icon-copylink fs-24 mr-10"></i><div class="flex1">合集《小鬼当家》主演花絮</div><i class="iconfont icon-arrR fs-24"></i>
                                                </div>
                                                <div class="item uinfo flexbox flex-alignc">
                                                    <router-link to="/friend/uhome"><img class="avatar" :src="item2.avatar" /></router-link>
                                                    <router-link to="/friend/uhome"><em class="name">{{item2.author}}</em></router-link>
                                                    <button class="btn vui__btn vui__btn-primary" :class="item2.isFollow ? 'isfollow' : ''" @click="handleIsFollow(item.category, index2)">{{item2.isFollow ? '已关注' : '关注'}}</button>
                                                </div>
                                                <div class="item at">@{{item2.author}}</div>
                                                <div v-if="item2.topic" class="item kw"><em v-for="(kw,idx) in item2.topic" :key="idx">#{{kw}}</em></div>
                                                <div class="item desc">{{item2.desc}}</div>
                                            </div>
                                            <!-- ///右侧工具栏 -->
                                            <div class="swipe__toolbar">
                                                ...
                                            </div>
                                        </div>
                                    </div>
                                </van-swipe-item>
                            </van-swipe>
                        </template>
                    </van-swipe-item>
                </van-swipe>
                <!-- ///底部进度条 -->
                <div class="swipe__progress"><i class="bar" :style="{'width': vdProgress+'%'}"></i></div>
            </div>
        </div>

        <!-- >>底部TabBar -->
        <tabbar
            bgcolor="linear-gradient(to bottom, transparent, rgba(0,0,0,.6))"
            color="rgba(255,255,255,.6)"
            activeColor="#fff" 
            fixed
        />


        <!-- ……商品模板 -->
        <v3-popup v-model="isShowGoodsPopup" position="bottom" round xclose title="热销商品" @end="handlePopStateClose" opacity=".2">
            <div v-if="goodsLs" class="wrap_goodsList">
                ...
            </div>
        </v3-popup>

        <!-- ……评论列表模板 -->
        <v3-popup v-model="isShowReplyPopup" position="bottom" round xclose opacity=".2">
            <div class="nt__commentWrap">
                <!-- 评论列表 -->
                ...
            </div>
        </v3-popup>
        <!-- ……评论编辑器模板 -->
        <v3-popup v-model="isShowReplyEditor" position="bottom" opacity=".2">
            <div class="vui__footTool nt__commentWrap">
                ...
            </div>
        </v3-popup>

        <!-- ……分享模板 -->
        <v3-popup v-model="isShowSharePopup" anim="footer" type="actionsheet" round xclose opacity=".2"
            title="<div style='text-align:left;'>分享至</div>"
            :btns="[
                {text: '取消', style: 'color:#999;', click: () => isShowSharePopup=false},
            ]"
        >
            ...
        </v3-popup>
    </div>
</template>

<script>
/**
 * @Desc     vue3+vant3实现短视频/直播功能
 * @Time     andy by 2021-02
 */
import { onMounted, onUnmounted, ref, reactive, toRefs, inject, nextTick } from 'vue'

import CmtEditor from '@components/cmtEditor.vue'

import videoJSON from '@/mock/videolist.js'
import emojJSON from '@/mock/cmt-emoj.js'

export default {
    components: {
        CmtEditor,
    },
    setup() {
        // 定时器
        const vdTimer = ref(null)
        const tapTimer = ref(null)
        const swipeHorizontalRef = ref(null)

        const editorRef = ref(null)

        const v3popup = inject('v3popup')

        const data = reactive({
            // ...
        })

        onMounted(() => {
            swipeHorizontalRef.value.swipeTo(data.activeNav, {immediate: true})

            // ...
        })

        // ...

        // 垂直切换页面事件
        const handleSwipeVertical = (index) => {
            if(data.activeNav == 0) {
                // 附近页
                data.activeOneIdx = index
            }else if(data.activeNav == 1) {
                // 关注页
                data.activeTwoIdx = index
                // console.log('关注页索引:' + index)
            }else if(data.activeNav == 2) {
                // 推荐页
                data.activeThreeIdx = index
                // console.log('推荐页索引:' + index)
            }

            vdTimer.value && clearInterval(vdTimer.value)
            data.vdProgress = 0
            data.isPlay = false
            let video = getVideoContext()
            if(!video) return
            video.pause()
            // 重新开始
            video.currentTime = 0

            data.activeSwipeIndex = index

            // 自动播放下一个
            handlePlay()
        }

        // 播放
        const handlePlay = () => {
            console.log('播放视频...')

            let video = getVideoContext()
            if(!video) return
            video.play()
            data.isPlay = true

            // 设置进度条
            vdTimer.value = setInterval(() => {
                handleProgress()
            }, 16)
        }

        // 暂停
        const handlePause = () => {
            console.log('暂停视频...')

            let video = getVideoContext()
            if(!video) return
            video.pause()
            data.isPlay = false
            vdTimer.value && clearInterval(vdTimer.value)
        }

        // 视频点击事件(判断单/双击)
        const handleVideoClicked = () => {
            console.log('触发视频点击事件...')

            tapTimer.value && clearTimeout(tapTimer.value)
            data.clickNum++
            tapTimer.value = setTimeout(() => {
                if(data.clickNum >= 2) {
                    console.log('双击事件')
                }else {
                    console.log('单击事件')
                    if(data.isPlay) {
                        handlePause()
                    }else {
                        handlePlay()
                    }
                }
                data.clickNum = 0
            }, 300)
        }

        // 播放进度条
        const handleProgress = () => {
            let video = getVideoContext()
            if(!video) return
            let curTime = video.currentTime.toFixed(1)
            let duration = video.duration.toFixed(1)
            data.vdProgress = parseInt((curTime / duration).toFixed(2) * 100)
        }

        // ...

        return {
            ...toRefs(data),
            swipeHorizontalRef,
            editorRef,

            // ...
        }
    }
}
</script>

 

ok,使用vue3开发仿抖音实例就分享这么多,希望大家喜欢哈~~

 

 

Winter2021/02/23 10:05:04

很不错啊

YOC1182570622021/02/18 13:20:29

可以