手帐 Blog

主题

06 · uni-app 打包踩坑与 Capacitor 差异对照 ​

目标：分清云打包 vs 本地打包；整理证书 / 权限 / 原生插件常见坑；用一张表对比 uni-app App 与 Capacitor，并回看 PWA / RN 定位。

1. 背景与目标 ​

05 跑通了 Journal 的 H5 / 小程序构建，并扫过 App 发行入口。
本篇把 App 打包坑写清楚，并回答：已经会 Capacitor 了，为什么还要（或不必）上 uni-app App？

2. 核心概念 ​

2.1 云打包 vs 本地打包 ​

云打包本地打包
环境DCloud 云端编译本机 Android Studio / Xcode
上手快，适合标准插件与证书已备好慢，适合改原生工程、排原生疑难
可控性依赖云端队列与套餐完全本地，可打自定义日志
典型用途常规发版、证书换绑后出包原生 SDK、自定义基座、云打包失败排查

调试基座：官方基座不含你的付费/自定义原生插件；需要时打自定义调试基座，否则真机调插件会「模块不存在」。

2.2 证书与权限（高频） ​

项注意
Android 签名jks / keystore 备份；包名与应用标识一致；搞丢则无法覆盖安装更新
iOS 证书与描述文件开发 / 发布证书分开；Bundle Id 匹配；设备 UDID 进描述文件（Ad Hoc）
权限清单只用到的权限；用途说明文案审核可读
隐私合规隐私政策弹窗、后台定位等按商店与法规要求，不是「能编译就行」

2.3 uni-app App vs Capacitor ​

维度uni-app AppCapacitor
源码形态Vue SFC + uni API，编译进 uni 运行时任意 Web 框架 build 出的 dist
多端同一套还可出 H5 / 各小程序主打原生壳；小程序需另方案
原生扩展uni 原生插件 / 市场插件；常配合自定义基座Capacitor 插件或自写 Cordova/Cap 插件
工程所有权云打包时可少碰原生工程；本地打包才深入android/ ios/ 始终在仓库旁，日常 cap sync
合适场景国内小程序为主、顺带 App已有成熟 Web，主要要进商店
与 JournalC 端已是 uni-app → 打包优先走 uni 体系适合另起 Web 产品或管理端壳，不必强行替换 client

2.4 四条路线一句话（复习） ​

text
PWA        → 浏览器可安装，无商店
Capacitor  → Web dist 进 WebView 商店包
uni-app    → 编译多端；国内小程序强；App 走自有打包链
RN         → JS 驱动原生控件（下一阶段）

3. 最小实践 ​

3.1 踩坑清单（对照自检，不必一次全做） ​

写一页「App 发行检查表」：

  1. 云打包失败时：看证书密码、包名、图标尺寸、是否勾了未配置的原生能力
  2. 真机白屏：区分「资源路径 / 引擎版本 / 仅自定义基座才有的插件」
  3. 插件：manifest 是否勾选；是否打了含该插件的自定义基座
  4. 权限：首次弹窗文案；拒绝权限后的降级路径
  5. 版本号：Android versionCode 必须递增，否则无法覆盖安装

3.2 对照实验（思维实验即可） ​

假设把 Journal H5 产物丢进 Capacitor：

  • 能进商店吗？——技术上可以，但你失去与小程序同一套 uni 源码的编译管线，要维护两套工程。
  • 结论：Journal 维持 uni-app；Capacitor 技能留给「纯 Web 进壳」项目。

3.3 小程序侧与打包相关的续坑 ​

  • 主包超限：拆分包、压图、清无用 npm
  • 上传后 request 失败：后台配置 request 合法域名
  • 体验版与正式版 env 打错：CI 或发版检查单加一项

4. 踩坑与取舍 ​

  1. 云打包失败只重试：先读失败日志里的证书与资源项。
  2. 官方基座调自定义插件：永远调不通——换自定义基座。
  3. 用 Capacitor 经验硬套 uni 原生插件市场：文档入口不同，分清体系。
  4. 为了「简历有 App」强行双端上架：无运维与更新节奏时，维护成本高于收益。
  5. 忽略 22 的运行时差异：打包绿了，业务在小程序仍红。

5. 验收清单 ​

  • [ ] 能对比说明云打包 vs 本地打包（场景各一例）
  • [ ] 知道自定义调试基座何时必需
  • [ ] 能填写 uni-app App vs Capacitor 对照表中至少 4 行（不看稿）
  • [ ] 对 Journal：说清「为何 App 走 uni 而不是把 H5 塞 Capacitor」
  • [ ] 证书备份与 versionCode 递增写进自己的发版备忘

6. 下一步 ​

→ 07 · React Native 入门：环境、导航与 Web 心智差异

参考链接 ​