行业知识
基于uniapp+vue3多端「h5+小程序+App」仿微信/抖音直播商城|uni-app+vue3小视频
2026-11-08 01:44:43
来源：互联网转载
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
-
