一、NodeJS
Angular和Cordova/Ionic都使用cli工具開發,因此必須先安裝最新版本的NodeJS。NodeJS裏面包含npm包管理器,而Angular/Ionic本身和程序依賴的庫和框架都是npm包,要進行Angular/Ionic開發首先需要安裝npm包管理器。
NodeJS的官網下載頁:https://nodejs.org/en/download/
安裝NodeJS的時候把npm一起安裝就可以。
也可以安裝yarn,下載依賴包的速度和穩定性會提升很多。可以參考 https://yarn.bootcss.com/
二、使用npm的淘寶鏡像
直接下載npm庫會很慢,很多時候會不成功。國內用户可以使用淘寶的npmjs.org鏡像,加快下載速度。
淘寶鏡像的官方使用説明在:https://npm.taobao.org/
官方的建議是安裝cnpm代替npm,或者添加一個叫cnpm的別名。另一個方法是不使用cnpm,而是修改npm的默認鏡像:
npm config set registry http://registry.npm.taobao.org/
如果想修改回默認的版本,可以這樣:
npm config set registry https://registry.npmjs.org/
用 npm get registry 可以查看現在使用的是哪個鏡像。
如果安裝了yarn,可以這樣設置鏡像:
yarn config set registry http://registry.npm.taobao.org/
三、Angular安裝
npm install -g @angular/cli
可參考官網:https://angular.cn/guide/quic...
cli命令可以參考:https://angular.cn/cli
四、Ionic4安裝
安裝cli: npm install -g ionic
Ionic cli的文檔:https://ionicframework.com/do...
Ionic Native提供使用Angular風格調用原生組件的方法。
Ionic native的文檔:https://ionicframework.com/do...
五、Ionic3安裝
1.安裝Ionic和Cordova的CLI
npm install -g ionic cordova
npm可以先安裝或者配置淘寶鏡像。
2.新建項目
在命令行中,進入項目目錄的上級目錄,然後執行 以下命令:
ionic start TestIonic tabs
其中,TestIonic是項目名,也是目錄名,命令執行成功後,會自動在當前目錄下創建一個名叫TestIonic的子目錄,就是新建項目的目錄。
後面的tabs表示新建項目的模板,tabs模板3個tab的佈局,也可以使用其他官方模板:
tabs : a simple 3 tab layout
sidemenu: a layout with a swipable menu on the side
blank: a bare starter with a single page
super: starter project with over 14 ready to use page designs
tutorial: a guided starter project
此命令可能會出現網絡連接錯誤:
[ERROR] Network connectivity error occurred, are you offline?
If you are behind a firewall and need to configure proxy settings, see: https://ionicframework.com/docs/cli/configuring.html#using-a-proxy
解決方案,執行以下命令配置npm代理:
npm config set proxy= https://registry.npm.taobao.org
npm config set https_proxy=https://registry.npm.taobao.org
然後設置ionic的代理:
npm install -g @ionic/cli-plugin-proxy
添加環境變量 IONIC_HTTP_PROXY 值為代理服務器地址,比如
https://registry.npm.taobao.org
3.運行項目
ionic serve
複製地址到谷歌瀏覽器,然後按下F12,按左上角第二個按鈕切換到手機模式,可以調試項目。
4.打包
打包android app,需要先安裝gradle(網上説法如此,但實際編譯過程中沒有看到ionic使用了安裝的gradle,反而自己下載了一個gradle)和android sdk,可參考https://blog.csdn.net/qq_2026...。
ionic cordova build android --release --prod
上面命令可以打包成為android apk,並且在輸出提示中顯示apk文件的位置。
ionic cordova run android
上面命令生成apk文件並且直接安裝到安卓手機上,但安卓手機必須用usb連接PC,而且進入開發者模式,啓用usb調試,並且安裝的時候一般需要在手機上做確認,否則安裝失敗。
ionic cordova emulate android
上面命令生成apk文件並且安裝到安卓模擬器上運行,最好先啓動安卓模擬器,如果沒有啓動安卓模擬器,ionic會自動啓動缺省的安卓模擬器。
另外,上面兩個命令也可以用cordova版本例如:
cordova run android
cordova emulate android
效率更高,不過事先必須先調用過ionic cordova build。
另外,以上ionic命令都可以加上選項-lc:
ionic cordova emulate android -lc
選項-lc有兩個作用,一個是把console.info等輸出信息輸出到命令行上;另一個是可以使配置文件ionic.config.json中的proxies生效。
注意,-lc選項雖然可以讓proxies生效,但只能用於調試,正式安裝運行是無效的,需要用環境變量來控制。
5.android簽名
運行
ionic cordova build android --release --prod
之後,在命令行輸入以下命令:
keytool -genkey -v -keystore testionic.keystore -alias testionic.keystore -keyalg RSA -validity 36500
jarsigner -verbose -keystore testionic.keystore -signedjar tionic.apk app-release-unsigned.apk testionic.keystore
zipalign -v 4 txx.apk txx_aligned.apk
其中keytool和jarsigner是jdk的工具,需要配置jdk的path。zipalign是android sdk的工具,需要在android sdk下搜索其具體路徑,但這個命令不一定需要執行,只是優化。
也可以直接在cordova build中直接簽名
ionic cordova build android --release --prod -- -- --minSdkVersion=22 --keystore=testionic.keystore --alias=testionic.keystore --storePassword=123456 --password=123456