ionic2新手入門整理，搭建環境，建立demo，打包apk，熱更新，優化啓動慢等避坑詳解

onic官方文檔連接：http://ionicframework.com/docs/ 

若是是新的環境會有不少坑，主要是有牆，請仔細閱讀每一個步驟

 

文檔包含如下內容：

l  環境搭建

l  建立demo並調試運行

l  打包APK

l  添加支持熱更新

l  優化啓動慢問題

l  經常使用命令

 

 1.      環境搭建

須要安裝如下軟件和插件（Android）：

l  安裝Node

l  配置cnpm  （使用淘寶鏡像取代npm）

l  安裝cordova和ionic2

l  安裝JAVA JDK

l  安裝Android SDK(在項目打包安卓app的時候會用到，前期在瀏覽器環境測試開發暫時用不到)

一、         安裝node.js

登陸node.js官網 https://nodejs.org/en/download/，下載對應系統版本，注意一點ionic2的開發需求Node版本要大於v6，通常下載最新正式版。安裝完成後，檢測是否成功配置了Node，打開命令提示符：按下Win+R -> 輸入"cmd" -> 輸入命令 node -v，有顯示版本號即表示安裝成功。輸入npm –v順便查看npm是否安裝成功以及版本號。Node 的環境會自動配置，安裝完成就OK，無需手工配置。

 

二、         安裝cnpm並配置npm國內鏡像

經過淘寶鏡像安裝cnpm：

        npm install -g cnpm --registry=https://registry.npm.taobao.org

        須要注意一點就是cnpm 不支持 publish 命令。

 

配置npm國內鏡像：

由於國內的網絡環境緣由，在用npm下載安裝各類包的時候常常會遇到沒法正常下載的狀況。因此咱們須要將npm指向淘寶鏡像 。cmd中分步輸入如下內容：

一、註冊模塊鏡像：npm set registry https://registry.npm.taobao.org/

二、編譯依賴的node的源碼鏡像：npm set distury https://npm.taobao.org/dist

三、清空緩存：npm cache clean

最後查看一下npm配置列表是否已經指向淘寶鏡像：npm config list

 

 

三、         用cnpm安裝cordova和ionic2

先安裝cordova：cnpm install –g cordova@6 （安裝6.x版本，我用7.x版本給項目添加Android平臺會報錯，不知道是否是個例，沒有作其餘測試）。安裝完成輸入cordova –v查看版本號以及是否安裝成功（第一次使用cordova命令時會跳出個選擇問你是否打小報告，自行選擇y或n，通常選y以協助官方對產品進行改進）。

而後安裝ionic2：cnpm install –g ionic@2（安裝2.x版本，目前官方已經升級到3.x）。這兩個安裝完成會顯示All packages installed…字樣。輸入ionic –v查看版本號以及是否安裝成功。

 

四、         安裝JAVA JDK（無需配置環境）

官網下載最新版JDK：

http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

下載完成，一路下一步就能夠了，安裝完成輸入java –version看一下是否安裝成功以及版本號。

 

 

五、         安裝Android SDK並配置環境

官網下載SDK（下載連接，可複製到迅雷直接下載）：

https://dl.google.com/android/installer_r24.3.4-windows.exe

安裝的時候複製一下安裝路徑，等下配置環境變量要用，或者能夠自定義路徑，個人裝在 C:\Android\SDK  不要有中文目錄，而後一路下一步。

 

 

最後點擊Finish的時候會打開Android SDK Manager，這是下載相關工具用的，在剛纔安裝的SDK目錄下也可直接打開SDK Manager.exe，若是遇到打不開的狀況請用管理員運行。

如今開始選擇下載須要用到的工具：

因爲國內沒法訪問google服務器，因此這裏也須要配置國內鏡像： 

選擇Tools - Options 打開設置界面

 

以下圖分別填入mirrors.neusoft.edu.cn 端口80，並勾選 「Force https://... sources to be fetched using http://... 」，單擊Close關閉

 

而後點擊Packages –> Reload 從新加載一下：

 

下一步開始選擇下載工具包：這裏千萬注意只勾選須要的，若是全選會下載二十幾G的東西… ，注意ionic2.3.0已要求API25，因此選Android版本爲Android 7.1.1（API25）這裏面的SDK Platform。

先把全部的勾選去掉，而後按以下標紅步驟操做便可 

 

 

 

靜等安裝完成…… 

附加：項目集成Crosswalk須要勾選Extras下的Android Support Repository和Google Repository不然會報錯 
 

 

安裝完成後開始配置安卓環境變量：

個人電腦 –> 右鍵屬性 -> 高級系統設置 -> 環境變量 

新建變量名：ANDROID_HOME         

變量值 ：C:\Android\SDK  （你剛纔複製的sdk路徑）

而後在path裏添加(前面注意加一個分號)   
;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools

Win10的話就分兩條新建，不須要分號。

