安装和配置Ionic Android开发环境

本文记录的是如何配置Ionic的Android开发环境，从安装Ionic, 构建简单的Ionic应用，安装配置Android 开发环境。到使用Capacitor构建Android App。

安装Ionic CLI

确保你已经安装了node, 执行以下命令安装Ionic CLI

1	npm install -g ionic

你也可以使用yarn来进行安装，执行:

1	yarn global add ionic

安装完成后，执行以下命令验证安装结果

1	ionic --version

如果安装正常，你应该可以看到系统显示版本号。

设置yarn为Ionic CLI的包管理工具(可选)

细节可以参考另一篇文章:如何设置Yarn作为Ionic CLI的包管理工具
可以简单的执行以下命令来完成:

1 2	ionic config set -g npmClient yarn [OK] npmClient set to "yarn"!

建立示例应用

1	ionic start todo-ionic-app blank

安装完成以后，进入项目目录，运行程序，验证项目构建成功

1 2	cd todo-ionic-app ionic serve

如果安装正常，系统将显示:

> ng run app:serve --host=localhost --port=8100
[INFO] Waiting for connectivity with ng...

[INFO] Development server running!
       
       Local: http://localhost:8100
       
       Use Ctrl+C to quit this process

[INFO] Browser window opened to http://localhost:8100!

[ng] ℹ ｢wdm｣: wait until bundle finished: /
[ng] Date: 2019-06-04T13:32:30.608Z
[ng] Hash: 335a1389e4700cdf8bd5
[ng] Time: 20357ms
[ng] chunk {common} common.js, common.js.map (common) 20.2 kB  [rendered]
[ng] chunk {es2015-polyfills} es2015-polyfills.js, es2015-polyfills.js.map (es2015-polyfills) 285 kB [initial] [rendered]
[ng] chunk {home-home-module} home-home-module.js, home-home-module.js.map (home-home-module) 4.92 kB  [rendered]
[ng] chunk {main} main.js, main.js.map (main) 31.8 kB [initial] [rendered]
[ng] chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 237 kB [initial] [rendered]
[ng] chunk {runtime} runtime.js, runtime.js.map (runtime) 8.79 kB [entry] [rendered]
[ng] chunk {styles} styles.js, styles.js.map (styles) 87.9 kB [initial] [rendered]
[ng] chunk {vendor} vendor.js, vendor.js.map (vendor) 4.37 MB [initial] [rendered]
[INFO] ... and 173 additional chunks
[ng] ℹ ｢wdm｣: Compiled successfully.

并且会自动打开浏览器，显示应用的首页。

安装Android Studio

采用默认安装即可
安装完以后，建立一个简单的项目来验证相关的由来库是否安装全。

安装Android SDK

配置Android SDK

主要是将Android SDK中的相关工具设置到path目录里，便于执行这些工具。

设置Android_SDK_ROOT
MacOS

1	export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk

设置相关工具路径
MacOS

1
2
3

export PATH=$PATH:$ANDROID_SDK_ROOT/tools/bin
export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools
export PATH=$PATH:$ANDROID_SDK_ROOT/emulator

安装Capacitor

进入示例项目目录，然后执行命令安装capacitor执行

1 2	cd todo-ionic-app yarn add @capacitor/core @capacitor/cli

如果你使用的是npm, 则可以执行

1	npm install --save @capacitor/core @capacitor/cli

构建示例项目

构建示例项目，生成发布目录

1	ionic build

成功构建后，你可以在项目里看到新建的www目录

初始化Capacitor

在项目目录中，运行命令:

1	npx cap init

系统提示:

App name todo-ionic-app
? App name todo-ionic-app
? App Package ID (in Java package format, no dashes) cn.com.hohistar.to
doionicapp
? Which npm client would you like to use? yarn
⠋ Initializing Capacitor project in /ionic/todo-ionic-
✔ Initializing Capacitor project in /ionic/todo-ionic-app in 3.44ms


🎉   Your Capacitor project is ready to go!  🎉

Add platforms using "npx cap add":

  npx cap add android
  npx cap add ios
  npx cap add electron

运行完成后，可以看到在项目目录中多了个名为: “capacitor.config.json”，里面保存了初始化时输入的相关信息，内容如下:

{
  "appId": "cn.com.hohistar.todoionicapp",
  "appName": "todo-ionic-app",
  "bundledWebRuntime": false,
  "npmClient": "yarn",
  "webDir": "www"
}

增加Android的支持

实际上这个过程是建立一个标准的android项目的过程

1	npx cap add android

如果运行正常，系统将显示

✔ Installing android dependencies in 11.73s
✔ Adding native android project in: /ionic/todo-ionic-app/android in 124.37ms
✔ Syncing Gradle in 478.18s
✔ add in 490.04s
✔ Copying web assets from www to android/app/src/main/assets/public in 675.08ms
✔ Copying native bridge in 8.85ms
✔ Copying capacitor.config.json in 2.58ms
✔ copy in 720.68ms
✔ Updating Android plugins in 5.43ms
  Found 0 Capacitor plugins for android:
✔ update android in 45.90ms

Now you can run npx cap open android to launch Android Studio

同时，可以看到在项目目录中多了一个android的目录，目录里面实际上是一个完整的Android Studio项目

运行Android项目

在项目目录中运行open android命令，打开Android Studio运行示例程序。

1	npx cap open android

在Android Studio中运行项目

保持Web项目和本地项目的同步

执行

1	ionic capacitor copy android