基于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