在 ionic 项目中使用（迁移） capacitor
目录
1. 在已有项目中使用 capacitor
1.1 可以使用 capacitor 的项目要求
1.2 安装和初始化 capacitor
2. 在 ionic 项目中使用 capacitor
2.1 在新项目中使用 capacitor
2.2 在老项目中使用 capacitor（没有使用 cordova）
2.2.1 安装和初始化 capacitor
2.2.2 添加 android/ios 平台（把原生平台添加到应用中）
2.2.3 构建项目，修改打包输出路径
2.3 在老项目中使用 capacitor（使用了 cordova）
2.3.1 安装和初始化 capacitor
2.3.2 安装 ionic 必须的 capacitor 插件（可以参考 2.2）
2.3.3 添加 android/ios 平台（把原生平台添加到应用中）
2.3.4 尽量使用 capacitor 插件替代 cordova 插件
2.3.5 添加启动动画、更改应用图标
3. ionic 中封装的 capacitor 命令
1. 在已有项目中使用 capacitor
1.1 可以使用 capacitor 的项目要求
可以嵌入 capacitor 的项目必须符合以下要求：
- 必须有一个 package.json 文件
- 必须有一个单独的网络资产目录
- 在网络资产目录的根目录中必须有一个带有 标记的 index.html 文件
1.2 安装和初始化 capacitor
在项目根目录下，安装 capacitor
安装成功后，通过 capacitor 脚手架，确认 应用名称、应用包名
// 在项目根目录下，安装 capacitornpm install @capacitor/corenpm install @capacitor/cli --save-dev// 安装成功后，通过 capacitor 脚手架，确认 应用名称、应用包名 npx cap init2. 在 ionic 项目中使用 capacitor
2.1 在新项目中使用 capacitor
ionic6 已经自动支持 capacitor 了
如果是新建项目，直接通过【ionic start】就能构建出使用 capacitor 的 ionic 项目了
2.2 在老项目中使用 capacitor（没有使用 cordova）
2.2.1 安装和初始化 capacitor
使用 “应用名、应用包名” 安装和初始化 capacitor
安装 ionic 必须的 capacitor 插件
// 使用 “应用名、应用包名” 安装和初始化 capacitorionic integrations enable capacitor// 安装 ionic 必须的 capacitor 插件npm install @capacitor/appnpm install @capacitor/hapticsnpm install @capacitor/keyboardnpm install @capacitor/status-bar2.2.2 添加 android/ios 平台（把原生平台添加到应用中）
【ionic capacitor add】
执行完这条命令后，项目根目录下会自动创建 android 和 ios 文件夹，这两个文件夹其实就是原生工程，在 Android Studio 中可以直接打开并运行原型工程
2.2.3 构建项目，修改打包输出路径
【ionic build】
通过 webDir 可以指定打包输出路径，具体可以参考 capacitor 配置
Capacitor - build cross platform apps with the webBuild iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript
https://capacitorjs.com/docs/config
2.3 在老项目中使用 capacitor（使用了 cordova）
官方建议：如果进行cordova 到 capacitor 的迁移，那么最好新开 git 分支
2.3.1 安装和初始化 capacitor
使用 “应用名、应用包名” 安装和初始化 capacitor【npx cap init】
cordova 项目可以在 config.xml 中获取 应用名 和 应用包名
- 标签获取应用名
- 标签获取应用包名
2.3.2 安装 ionic 必须的 capacitor 插件（可以参考 2.2）
2.3.3 添加 android/ios 平台（把原生平台添加到应用中）
添加平台之前，必须要构建应用（至少构建一次）【npm run build】
执行添加平台命令【npx cap add ios 和 npx cap add android】
- cordova 平台添加位置： myApp/platform/android 或者 myApp/platform/ios
- capacitor 平台添加位置：myApp/android 或者 myApp/ios
2.3.4 尽量使用 capacitor 插件替代 cordova 插件
移除 cordova 插件【npm uninstall cordova-plugin-name】
同步代码【npx cap sync】
2.3.5 添加启动动画、更改应用图标
在 myApp 下创建 resource 文件夹，文件夹中放入应用图标和启动动画界面
全局安装 cordova-res 依赖，该依赖用于生成 适配各个机型的的 应用图标和启动动画界面【npm install -g cordova-res】
安装成功后，在项目根目录下执行【cordova-res ios --skip-config --copy
和 cordova-res android --skip-config --copy】
Capacitor - build cross platform apps with the webBuild iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScripthttps://capacitorjs.com/docs/cordova/migrating-from-cordova-to-capacitor
3. ionic 中封装的 capacitor 命令
举个栗子：ionic capacitor sync 可以简写成 ionic cap sync
ionic capacitor addionic capacitor buildionic capacitor runionic capacitor syncionic capacitor open这些封装的命令，其实和 capacitor cli 本身的命令含义相差不大，可以参考文档
https://capacitorjs.com/docs/cli
https://capacitorjs.com/docs/cli