UniApp 跨端实战：一个代码库跑通微信小程序 + H5 + App 的直播电商

久滴直播电商平台 · 技术博客系列 第 11 篇 标签UniApp跨端开发小程序H5前言直播电商产品的用户端需要覆盖多个平台——iOS App、Android App、微信小程序、H5 网页。如果每个平台都独立开发人力成本和维护成本都会翻倍。久滴直播电商平台选择UniApp作为跨端方案一套代码同时编译到微信小程序、H5 和 App 三端。本文将分享这套方案在直播电商场景下的分包架构、nvue 原生渲染、组件化设计和多环境配置等实践经验。目录为什么选 UniApp分包架构设计nvue 原生渲染直播详情页的性能优势组件化设计pkg-live 的 20 组件Hooks 封装直播状态管理多环境配置与 API 对接1. 为什么选 UniApp常见的跨端方案对比方案优点缺点Flutter性能好UI 一致不支持小程序生态偏原生React Native社区大性能好不支持小程序学习成本高UniApp全平台覆盖Vue 生态性能略逊原生部分 API 限制TaroReact 生态支持多端社区不如 UniApp 活跃对于直播电商场景UniApp 的优势在于全平台一套代码编译到微信小程序、H5、iOS、AndroidVue 生态团队已有 Vue 经验上手成本低nvue 原生渲染对性能要求高的页面如直播详情页使用原生渲染条件编译#ifdef/#ifndef处理平台差异2. 分包架构设计微信小程序对主包大小有 2MB 限制超过限制需要用分包。久滴 UniApp 端采用业务分包设计{pages:[{path:pages/index/index}],subPackages:[{root:pages/pkg-mall,pages:[{path:mall-classify/index},{path:goods-detail/index},{path:submit-order},{path:shopping-cart}]},{root:pages/pkg-order,pages:[{path:order-list},{path:order-detail},{path:aftersale-apply}]},{root:pages/pkg-live,pages:[{path:live-list},{path:live-detail},{path:live-playback}]},{root:pages/pkg-info,pages:[{path:info-detail},{path:video-detail},{path:info-list}]},{root:pages/pkg-coupon,pages:[{path:coupon-list},{path:coupon-center}]}]}分包策略主包只放首页和公共组件保持尽量小pkg-mall商城相关商品分类、详情、购物车、下单pkg-order订单相关列表、详情、售后pkg-live直播相关列表、详情、回放pkg-info资讯内容pkg-coupon优惠券每个分包独立加载用户进入对应功能时才下载相关代码首屏加载速度大幅提升。3. nvue 原生渲染直播详情页的性能优势UniApp 默认使用 WebView 渲染页面。对于直播详情页这种需要同时播放视频流、渲染弹幕、展示商品列表的高性能场景WebView 的性能可能不够理想。久滴平台将直播详情页使用.nvuenative vue格式启用原生渲染pages/pkg-live/ ├── live-list.vue # 直播列表WebView 即可 ├── live-detail.nvue # 直播详情nvue 原生渲染★ ├── live-playback.vue # 直播回放 └── components/ ├── live-chat.vue # 弹幕聊天组件 ├── popup-prods.vue # 商品列表弹窗 ├── live-detail-item.vue # 直播间卡片 └── ...nvue 的优势视频播放更流畅原生video组件直接使用系统播放器弹幕渲染不卡顿原生 List 组件复用视图不会因消息量大而卡顿滑动切换更顺滑原生 List 的上下滑动切换直播间体验接近原生 App同时通过条件编译处理 H5 端的差异!-- App/小程序端使用原生 video -- !-- #ifndef H5 -- video :srcsrc :controlsfalse :show-fullscreen-btnfalse object-fitcover / !-- #endif -- !-- H5 端使用 TCPlayer Web SDK -- !-- #ifdef H5 -- view :idcontainerId classtcplayer-container / !-- #endif --4. 组件化设计pkg-live 的 20 组件直播分包包含 20 个组件按功能分组components/ ├── adapter-list.vue # 直播间列表适配器 ├── adapter-swiper.vue # 直播间轮播适配器 ├── live-chat.vue # 弹幕聊天组件核心 ├── live-detail-item.vue # 直播间商品卡片 ├── live-options.vue # 直播间操作栏 ├── popup-prods.vue # 商品列表弹窗 ├── popup-comment-input.vue # 评论输入弹窗 ├── popup-audience.vue # 观众列表弹窗 ├── popup-more-live.vue # 更多直播弹窗 ├── msg-product.vue # 商品消息卡片 ├── host-audience.vue # 主播/观众切换 ├── introducing-ani.vue # 商品讲解动画 └── more-live.vue # 更多直播入口每个组件都有独立的.scss样式文件实现了样式隔离和可复用性。弹幕组件的消息处理live-chat.vue是直播间最核心的交互组件处理弹幕消息的接收、去重、渲染和滚动控制constonGetMsgListasync(list:any[]){// 过滤当前群的消息constfilteredMsgListlist.filter((item)item.tocurGroupId.value)for(constitemoffilteredMsgList){consttargetItemmsgList.value.find((msg)msg.IDitem.ID)// 去重 非空判断if(!targetItemitem.payload?.text){constisAtBottomawaitisScrollAtBottom()msgList.value.push({ID:item.ID,userName:item.nick||未知用户,msg:item.payload.text,})// 只有用户处于底部时才自动滚动if(item.isSelfMsg||isAtBottom){setScrollToBottom()}}}}5. Hooks 封装直播状态管理useLiveRoom.ts封装了直播间的状态管理逻辑// hooks/useLiveRoom.tsexportfunctionuseLiveRoom(){constchatrefany(null)constcurrentLiveIndexref(0)constliveListrefILiveItem[]([])// 进入直播间群constenterLiveRoomasync(index:number,oldIndex:number){constoldLiveItemliveList.value[oldIndex]constliveItemliveList.value[index]// 退出旧群if(oldLiveItem?.streamName){awaitimHook.exitLiveRoom(oldLiveItem.streamName)}// 加入新群if(liveItem?.streamName){awaitimHook.enterLiveRoom(liveItem.streamName)}}// 滑动切换直播间consthandleListScroll(event:any){uni.$emit(GlobalEventEnum.LIVE_SWIPING)if(!event.isDragging){constiMath.round(Math.abs(event.contentOffset.y)/windowHeight)if(i!currentLiveIndex.value){constoldcurrentLiveIndex.value currentLiveIndex.valueienterLiveRoom(i,old)}}}return{chat,currentLiveIndex,liveList,handleListScroll}}直播间切换时的播放器懒加载也很关键constonTimeUpdate(){if(!props.isCurrent)pause()// 非当前页自动暂停播放}6. 多环境配置与 API 对接UniApp 通过.env文件管理不同环境的配置# .env.developmentVITE_API_BASE_URLhttp://localhost:48080# .env.productionVITE_API_BASE_URLhttps://api.kudi.net.cnAPI 调用封装在统一的请求模块中// utils/request.tsconsthttpuni.$uv.http http.interceptors.request.use((config){consttokenuni.getStorageSync(token)if(token){config.header.AuthorizationBearer${token}}returnconfig})http.interceptors.response.use((response){const{code,data,msg}response.dataif(code0)returndata uni.showToast({title:msg,icon:none})returnPromise.reject(newError(msg))})总结本文分享了久滴直播电商平台 UniApp 跨端开发的实践经验业务分包pkg-mall / pkg-order / pkg-live / pkg-coupon 按功能域分包满足小程序 2MB 主包限制nvue 原生渲染直播详情页使用 nvue视频播放和弹幕渲染性能接近原生条件编译#ifdef H5/#ifndef H5处理平台差异如 TCPlayer vs 原生 video组件化设计20 组件按功能分组弹幕组件实现去重、自动滚动、智能渲染Hooks 封装useLiveRoom 封装直播间切换、群管理、播放器懒加载等逻辑下一篇是本系列的收官之作我们将深入会员激励体系的设计。久滴直播电商平台是一个基于 Spring Boot 3 Vue3 UniApp 的全栈开源直播电商解决方案。 GitHubhttps://github.com/jiudi-dev/live-mall-communityCommunity 版如果觉得本文对你有帮助欢迎 Star ⭐ 支持