Ionic+Capacitor 创建混合APP

一、介绍

Capacitor是由ionic团队开发的一款跨平台移动应用构建工具，可轻让我们轻松的构建Android、iOS、Electron和Web应用程序。 其前身为Apache Cordova和Adobe PhoneGap。

Capacitor 允许前段开发这像开发前段应用程序一样开发移动APP，他会将我们写的html css js打包到原生APP中，形成独立的App程序，可以在各应用商店发布。Capacitor官方也给我们提供了常见的Api插件，并且支持用户自己开发插件。作为Cordova的继承者，在Capacitor工程中，当然也可以使用Cordova插件。

二、创建混合APP

1. 安装nodejs

直接从官网下载，建议安装最细稳定版本：https://nodejs.org/en/

安装成功后，终端执行 node -v 查看安装的版本

node -v
v18.14.1

npm -v
9.3.1

2.安装Ionic

npm install -g @ionic/cli

ionic -v
6.20.8

备注： Ionic 默认安装的是最新版本，可以在命令后加上版本号，安装制定版本，但是由于版本匹配问题，建议默认都安装最新的。

ionic 6.x 之后的版本默认你开启了Capacitor支持，所使用起来更方便。

3.创建Ionic工程

1）在终端执行命令

ionic start myApp tabs

命令格式： ionic start 工程名称 模板名称

2）选择前端框架

Pick a framework! 

Please select the JavaScript framework to use for your new app. To bypass this prompt next time, supply a value for the
--type option.

? Framework: 
  Angular | https://angular.io 
  React   | https://reactjs.org 
❯ Vue     | https://vuejs.org 

备注：新版本ionic 支持 angular、react和vue三种框架，选择适合自己的就行。在创建过程中会提示是否创建ionic社区账号，选择不创建就可以。

3）ionic工程创建完成

ionic工程创建完成后，终端会有如下输出：

? Create free Ionic account? No

Your Ionic app is ready! Follow these next steps:

- Go to your new project: cd ./myApp
- Run ionic serve within the app directory to see your app in the browser
- Run ionic capacitor add to add a native iOS or Android project using Capacitor
- Generate your app icon and splash screens using cordova-res --skip-config --copy
- Explore the Ionic docs for components, tutorials, and more: https://ion.link/docs
- Building an enterprise app? Ionic has Enterprise Support and Features: https://ion.link/enterprise-edition

4、添加Android 和IOS原生工程

1）配置 app 名称和 包名

cd myApp
npx cap init [appName] [appId]

命令格式 ： npx cap init 应用名称 应用包名

备注: 执行过程中可能报以下错误，按照提示删除 capacitor.config.ts，重新执行即可。

[error] Cannot run init for a project using a non-JSON configuration file.
        Delete capacitor.config.ts and try again.

2）执行命令，添加Android 和ios 工程

npm install @capacitor/ios
npm install @capacitor/android

npx cap add ios
npx cap add android

执行成功后，myApp 目录下，会多出 android 和 ios 文件夹，分别对应Android 和IOS 的原生APP工程。

5、编译前端代码

执行命令:

npm run build

或者:

ionic build

6、同步前端代码到原生工程中。

执行命令:

npx cap copy

同步成功终端输出如下:

✔ Copying web assets from public to android/app/src/main/assets/public in 7.14ms
✔ Creating capacitor.config.json in android/app/src/main/assets in 1.01ms
✔ copy android in 23.28ms
✔ Copying web assets from public to ios/App/App/public in 3.78ms
✔ Creating capacitor.config.json in ios/App/App in 271.84μs
✔ copy ios in 13.92ms
✔ copy web in 4.17ms

备注:

每次修改玩前端代码，都需要重新执行 ionic build 和 npx cap copy，否则无法将修改同步到原生APP中进行打包。

7、编译Android 或者IOS 应用包。

执行命令:

npx cap open ios   // 打开 xcode编译IOS app
npx cap open android   // 打开 Android Studio 编译Android apk