主题
05 · uni-app 多端打包全景：H5 / 小程序 / App
目标：对照 Journal 跑通 H5 / 微信小程序构建；理解 App 云打包与本地打包链路；建立分包与包体意识（打包视角，条件编译细节见 前端进阶 · 22）。
1. 背景与目标
前四篇是「Web → 可安装 → WebView 壳」。Journal C 端是 uni-app（Vue）：同一套源码编译到不同运行时，产物形态完全不同。
本篇只谈怎么构建、产物在哪、发到哪，不重讲页面怎么写。
相对 22：22 讲 H5 vs 小程序运行时差异；本篇讲 pnpm build:* 与发行路径。
2. 核心概念
| 目标端 | 构建命令（本仓库） | 典型产物 | 下一步 |
|---|---|---|---|
| H5 | 根目录 pnpm build:h5（即 client 的 uni build） | client/dist/build/h5 一类静态站 | Nginx / CDN / 任意静态托管 |
| 微信小程序 | pnpm build:mp-weixin | client/dist/build/mp-weixin | 微信开发者工具上传 |
| App | HBuilderX 云打包，或本地离线打包 / 自定义基座 | apk / ipa（或商店包） | 证书 + 商店或侧载 |
开发态对照：
bash
# 仓库根目录（PowerShell 用分号）
pnpm dev:h5
pnpm dev:mp-weixin1
2
3
2
3
AGENTS.md 里若写 dev:client:* / build:client:*，以根目录 package.json 实际脚本为准：当前是 dev:h5 / build:h5 / dev:mp-weixin / build:mp-weixin。
打包视角的「一套代码」
text
client/src（Vue SFC + 条件编译）
│
├─► H5 打包器 → 浏览器可跑的 JS/CSS
├─► 微信小程序编译器 → wxml/wxss/js + app.json
└─► App 运行时（uni-app x / 原生渲染或 WebView 视版本与配置）→ 安装包1
2
3
4
5
2
3
4
5
运行时差异导致：构建成功 ≠ 三端行为一致。打包阶段至少要做：主包体积、启动页、各端必测冒烟。
3. 最小实践（对照 Journal）
3.1 H5 生产构建
bash
cd e:\code\uniapp\Journal\journal
pnpm build:h51
2
2
验收：
- [ ] 命令退出码 0
- [ ] 产物目录存在；本地可用静态服务器打开首页（或预览脚本）
- [ ] 知道生产 API 基址来自哪份 env / 配置（勿把开发 localhost 打进生产包）
3.2 微信小程序生产构建
bash
pnpm build:mp-weixin1
验收：
- [ ] 用微信开发者工具导入产物目录
- [ ] 能编译通过；主包体积在工具里可见
- [ ] 上传体验版前核对
appid、权限与服务器域名白名单
开发态 pnpm dev:mp-weixin 适合边改边看；提审前必须走 build，避免把 sourcemap / 调试残留当正式包习惯。
3.3 App 打包链路（概念跑通即可）
Journal 日常交付重心是 H5 + 微信；App 作为能力储备：
- 云打包：HBuilderX 登录 DCloud → 发行 → 原生 App-云打包 → 选证书与渠道
- 本地打包：按官方「本地离线打包」配 Android Studio / Xcode 环境（重，适合要改原生工程时）
- 自定义调试基座：原生插件未进正式包前，用自定义基座真机调
本篇验收不要求你真打出上架包；要求能画出「源码 → 云打包 / 本地打包 → 安装包」三步，并知道证书在哪一步介入（细节见 06）。
3.4 分包与包体意识（打包必问）
小程序主包有硬限制。对着 Journal / 自己项目问：
- 静态图、一次引入的大库是否拖主包？
- 低频页是否进分包？
- 构建产物里有没有误打进测试资源？
体积优化属工程持续项；首次发版前至少看一次开发者工具的代码依赖分析。
4. 踩坑与取舍
- 只在 H5 调通就上传小程序：条件编译漏了的 API 会在真机爆。
- dev 包当正式包：体积、日志、接口环境都可能不对。
- 忽略域名与业务资质：小程序能跑本地，上传后 request 失败。
- App 与小程序同一套 UI 不测安全区 / 返回手势：发行后才发现。
- 和 Capacitor 混淆：uni-app App 走 DCloud/uni 运行时与插件市场；Capacitor 是「自有 Web dist + 官方插件」。对照见下一篇。
5. 验收清单
- [ ] 本仓库
pnpm build:h5与pnpm build:mp-weixin至少各成功一次 - [ ] 能指出小程序产物目录，并用开发者工具打开
- [ ] 能口述 App 云打包 vs 本地打包各自适用场景（各一句）
- [ ] 列出 2 个与包体 / 分包相关的检查点
- [ ] 知道业务差异细节去读前端进阶 22，本篇只守打包
6. 下一步
→ 06 · uni-app 打包踩坑与 Capacitor 差异对照
参考链接
- https://uniapp.dcloud.net.cn/tutorial/build.html
- https://uniapp.dcloud.net.cn/tutorial/build-xcode.html
- https://uniapp.dcloud.net.cn/tutorial/app-nativeresource.html
- 本仓库
AGENTS.md、根目录package.json、client/package.json - 前端进阶 · 22 · 跨端对照