可參考鏈接（僅參考）：

• ionic官方文檔鏈接：http://ionicframework.com/docs/
• ionic2打包詳解：https://segmentfault.com/a/1190000010194942
• ionic3打包詳解：https://www.cnblogs.com/chenglu/p/8608121.html
• ionic3打包：https://blog.csdn.net/qq_20264891/article/details/79319408
• node.js安裝教程：http://www.reibang.com/p/03a76b2e7e00
• ionic博客：點我了解一下

我的環(huán)境版本：

• node.js: 8.12.0
• jdk: 1.8.0_181
• cordova:6.5.0
• ionic:2.0.0

相關(guān)軟件：

連接：百度云連接

密鑰：8083

主要流程:

安裝node.js --> 安裝jdk --> 安裝AndroidSDK --> 安裝cordova --> 安裝ionic --> 創(chuàng)建項目 --> 編譯項目apk

一予权、 軟件安裝

• 安裝nodeJS（自帶npm）
• 配置cnpm （使用淘寶鏡像取代npm）
• 安裝cordova和ionic2
• 安裝JAVA JDK
• 安裝Android SDK(在項目打包安卓app的時候會用到昂勉，前期在瀏覽器環(huán)境測試開發(fā)暫時用不到)

1、安裝node.js

• 相關(guān)軟件都在上面給的百度云鏈接中扫腺。如果要自己下載岗照，可以去node.js官網(wǎng) 下載對應系統(tǒng)版本，注意一點ionic2的開發(fā)需求Node版本要大于v6，一般下載最新正式版攒至。
• 安裝完成后厚者，檢測是否成功配置了Node，打開命令提示符：按下Win+R -> 輸入"cmd" -> 輸入命令 node -v迫吐，有顯示版本號即表示安裝成功库菲。輸入npm –v檢查安裝版本。
• 在安裝的node.js文件夾下新建node_cache和node_global文件夾志膀。
• 創(chuàng)建完成后打開cmd熙宇，輸入：

  npm config set prefix "你的node_global路徑"
  npm config set cache "你的node_cache路徑"

• 設(shè)置環(huán)境變量：在系統(tǒng)變量中，新建 --> 變量名為：NODE_PATH,變量值為：node_global下面的node_modules的絕對路徑溉浙。在用戶變量的path中添加node_global的絕對路徑奇颠，主要前后的英文分號。

2放航、安裝淘寶鏡像cnpm

  npm install -g cnpm --registry=https://registry.npm.taobao.org
  
  需要注意一點就是cnpm 不支持 publish 命令。
  

配置npm國內(nèi)鏡像：

因為國內(nèi)的網(wǎng)絡(luò)環(huán)境原因圆裕，在用npm下載安裝各種包的時候經(jīng)常會遇到無法正常下載的情況广鳍。所以我們需要將npm指向淘寶鏡像 。cmd中分步輸入以下內(nèi)容：

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

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

(3)、清空緩存： npm
最后查看一下npm配置列表是否已經(jīng)指向淘寶鏡像：npm config list

3行拢、用cnpm安裝cordova和ionic2

    先安裝 cordova：cnpm install -g cordova@6.5.0
    再安裝 ionic: cnpm install -g ionic@2.0.0

注意：安裝6.x版本祖秒，我用7.x版本給項目添加Android平臺會報錯，不知道是不是個例舟奠，沒有做其他測試）竭缝。安裝完成輸入cordova –v查看版本號以及是否安裝成功（第一次使用cordova命令時會跳出個選擇問你是否打小報告，自行選擇y或n沼瘫，一般選y以協(xié)助官方對產(chǎn)品進行改進）抬纸。
這兩個安裝完成會顯示All packages installed…字樣。輸入ionic –v查看版本號以及是否安裝成功耿戚。

4湿故、 安裝JAVA JDK

同樣的百度云網(wǎng)盤中有或JDK官網(wǎng)下載。下載完成膜蛔，一路下一步就可以了坛猪，安裝完成輸入java –version看一下是否安裝成功以及版本號。安裝路徑最好建一個文件夾皂股，和等會的sdk放在一起墅茉，方便找。注意，路徑中不能有中文躁锁。

這里也是需要配環(huán)境變量的纷铣，想知道配成功沒有，可以在cmd命令窗口輸入 javac -v战转，如果說命令不存在搜立，則沒有配置成功

• 系統(tǒng)變量下
• JAVA_HOME 你的jdk安裝的位置（D:\Work\Develop\java\jdk1.8.0_181）
• classpath .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar 2 ----千萬別少了前面那個點
• path的后面添加上面jdk路徑加上的/bin，前面記得沒有分號的加一個分號（D:\Work\Develop\java\jdk1.8.0_181\bin）

5槐秧、安裝SDK（需要配環(huán)境變量）

• 同樣的百度云網(wǎng)盤中有或SDK官網(wǎng)下載啄踊。最后點擊Finish的時候會打開Android SDK Manager，這是下載相關(guān)工具用的刁标，在剛才安裝的SDK目錄下也可直接打開SDK Manager.exe颠通，如果遇到打不開的情況請用管理員運行。
• 翻墻安裝插件
  打開界面上的Tools,選擇options膀懈，先配置國內(nèi)鏡像：
  域名千萬不要輸入http或者https協(xié)議前綴顿锰，
  mirrors.neusoft.edu.cn

