基于ionic4、cordova搭建android开发环境

前颜（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
--------------------- 
作者：simple小东 
来源：CSDN 
原文：https://blog.csdn.net/simple__dream/article/details/82119920 
版权声明：本文为博主原创文章，转载请附上博文链接！