安装和配置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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
> 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目录里,便于执行这些工具。

  1. 设置Android_SDK_ROOT
    MacOS

    1
    export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
  2. 设置相关工具路径
    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

系统提示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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”,里面保存了初始化时输入的相关信息,内容如下:

1
2
3
4
5
6
7
{
"appId": "cn.com.hohistar.todoionicapp",
"appName": "todo-ionic-app",
"bundledWebRuntime": false,
"npmClient": "yarn",
"webDir": "www"
}

增加Android的支持

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

1
npx cap add android

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

1
2
3
4
5
6
7
8
9
10
11
12
13
✔ 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

本文标题:安装和配置Ionic Android开发环境

文章作者:梅老师

发布时间:2019年06月04日 - 22:06

最后更新:2020年09月16日 - 08:09

原始链接:https://www.mls-tech.info/app/ionic/ionic-config-android-environment/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。