基于uniapp+vue3多端「h5+小程序+App」仿微信/抖音直播商城|uni-app+vue3小视频

uniapp-vue3-welive一款uniapp+vue3+pinia跨端仿抖音直播商城实例。

全新基于uniapp+vue3+vite4+pinia等技术研发的一款跨平台仿制微信/抖音直播带货商城uniapp+vue3短视频实例项目，支持编译到h5+小程序+App端。

技术框架

• 编辑器：HbuilderX 3.98
• 框架技术：uniapp+vue3+vite4+nvue+pinia
• UI组件库：uv-ui + vk-uview
• 弹框组件：uaPopup（uniapp封装多端弹框组件）
• 自定义组件：uaNavbar+uaTabbar组件
• 本地缓存：pinia-plugin-unistorage
• 编译支持：H5+小程序+APP端

welive-uniapp支持全端编译至H5+小程序端+App端。

uni-welive短视频+直播页面采用Nvue开发范式。

项目结构

项目整体采用uniapp vue3 setup语法编码开发。

uniapp+vue3自定义导航栏navbar+菜单栏tabbar

这两个组件的vue2版本已经发布到了插件市场，如果大家有需要，可以去下载一次性拿走使用。

https://ext.dcloud.net.cn/plugin?id=5592

https://ext.dcloud.net.cn/plugin?id=5593

uniapp+vue3短视频模块

uniapp-welive项目小视频模块采用全屏沉浸式滑动效果。分为顶部固定tabs+视频区+底部视频信息浮层三大模块。

    
        
            
                
                
                
                
                    
                        
                        
                            弹
                            @{{item.author}}
                            {{item.desc}}
                        
                        
                        
                            
                                
                                
                            
                            {{item.likeNum+(item.isLike ? 1 : 0)}}
                            {{item.replyNum}}
                            {{item.starNum}}
                            {{item.shareNum}}
                        
                    
                
            
        
        
        
        
            
        
        
        
        
            
        
        
        
    
    
    
        
    

底部tabbar上面有一条迷你型小视频播放进度条。

    import { ref, computed, getCurrentInstance } from 'vue'
    import { onShow, onHide } from '@dcloudio/uni-app'
    import { getRandomColor } from '@/utils'
    
    // ...
    
    const { globalData } = getApp()
    const menuBarT = ref(globalData.menu?.top || globalData.statusBarH)
    const winWidth = ref(globalData.screenWidth)
    const winHeight = ref(globalData.screenHeight)
    
    const tabsList = ref([
        { name: '推荐', count: 5 },
        { name: '关注' },
        { name: '同城' }
    ])
    const tabsCurrent = ref(0)
    
    // 视频参数
    const currentVideo = ref(0)
    const isPlaying = ref(false)
    const clickNum = ref(0)
    const clickTimer = ref(null)
    const progressBar = ref(0)
    
    // 视频源
    const videoList = ref(videoJson)
    const danmuEditor = ref('')
    const isVisibleDanmu = ref(false)
    const commentRef = ref(null)
    const shareRef = ref(null)
    
    // ...
    
    
    /**
     * ====================== 视频播放模块 ======================
    */
    // 创建并返回 video 上下文 videoContext 对象
    const getVideoContext = () => {
        // return uni.createVideoContext(`uplayer${currentVideo.value}`, this)
        return uni.createVideoContext(`uplayer${currentVideo.value}`, getCurrentInstance())
    }
    
    // 垂直滑动视频，滑动改变时会触发 change 事件
    const handleChange = (e) => {
        const index = e.detail.current
        progressBar.value = 0
        handleReset()
        
        currentVideo.value = index
        // 播放
        handlePlay()
    }
    
    // 播放
    const handlePlay = () => {
        console.log('video play')
        let video = getVideoContext()
        if(!video) return
        video.play()
        isPlaying.value = true
    }
    
    // 暂停
    const handlePause = () => {
        console.log('video pause')
        let video = getVideoContext()
        if(!video) return
        video.pause()
        isPlaying.value = false
    }
    
    // 重置播放
    const handleReset = () => {
        console.log('video reset')
        let video = getVideoContext()
        if(!video) return
        video.pause()
        video.seek(0)
        video.stop()
        isPlaying.value = false
    }
    
    // 监听播放进度条
    const handleTimeUpdate = (e) => {
        let { currentTime, duration } = e.detail
        progressBar.value = parseInt((currentTime / duration).toFixed(2) * parseInt(winWidth.value))
    }
    
    // 点击视频(监听单双击)
    const handleClickVideo = () => {
        console.log('video click')
        clearTimeout(clickTimer.value)
        clickNum.value++
        clickTimer.value = setTimeout(() => {
            if(clickNum.value >= 2) {
                console.log('double click')
            }else {
                if(isPlaying.value) {
                    handlePause()
                }else {
                    handlePlay()
                }
            }
            clickNum.value = 0
        }, 200)
    }
    
    
    /**
     * ====================== 其它功能模块 ======================
    */
    // 打开弹幕弹框
    const handleOpenDanmu = () => {
        isVisibleDanmu.value = true
    }
    // 关闭弹幕弹框
    const handleCloseDanmu = () => {
        uni.hideKeyboard()
        isVisibleDanmu.value = false
        danmuEditor.value = ''
    }
    // 发送弹幕
    const handleSendDanmu = () => {
        let video = getVideoContext()
        if(!video) return
        video.sendDanmu({
            text: danmuEditor.value,
            color: getRandomColor()
        })
        handleCloseDanmu()
    }
    
    // 打开评论框
    const handleOpenComment = (index) => {
        commentRef.value.open()
    }
    
    // ...

