博客 / 詳情

返回

Angular/Ionic安裝配置彙總

一、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

user avatar
0 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.