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的時候會用到，前期在瀏覽器環境測試開發暫時用不到)

1、         安裝node.js

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

 

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

通過淘寶鏡像安裝cnpm：

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

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

 

配置npm國內鏡像：

因為國內的網絡環境原因，在用npm下載安裝各種包的時候經常會遇到無法正常下載的情況。所以我們需要將npm指向淘寶鏡像 。cmd中分步輸入以下內容：

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

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

3、清空緩存：npm cache clean

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

 

 

3、         用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查看版本號以及是否安裝成功。

 

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

官網下載最新版JDK：

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

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

 

 

5、         安裝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（根據自己情況改）

執行命令后會要求你輸入一堆東西，根據自己情況輸入，注意兩點：1、輸入密碼口令的時候是看不見的，盡管寫就行，寫完就回車，不過要記住這個密碼，后面要用；2、最后讓你確認信息的時候要輸入“是”。完成后看一下相應目錄下有沒有簽名文件。然后把該文件復制到你的項目中的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)