配置完成點擊肯定便可。

最後在cmd裏輸入android -h看到正常顯示安卓的命令就表示已經安裝配置成功 

 

 2.      建立demo並調試運行

建立ionic2項目：

打開cmd，先cd到你須要存放項目的目錄，因爲牆的問題，這裏咱們仍是要分步執行，否則會卡在下載的地方或者會報錯

 

而後執行命令建立app目錄：

ionic start yourAppName tutorial --v2 --skip-npm

這裏yourAppName就是你的項目名；tutorial爲ionic預約義的一個模板，這個是側邊滑出列表的模板，還有一個就是tabs模板（默認），這個是頁面底部有一個tab能夠切換的模板，還有一個空白模板blank；--v2爲ionic2，不寫默認爲ionic1；--skip-npm表示跳過npm安裝。過程會讓你選擇是否建立賬號來分享和測試項目，選擇n而後回車。

 

而後cd到你的app目錄下，執行 cnpm install

 

看到All packages installed 就表示項目已經建立完成。

 

執行 ionic serve ，此時編譯服務器打開，把原代碼編譯成網頁代碼保存在www目錄下，並用瀏覽器打開該目錄中的index。

 

在硬盤中找到yourAppName 目錄裏的src文件夾，這就是咱們主要的工做目錄，用vscode或者webstorm打開這個文件夾就能夠開始你的工程了。提示一點：這裏的代碼通過編譯服務器編譯後會生成www目錄下的前端代碼（未壓縮），當你執行打包的時候，ionic會自動把www目錄裏的相關文件進行壓縮並打包成對應的平臺app。

 

關於更多src，請移步：

https://yanxiaodi.gitbooks.io/ionic2-guide/content/tutorial/%E9%A1%B9%E7%9B%AE%E7%BB%93%E6%9E%84.html

或者ionic 的官方文檔

 

 

1. 3.      打包APK

cd到你的項目目錄下，首先要執行的是給項目添加對應的打包平臺（Android或IOS）：

 ionic platform add android

 

 添加完平臺後項目目錄下會有platforms文件夾

可經過命令  cordova platform ls 顯示已經安裝的平臺項目以及可安裝的平臺

 

要注意若是項目添加了安卓平臺，要打包成蘋果平臺的時候須要先把安卓平臺刪掉，在項目目錄下執行命令：

cordova platform rm android或者ionic platform rm android

 

下方高能高能警惕：因爲國內網絡環境緣由，在執行打包命令前須要作一些處理，打包須要用到gradle 插件，直接執行打包命令比較大概率會下載不了或者下載超級慢或者各類報錯，因此咱們要先下載好這個插件，作一些配置，而後再執行打包命令。

Gradle下載連接：https://services.gradle.org/distributions/

Ionic2項目要求好像都是2.14.1這個版本，下載2.14.1（建議複製到迅雷）：

 

下載完成不用解壓，直接拷貝到你項目的下面這個路徑：

 

..\yourAppName\platforms\android\gradle （新項目沒有gradle文件夾，須要新建一個，名字不要錯了）

 

而後修改配置： 在目錄.. \yourAppName\platforms\android\cordova\lib\builders下找到下面這個文件，用你的代碼編輯器打開：

 

 

找到第189行，把

https\\://services.gradle.org/distributions/gradle-2.14.1-all.zip

修改成

../gradle-2.14.1-all.zip

 

改成：

 

保存關閉，回到cmd，在項目目錄下執行ionic build android

如今沒有設置簽名文件，因此打包出來的是不帶簽名的，調試能夠用這個方式打包。首次打包會下載一大堆東西，大概須要一到兩個小時（運氣好網絡通暢會快些），因此耐心等待，儘可能不要中途關閉重來，容易出錯。

打包完成後在項目的\platforms\android\build\outputs\apk路徑下就能夠找到一個打包好的apk了。此時www目錄下的文件也已經被壓縮好了

IOS平臺的打包相似，可是須要在蘋果系統下用xcode來打包，須要安裝到蘋果手機還要申請簽名什麼的，稍微麻煩些。

 

       生成簽名並給app添加簽名:

生成簽名須要用到兩個工具：keytool和jarsigner，這兩個工具分別在在前面安裝的C:\Program Files\Java\jdk1.8.0_131\jre\bin 和

C:\Program Files\Java\jdk1.8.0_131\bin （根據你安裝java jdk的路徑找）

把上兩個軟件所在的目錄添加到環境變量path後，打開cmd輸入，cd到你須要保存這個key的目錄下：

keytool -genkey -alias demo.keystore -keyalg RSA -validity 40000 -keystore demo.keystore

說明：-genkey 產生密鑰

    -alias demo.keystore 設置別名爲demo.keystore（根據本身狀況改）

 

    -keyalg RSA 使用RSA算法對簽名加密

    -validity 40000 有效期限4000天

   -keystore demo.keystore 設置簽名文件名爲demo.keystore（根據本身狀況改）

