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