1.png

回到主界面，點packages再點reload
按照下面的勾選（Android SDK Tools,Android SDK platform-tools,Android SDK Build-tools）：

2.png

3.png

注意：ionic2.3.0已要求API25启搂，所以選Android版本為Android 7.1.1（API25）這里面的SDK Platform硼控。

附加：項目集成Crosswalk需要勾選Extras下的Android Support Repository和Google Repository否則會報錯

點右下角 install packages 來安裝，耐心等待即可胳赌。

• 安裝完成后開始配置安卓環(huán)境變量：

我的電腦 –> 右鍵屬性 -> 高級系統(tǒng)設(shè)置 -> 環(huán)境變量 -> 系統(tǒng)環(huán)境變量

新建變量名：ANDROID_HOME

變量值 ：你的sdk安裝的路徑

然后在系統(tǒng)變量path里添加(前面注意加一個分號)
;%ANDROID_HOME%platform-tools;%ANDROID_HOME%tools

Win10的話就分兩條新建牢撼，不需要分號。

配置完成點擊確定即可疑苫。

最后在cmd里輸入android -h看到正常顯示安卓的命令就表示已經(jīng)安裝配置成功

二熏版、創(chuàng)建demo

<1>、

cd到要放置app的目錄下捍掺，執(zhí)行：

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

這里yourAppName就是你的項目名撼短；tutorial為ionic預定義的一個模板，這個是側(cè)邊滑出列表的模板乡小，還有一個就是tabs模板（默認）阔加，這個是頁面底部有一個tab可以切換的模板，還有一個空白模板blank满钟；--v2為ionic2胜榔，不寫默認為ionic1；--skip-npm表示跳過npm安裝湃番。過程會讓你選擇是否創(chuàng)建帳號來分享和測試項目夭织，選擇n然后回車。

<2>吠撮、

然后cd到你的app目錄下尊惰，執(zhí)行

cnpm install

看到All packages installed 就表示項目已經(jīng)創(chuàng)建完成。

<3>、

執(zhí)行 ionic serve 弄屡，此時編譯服務(wù)器打開题禀，把原代碼編譯成網(wǎng)頁代碼保存在www目錄下，并用瀏覽器打開該目錄中的index膀捷。一般會自動打開網(wǎng)頁迈嘹，并顯示相關(guān)頁面內(nèi)容

• 打包APK，cd到項目的目錄下全庸，首先要執(zhí)行的是給項目添加對應的打包平臺（Android或IOS）

  ionic platform add android
  添加完平臺后項目目錄下會有platforms文件夾

4.png

可通過命令 cordova platform ls 顯示已經(jīng)安裝的平臺項目以及可安裝的平臺

要注意如果項目添加了安卓平臺秀仲，要打包成蘋果平臺的時候需要先把安卓平臺刪掉，在項目目錄下執(zhí)行命令：
cordova platform rm android或者ionic platform rm android

<4>壶笼、

下方高能高能警戒：由于國內(nèi)網(wǎng)絡(luò)環(huán)境原因神僵，在執(zhí)行打包命令前需要做一些處理，打包需要用到gradle 插件覆劈，直接執(zhí)行打包命令比較大幾率會下載不了或者下載超級慢或者各種報錯保礼，所以我們要先下載好這個插件，做一些配置责语，然后再執(zhí)行打包命令氓英。
Gradle下載地址,我的百度云鏈接里已經(jīng)有了。下載的話要下載2.14.1版本的鹦筹。
下載完不用解壓，直接放到下圖的文件夾里：

5.png

注意：新項目沒有g(shù)radle這個文件夾址貌，需要新建一個铐拐，文件名不要寫錯。

<5>练对、

修改配置
找到下面路徑下的 GradleBuilder.js文件

6.png

用代碼編輯器打開 GradleBuilder.js：

將：

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

改為：

../gradle-2.14.1-all.zip

如下圖：

將：

7.png

改為：

8.png

保存遍蟋，關(guān)閉。

<6>螟凭、Build

如果之前有過安卓工程的,然后復制一份代碼出來的,需要執(zhí)行如下幾個操作:
首先刪除項目目錄下的node_modules
再執(zhí)行:npm cache clean
最后執(zhí)行:npm install

如果出現(xiàn)缺少module什么的,只需在安裝sdk的位置找到SDK Manager,安裝加載報錯中提到缺少的sdk即可.

回到項目目錄下虚青，執(zhí)行 ionic build android

現(xiàn)在沒有設(shè)置簽名文件，所以打包出來的是不帶簽名的螺男，調(diào)試可以用這個方式打包棒厘。首次打包會下載一大堆東西，大概需要一到兩個小時（運氣好網(wǎng)絡(luò)通暢會快些）下隧，所以耐心等待奢人，盡量不要中途關(guān)閉重來，容易出錯淆院。

