Ionic跨平台移动应用开发教程(三)

在本系列的上一篇文章中, 使用 cordova 和 ionic 构建一个简单的相册应用，并使用了相机和本地存储的功能。本文让读者将应用安装到 android 真机上进行测试。

在 VS Code中打开上一篇文章中构建好的应用。首先修改 package id。

修改 package id

打开应用根目录下的 config.xml 文件，将根元素(wedget)的id属性改为要发布的应用的 package id, 在例子中设置为: “info.mls-tech.ionic.starter”

1
2
3

...
<widget id="info.mls-tech.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
...

注意:同时需要改变 platforms/android/app/src/main/res/xml/config.xml 文件中的同一个设置（如果已经生成了android 应用)

Build 项目

运行以下命令 build 项目：(注意:在 build 之前请确保环境变量 ANDROID_SDK_ROOT 已经被正确的设置)

1	ionic cordova build android

build成功后系统会显示

...
> Task :app:assembleDebug
> Task :app:cdvBuildDebug

BUILD SUCCESSFUL in 1m 20s
42 actionable tasks: 42 executed
Built the following apk(s):
        E:\todo-ionic-app\platforms\android\app\build\outputs\apk\debug\app-debug.apk

在真实设备上运行项目

连接 Android 手机到电脑上，开启USB调试功能。然后在电脑上运行以下命令:

1	ionic cordova run android -l

系统显示:

INFO] Hardware device(s) found for android. Using --device.
> ng.cmd run app:ionic-cordova-serve --host=localhost --port=8100 --platform=android
[INFO] Waiting for connectivity with ng...

[INFO] Development server running!

       Local: http://localhost:8100

       Use Ctrl+C to quit this process

> cordova.cmd build android --device
[ng] Date: 2019-07-25T03:38:25.271Z
[ng] Hash: 6439ee0c04ed80ee7a17
[ng] Time: 12255ms
[ng] chunk {common} common.js, common.js.map (common) 14.2 kB  [rendered]
[ng] chunk {cordova} cordova.js, cordova.js.map (cordova) 62.4 kB [entry] [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) 7.99 kB  [rendered]
[ng] chunk {main} main.js, main.js.map (main) 24.1 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) 67.6 kB [initial] [rendered]
[ng] chunk {vendor} vendor.js, vendor.js.map (vendor) 4.59 MB [initial] [rendered]
[INFO] ... and 95 additional chunks
[ng] i ｢wdm｣: Compiled successfully.
> native-run.cmd android --app platforms\android\app\build\outputs\apk\debug\app-debug.apk --device --forward 8100:8100
[native-run] Selected hardware device xxxxxxxxxxxx
[native-run] Forwarded device port 8100 to host port 8100
[native-run] Installing platforms\android\app\build\outputs\apk\debug\app-debug.apk...
[native-run] Starting application activity info.mls_tech.ionic.starter/info.mls_tech.ionic.starter.MainActivity...
[native-run] Run Successful

然后就可以看到在真机上运行的效果，并开始真机测试。