多端小程序 (uni-app + Wot Design Uni)

1. 核心技术栈清单与职责说明

架构层级	推荐选型	职责与功能定位说明
跨端框架引擎	uni-app (Vue 3) + Vite 5+ + TypeScript	跨端编译器与运行时底座，实现一套 Vue 3 代码同时编译多端小程序包
移动组件体系	Wot Design Uni	基于 Vue 3 + TS 打造的顶流移动端与小程序 UI 库，内置 70+ 高频移动业务组件，支持组件级精细树摇
原子样式体系	UnoCSS + @uni-helper/unocss-preset-uni	高性能原子化 CSS 引擎，自动处理小程序类名转义与 rpx 换算，极限压制整包样式体积
小程序专属工具集 (Hooks)	@uni-helper/uni-use	官方推荐的小程序专属 VueUse 移植库，提供全端通用的剪贴板、扫码、页面生命周期与网络监听等 50+ 响应式 Hooks
状态流转与自动持久化	Pinia + pinia-plugin-persistedstate	模块化集中状态管理，借助存储适配器桥接 uni.getStorageSync，实现 Token 与配置的自动存盘与白名单恢复
文件路由与布局工程	vite-plugin-uni-pages + vite-plugin-uni-layouts	基于文件系统自动生成 pages.json，提供类型安全路由跳转与全局统一 Layout 容器封装
类型定义增强	@uni-helper/uni-app-types	补齐 uni-app 原生缺漏的 Vue 模板标签属性与事件类型定义，杜绝 TS 编译警告与类型盲区
跨端网络通信	uni.request (轻量拦截器封装)	基于原生 API 结合 TypeScript 泛型契约封装，统一注入 Token 鉴权、401 登录失效拦截与全局网络异常提示

2. 核心选型考量与技术优势

• 一套代码多端全渠道投放：开发维护一套业务逻辑，可同时打包发布至微信、支付宝、抖音、快手等多平台小程序，极大降低跨平台研发成本。
• 小程序 2MB 主包红线三层防御架构：
  • 第一层（分包拆解与预加载）：严格规范主包仅保留 TabBar 核心页与全局骨架，所有独立业务模块拆入分包（Subpackages），并配置 preloadRule 在进入主页后静默预加载高频分包，保障秒开且主包体积远低于 2MB；
  • 第二层（静态资产外置 CDN 规约）：主包杜绝存放任何大尺寸背景图与高密度字体文件，本地仅允许极简 SVG 矢量图标，所有商业图片一律走对象存储与 CDN 边缘分发；
  • 第三层（样式与组件树摇压制）：依托 UnoCSS 按需即用编译特性消除无用样式规则，配合 Wot Design Uni 精细化 Tree-shaking，从编译期杜绝整包代码膨胀。
• 小程序专属响应式生态闭环 (@uni-helper/uni-use)：
  • 彻底终结小程序因无浏览器 DOM 环境导致 Web 版 VueUse 崩溃的问题；
  • 原生提供 useClipboard、useScanCode、useNetwork、usePage 与胶囊安全区计算等 50+ 组合式 Hooks，保持全端团队一致的 Composition API 开发心智。
• 声明式持久化治理与白名单防护 (pinia-plugin-persistedstate)：
  • 配置专属存储适配器对接 uni.getStorageSync / uni.setStorageSync；
  • 告别在各业务代码中散落调用本地缓存的混乱现状，通过在 Store 中声明 persist: true 实现跨页面响应式数据自动存取与登出时命名空间一键清退。
• 现代化类型安全与敏捷路由工程化：
  • 通过 vite-plugin-uni-pages 摆脱手工维护繁琐脆弱的 pages.json，实现目录即路由与类型安全传参；
  • 借助 vite-plugin-uni-layouts 赋予小程序类似 Nuxt 的公共插槽布局能力，统一注入全局 Header/TabBar/水印等公共容器；
  • 挂载 @uni-helper/uni-app-types 补全原生模板事件类型，消除类型断代与编译盲区。
• 极简透明的自研第一方网络层：
  • 拒绝引入重度第三方网络包装库，坚持以原生 uni.request 结合 TS 泛型，实现纯粹可控的请求拦截、Token 自动附加与网络降级，零版本滞后风险。

3. 适用业务场景

• 电商商城、全渠道私域流量运营、O2O 本地生活服务小程序；
• 需要同时入驻微信生态、支付宝生活号与抖音本地团购的企业级轻量业务；
• 追求工程规范化、分包清晰、需要长期迭代维护的大中型多端小程序矩阵。

4. 局限性与权衡说明

• 局限性：各大小程序平台间存在平台特性差异（如特定支付协议、活体人脸识别、登录凭证交换），跨端层在极端场景下需引入条件编译代码（#ifdef MP-WEIXIN）。
• 权衡建议：若业务 100% 绑定腾讯微信生态，且对底层动效、手势操作与渲染流畅度有极限要求，应优先采用第 04 节的微信原生框架方案。