注意：在uniapp+vue3中没有this上下文，只能通过如下方式获取视频上下文实例。

uni.createVideoContext(`uplayer${currentVideo.value}`, getCurrentInstance())

uniapp+vue3仿抖音/微信直播

直播模块分为顶部信息条+直播流媒体区+滚动消息(加入直播间+送礼物+讲解商品)+底部toolbar栏

    
        
            
                
                
                
                
                    
                    
                        第一屏
                    
                    
                        
                        
                            
                            
                                
                                    
                                    
                                        {{item.name}}
                                        {{item.likeNum}}本场点赞
                                    
                                    {{item.isFollow ? '已关注' : '关注'}}
                                
                                
                                    
                                
                            
                            
                                
                                    
                                        
                                            服饰鞋包榜第1名
                                        
                                        
                                            小时榜
                                        
                                    
                                    
                                    
                                        
                                            04:49
                                        
                                        
                                            04:49
                                        
                                        
                                            04:49
                                        
                                    
                                
                                
                                    
                                        后台
                                    
                                
                            
                        
                        
                        
                        
                            
                            
                                
                                    
                                    
                                        Andy等{{item.saleNum}}人在购买
                                        {{item.desc}}
                                    
                                    去购买
                                
                            
                            
                            
                                
                                    欢迎{{joinRoomData}}加入了直播间
                                
                                
                                
                                
                                    
                                        
                                        {{sendGiftData.user}}送出
                                        
                                    
                                
                            
                            
                            
                                
                                
                                    
                                        
                                            {{msgitem.content}}
                                            
                                                
                                                    {{msgitem.user}}
                                                    送出了{{msgitem.content}}
                                                    
                                                    x{{msgitem.num}}
                                                
                                            
                                            
                                                
                                                    {{msgitem.tag}}
                                                    {{msgitem.user}}
                                                    {{msgitem.isbuy ? '正在购买' : msgitem.content}}
                                                    去购买
                                                
                                            
                                        
                                    
                                    {{msgUnread.length}}条新消息
                                
                                
                                
                                    
                                        热卖 x{{item.saleNum}}
                                    
                                    
                                        
                                            
                                                
                                                    
                                                    讲解中
                                                    
                                                
                                                
                                                    {{item.desc}}
                                                    7天无理由退货
                                                
                                                ￥79.00抢
                                            
                                        
                                    
                                
                            
                            
                            
                                
                                    说点什么...
                                
                                
                                    
                                    
                                    
                                    
                                
                            
                        
                    
                
            
        
    

由于短视频及直播页面采用Nvue编码，vk-uview组件库不支持nvue，有些组件则是使用uv-ui组件库(支持nvue)。

OK，以上就是uniapp+vue3开发跨端直播商城项目的一些分享。

最后附上两个实例项目

• Electron27+React18仿MacOS桌面端框架系统

  https://blog.csdn.net/yanxinyun1990/article/details/134567716

• Tauri+vue3后台管理系统

  https://blog.csdn.net/yanxinyun1990/article/details/131734743