執行命令後會要求你輸入一堆東西，根據本身狀況輸入，注意兩點：一、輸入密碼口令的時候是看不見的，儘管寫就行，寫完就回車，不過要記住這個密碼，後面要用；二、最後讓你確認信息的時候要輸入「是」。完成後看一下相應目錄下有沒有簽名文件。而後把該文件複製到你的項目中的platforms/android目錄下，而且新建一個文件release-signing.properties。用記事本打開，寫入如下內容：

 

 

說明：

storeFile=簽名文件包括路徑（這裏用相對路徑便可）

key.store.password=簽名文件密碼

key.alias=簽名文件的別名

key.alias.password=別名密碼

把密碼寫在文件裏能夠方便操做，可是會暴露了你的密碼！正式開發儘可能不要把兩個密碼寫在文件裏！

作完以後就能夠打包正式簽名的Android apk了：

在項目目錄下執行 ionic build android -–prod –-release

說明：--prod 爲ionic提供的一種打包方式，能夠加快app開啓速度，--release爲打包簽名

 

1. 4.      添加支持熱更新

先安裝熱更新插件：

cnpm install -g cordova-hot-code-push-cli

cd到項目目錄下給項目添加插件：

ionic plugin add cordova-hot-code-push-plugin

執行：

cordova-hcp server

會在www文件夾中生成 兩個文件：chcp.json和chcp.manifest，chcp.json文件主要是插件的配置信息，chcp.manifest文件則是www目錄下各文件的hash值參照表。

在App根目錄下面新建文件cordova-hcp.json，內容以下：

{

"autogenerated": true,

"content_url": "http://www.yourserver.com/hotcodepush/www",

"update": "start"

}

注意：這裏的http://www.yourserver.com...均指你的存放熱更新文件的服務器地址！

將www目錄下的.chcpenv文件修改成你的服務器：

{

"content_url": "http://www.yoursever.com/hotcodepush/www",

"config_url": "http://www.yourserve.com/hotcodepush/www/chcp.json"

}

在config.xml文件<widget>標籤中添加：

<chcp>

<local-development enabled="true"/>

<config-file url="http://www.yourserve.com/hotcodepush/www/chcp.json">

</chcp>

到此打包好APK安裝到手機上。

 

查看是否實現熱更新：

修改src裏的內容，而後從新編譯；編譯後打包apk或者執行ionic run android把www裏面的代碼壓縮以後，再執行cordova-hcp build，而後把www目錄複製到你的服務器上，退出APK再打開，看看後臺作的修改是否在apk裏跟着改變了。（也能夠直接修改www目錄下的文件內容，主要是修改main.js裏的東西而後執行cordova-hcp build，再把www複製到服務器看看修改效果）

 

1. 5.      優化啓動慢問題

手動控制splashscreen的關閉時間

1. 在config.xml文件中添加以下內容：      <preference name="AutoHideSplashScreen" value="false" />  

 <preference name="FadeSplashScreenDuration" value="1000" />  

 <preference name="SplashScreen" value="screen" />  

 <preference name="ShowSplashScreen" value="true" />  

 <preference name="ShowSplashScreenSpinner" value="false" />  

 <preference name="SplashShowOnlyFirstTime" value="false" />  

 <preference name="FadeSplashScreen" value="true" />  

 

1. 在app.component.ts中添加內容：

 platform.ready().then(() => {  

(<any>window).navigator.splashscreen.hide();

}  

注意：要在platform.ready()以後執行

1. 6.      經常使用命令

npm install -g cnpm --registry=https://registry.npm.taobao.org（npm鏡像源指向淘寶） 
cnpm install -g cordova@6 ionic@2（安裝cordova 6.x和 ionic 2.x） 

cnpm install -g cordova ionic（安裝最新版cordova ionic）
cnpm update -g cordova ionic（更新cordova ionic） 
ionic -help（查看幫助） 
ionic -v（查看版本）

cordova -v （查看版本）

ionic start yourAppName tutorial --v2 --skip-npm（建立項目並跳過npm安裝使用cnpm安裝步驟1）

cnpm install（建立項目並跳過npm安裝使用cnpm安裝步驟2）

ionic start myApp blank –-v2（空項目） 
ionic start myApp tabs –-v2（帶導航條） 
ionic start myApp tutorial –-v2（帶側滑菜單） 

ionic platform add android（添加android平臺） 
ionic platform rm android（移除android平臺） 

cordova platform ls（查看項目已安裝平臺）

ionic build android（編譯項目apk） 

ionic build android -–prod –-release （用--prod編譯項目apk並簽名）
ionic emulate android（運行項目apk 手機鏈接在手機運行 模擬器鏈接在模擬器運行） 
ionic run android （至關於build + emulate） 
ionic serve（開啓服務調試） 

ionic g page yourPageName (快速建立新頁面，頁面名爲yourPageName)