打包完成后在項目的platformsandroidbuildoutputsapk路徑下就可以找到一個打包好的apk了何乎。此時www目錄下的文件也已經(jīng)被壓縮好了。

9.png

IOS平臺的打包類似，但是需要在蘋果系統(tǒng)下用xcode來打包支救，需要安裝到蘋果手機還要申請簽名什么的抢野，稍微麻煩些。

關(guān)于app的啟動頁面各墨，需要注意如下幾點

• 1指孤、把項目下的一個叫resources的文件夾中的內(nèi)容刪除，替換成自己的圖片
• 2欲主、圖片分為兩個邓厕，icon是顯示在桌面的圖標,splash是啟動app時的啟動頁面
• 3、這里的一個巨坑是這兩個圖片的大小一定是按照規(guī)格來的扁瓢，不僅尺寸大小揩晴，占容量大小也要注意迎吵。
  • icon.png:最小尺寸為192192 （最好是10241024的)
    不帶圓角
    格式為 png、psd、ai
  • splash:最小尺寸為22082208
    中間尺寸（因為涉及到縮放和裁剪萎馅，邊緣可能需要留白，不要放置內(nèi)容） 12001200
    格式為 png退敦、psd越驻、ai
• 4、項目目錄下執(zhí)行ionic resources楣铁，即可自動生成
• 5玖雁、在config.xml中的 SplashScreenDelay 的 value 值是啟動時頁面的時間，2000表示2秒

<7>盖腕、生成簽名赫冬，并給app添加簽名

如遇到問題,請移步簽名詳細文章

生成簽名需要用到兩個工具：keytool和jarsigner，這兩個工具分別在在前面安裝的Javajdk1.8.0_131jre\bin和Javajdk1.8.0_131bin溃列。把上兩個軟件所在的目錄添加到環(huán)境變量path后劲厌，打開cmd輸入，cd到你需要保存這個key的目錄下（jdk的bin目錄）听隐，執(zhí)行：

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

說明：
demo是所取的名稱补鼻，自定義。

-genkey 產(chǎn)生密鑰

-keystore demo.keystore 證書的文件名

-alias demo.keystore證書的別名

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

-validity 20000該數(shù)字證書的有效期

10.png

執(zhí)行命令后會要求你輸入一堆東西雅任，根據(jù)自己情況輸入风范，注意兩點：1、輸入密碼口令的時候是看不見的沪么，盡管寫就行乌企，寫完就回車，不過要記住這個密碼成玫，后面要用加酵；2拳喻、最后讓你確認信息的時候要輸入“是”。

完成后看一下相應目錄下有沒有簽名文件猪腕。然后把該文件復制到你的項目中的platforms/android目錄下冗澈，并且新建一個文件release-signing.properties。用記事本打開陋葡，寫入以下內(nèi)容：

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

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

 key.alias=簽名文件的別名

 key.alias.password=別名密碼

把密碼寫在文件里可以方便操作亚亲，但是會暴露了你的密碼！正式開發(fā)盡量不要把兩個密碼寫在文件里腐缤！

做完之后就可以打包正式簽名的Android apk了：

在項目目錄下執(zhí)行 ionic build android --prod --release

說明：--prod 為ionic提供的一種打包方式捌归，可以加快app開啟速度，--release為打包簽名

至此岭粤，一個app就打包好了惜索。

下面的內(nèi)容可先了解一下：

• 添加支持熱更新

先安裝熱更新插件：cnpm install -g cordova-hot-code-push-cli

cd到項目目錄下給項目添加插件：ionic plugin add cordova-hot-code-push-plugin

執(zhí)行：cordova-hcp server

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

在App根目錄下面新建文件cordova-hcp.json，內(nèi)容如下：

  {
  
  "autogenerated": true,
  
  "content_url": "http://www.yourserver.com/hotcodepush/www",
  
  "update": "start"
  
  }
  

注意：這里的http://www.yourserver.com...均指你的存放熱更新文件的服務(wù)器地址虎囚！

將www目錄下的.chcpenv文件修改為你的服務(wù)器：

  {
  
  "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/hotc...
    
    </chcp>
    

查看是否實現(xiàn)熱更新：

修改src里的內(nèi)容角塑，然后重新編譯；編譯后打包apk或者執(zhí)行ionic run android把www里面的代碼壓縮之后淘讥，再執(zhí)行cordova-hcp build圃伶，然后把www目錄復制到你的服務(wù)器上，退出APK再打開蒲列，看看后臺做的修改是否在apk里跟著改變了留攒。（也可以直接修改www目錄下的文件內(nèi)容，主要是修改main.js里的東西然后執(zhí)行cordova-hcp build嫉嘀，再把www復制到服務(wù)器看看修改效果。

三魄揉、ionic一些常用命令：

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（創(chuàng)建項目并跳過npm安裝使用cnpm安裝步驟1）

cnpm install（創(chuàng)建項目并跳過npm安裝使用cnpm安裝步驟2）

ionic start myApp blank –-v2（空項目）

ionic start myApp tabs –-v2（帶導航條）

ionic start myApp tutorial –-v2（帶側(cè)滑菜單）

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（開啟服務(wù)調(diào)試）