目录
2.2 在老项目中使用 capacitor（没有使用 cordova）
2.2.2 添加 android/ios 平台（把原生平台添加到应用中）
2.3 在老项目中使用 capacitor（使用了 cordova）
2.3.2 安装 ionic 必须的 capacitor 插件（可以参考 2.2）
2.3.3 添加 android/ios 平台（把原生平台添加到应用中）
2.3.4 尽量使用 capacitor 插件替代 cordova 插件
1. 在已有项目中使用 capacitor
1.1 可以使用 capacitor 的项目要求
可以嵌入 capacitor 的项目必须符合以下要求：
- 必须有一个 package.json 文件
- 必须有一个单独的网络资产目录
- 在网络资产目录的根目录中必须有一个带有 标记的 index.html 文件
1.2 安装和初始化 capacitor
在项目根目录下，安装 capacitor
安装成功后，通过 capacitor 脚手架，确认 应用名称、应用包名
// 在项目根目录下，安装 capacitor npm install @capacitor/core npm 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 插件
// 使用 “应用名、应用包名” 安装和初始化 capacitor ionic integrations enable capacitor // 安装 ionic 必须的 capacitor 插件 npm install @capacitor/app npm install @capacitor/haptics npm install @capacitor/keyboard npm install @capacitor/status-bar2.2.2 添加 android/ios 平台（把原生平台添加到应用中）
【ionic capacitor add】
执行完这条命令后，项目根目录下会自动创建 android 和 ios 文件夹，这两个文件夹其实就是原生工程，在 Android Studio 中可以直接打开并运行原型工程
2.2.3 构建项目，修改打包输出路径
【ionic build】
通过 webDir 可以指定打包输出路径，具体可以参考 capacitor 配置
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】
3. ionic 中封装的 capacitor 命令
举个栗子：ionic capacitor sync 可以简写成 ionic cap sync
ionic capacitor add ionic capacitor build ionic capacitor run ionic capacitor sync ionic capacitor open这些封装的命令，其实和 capacitor cli 本身的命令含义相差不大，可以参考文档
https://capacitorjs.com/docs/cli
https://capacitorjs.com/docs/cli
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/208492.html原文链接：https://javaforall.net
