1、多包管理

使用 Yarn Workspaces 管理 Monorepo
即多个项目放在同一个仓库，用 Yarn 管理依赖。

yarn init -y 会自动生成一个默认的 package.json

mkdir my-empty-project
cd my-empty-project
yarn init -y
yarn init -y 会自动生成一个默认的 package.json，内容类似：
{
  "name": "my-empty-project",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

2、创建主项目

使用vscode中ionic插件

• 新起一个新的项目，使用ionic插件
• 勾选以下选项，点击Create Project
• 使用 capacitor中的 npx cap init 操作后，会生成 capacitor.config.json
• 把下方代码拖到实际项目中主项目文件下面
  
  

3、增加Android和Ios

详见：https://editor.csdn.net/md/?articleId=146475822

4、常见问题以及解决方案

1、你使用了热更新（如 Capacitor + zip 包方案），App 已经运行到了某个页面（例如支付页、详情页、确认页），这时后台检测到新版本并完成了下载更新，那么：热更新完成后，如果加载新版本，会不会导致页面“跳回首页”？用户流程中断？

是的，如果你在热更新完成后自动切换到新版，App 会整个重启 WebView（或刷新），自然会回到首页，用户正在进行的操作会全部丢失，这非常不友好。
具体解释参照：https://blog.csdn.net/u010194271/article/details/149087645

2、既然我只用 WebView 加载远程 H5，那还要不要用 Capacitor？

如果你只是用 WebView 加载一个 URL，并且不需要调用原生能力，确实可以不用 Capacitor，直接用原生 WebView 壳子就够了。如果通过自带的原生插件调用原生能力&&定制化原生能力不高，&&并且不受googlepaly等应用市场隐私政策严格管控&&上线应用市场 顺利则可以考虑

3、一旦你用 Capacitor 默认的方式打包了 H5 页面到 App 里，H5 改动之后必须重新发新版 App（APK/iOS）

默认模式下H5 每次迭代都得重新打包发布 App，除非使用使用 Capacitor 官方插件 @capgo/capacitor-updater

4、插件更新包依然很大，如下图

H5 构建尽量瘦身，开启 gzip / brotli 压缩&设置 CDN 缓存长时间有效（Cache-Control: max-age=31536000）&拆分大图、音视频资源到独立资源域名上&使用按需加载（code splitting）&目标：构建产物 zip 尽量控制在 1MB 内，启动加载时间控制在 1-2 秒

5、如果是上架googlplay、有不少Android/IOS定制原生交互，如获取设备信息等，怎么办？

不使用Capacitor，原生端写逻辑，webview加载网页，js交互实现交互