前颜（yan）

最近公司有一个项目需求是利用h5进行跨平台开发，这里所说的跨平台开发指的是：将h5代码利用某种方式或工具环境进行打包，最后生成android的apk以及ios的ipa。
本文只讲解android开发环境，等以后有空了再介绍一篇关于ios的。

一、知识讲解

本文基于ionic4+cordova构建android应用，首先做一下以下的知识梳理。

1 ionic是一套用于开发混合手机应用的开源h5框架，包含一套适合于mobile application的ui组件库以及相关访问原生设备的native接口等。目前ionic已更新至ionic4，ionic4的特色在于兼容angular6以及rxjs6，有着angular6的特点，因此，angular的开发者可以很容易的切换到ionic4的开发。
ionic官方文档：https://beta.ionicframework.com/docs/intro

2 cordova是一套开源的移动应用开发框架。cordova能够利用web应用（如ionic构建的h5应用）构建android工程以及ios工程（今天只讲android工程）。并且可以编译android工程，最后生成android apk。
cordova官方文档：https://cordova.apache.org/docs/en/latest/guide/overview/index.html

3 android sdk
cordova在编译android工程的时候需要有android sdk等开发环境的支持。如果想对ionic和cordova更加详细的了解，请见官方文档。

接下来，开始搭建开发环境。
因此，综上所述，需要搭建的开发环境有：ionic、cordova以及android 开发环境。

我的开发环境如下（仅供参考）：
node：v8.11.1
npm：5.5.1
ionic：4.0.3
cordova：8.0.0
jdk：1.8.0_45
gradle：4.9

二、安装nodejs

首先你都懂的，要装个node环境，因为Ionic和cordova的安装以及后续的许多前端工具的安装都依赖于node的包管理器npm。
建议安装最新版本的node。
没有装过的请看安装教程：
http://www.runoob.com/nodejs/nodejs-install-setup.html

三、安装ionic

1 安装全局的ionic cli：
npm install -g ionic

2 检测ionic是否安装成功：
ionic -v

3 创建ionic项目
安装成功后，即可通过ionic cli命令创建ionic项目：
ionic start myApp tabs --type=angular

（注意：目前ionic4是beta版，需要加上 --type=angular才能创建基于angular的项目，后面等发布正式版本，估计就不需要了）

说明：上面命令中tabs是ionic的其中一个模板，可以通过 ionic start --list 查看可选的模板。
比如： ionic start myApp blank --type=angular 可以创建空白模板的ionic项目

4 下载ionic项目的node_modules包
在第三步创建ionic项目的过程中，ionic cli会自动帮你下载依赖的node_modules包（可以通过package.json查看项目所依赖的包），
如果下载失败的话，可以删除node_modules文件夹，手动安装：npm install

5 运行ionic项目： ionic serve
ionic项目本身就是一个web h5项目，因此可以像vue、angular一样运行于浏览器。
好了，ionic项目搭建成功后，接下来搭建cordova环境，然后利用cordova把ionic项目构建android工程。

四、安装cordova

1 安装全局的cordova：
npm install -g cordova

2 检测cordova是否安装成功：
cordova -v

3 构建android工程
1） 查看支持的平台以及版本：ionic cordova platform ls
2） 构建android platform：ionic cordova platform add android

说明：此步骤会修改ionic的目录结构，让ionic支持cordova。构建成功后，会在platforms目录下生成一个android工程。

其他cordova命令：
移除android工程：ionic cordova platform remove android
添加指定版本的android工程：ionic cordova platform add android@6.0.0

至此，cordova环境已经搭建完成，并且利用ionic生成了一个android工程（位于/platforms/android）。
但是此时还不能通过cordova编译该android工程，因为cordova编译android工程需要有android sdk的开发环境。所以，接下来配置android sdk环境。

五、配置android sdk环境

1 安装jdk（下载、解压、配置环境变量）
安装jdk可以参考这篇文章的jdk章节：
https://blog.csdn.net/love4399/article/details/77164500
用cmd 运行 javac -version 检查是否安装成功

2 安装android-sdk（下载、解压、配置环境变量）
安装android-sdk可以参考这篇文章的android-sdk章节：
https://blog.csdn.net/love4399/article/details/77164500
用cmd 运行 adb --version 检查是否安装成功

3 安装gradle（下载、解压、配置环境变量）
安装安装gradle可以参考这篇文章：
https://jingyan.baidu.com/article/00a07f38706f0b82d028dcf3.html
用cmd 运行 gradle -v 检查是否安装成功

以上环境搭建成功之后，即可通过cordova命令进行编译：ionic cordova build android，编译成功之后，会在/myApp/platforms/android/app/build/outputs/apk/debug目录下生成一个 xxx.apk。

六、构建第一个android应用

至此，一个android apk就生成啦。
最后总结一下利用ionic4+cordova构建android应用的过程：
1 ionic start myApp blank--type=angular （创建ionic项目）
2 ionic cordova platform add android （添加android平台）
3 ionic cordova build android （编译生成apk）
是不是很简单，前提是以上环境都已经搭建好了。

参考文档：
1）cordova：https://baike.baidu.com/item/Cordova/9192368?fr=aladdin
2）ionic：https://baike.baidu.com/item/ionic/1326386?fr=aladdin
3）ionic开发android app步骤
4）2017年Android SDK下载安装及配置教程：https://blog.csdn.net/love4399/article/details/77164500