前顏（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