土狗的小抄本 -- 從0開始搭建IONIC2 開發環境

閱讀對象

• 英文不是那麼好的同窗
• 計劃使用或者嘗試 IONIC2 框架，可是還歷來沒有搭建過環境的同窗
• 學習如何實用IONIC2 打包android apk的同窗
• 也歡迎來‘溫習’的同窗
• 英文好的同窗，建議查看官方英文文檔

環境

• windows （windows7 和 windows10嘗試經過）

準備

• nodejs （依賴包管理、webpack打包） nodejs官網
• androidSDK （打包apk用，若是隻是想瀏覽器上聯調一下，則不須要androidSDK）
• JDK（1.7+，打包apk用，若是隻是想瀏覽器上聯調一下，則不須要JDK）
• 一款你習慣的IDE工具，我選擇的是IDEA Intellij

安裝完上面的組件，已經能夠開始開發IONIC應用並在瀏覽器中進行調試，或者打包，好比安卓的apk包。 若是但願在模擬器中進行調試，建議你安裝（這裏說的是安卓模擬器）以下模擬器

• vbox（調試andriod客戶端的時候使用，做爲依賴的工具，並不須要手動啓動vbox，安裝上便可）
• Genymotion（調試apk使用，依賴vbox。在windows中啓動了genimotion以後，將apk文件直接拖放到手機模擬器的界面就完成了apk安裝，很方便。 【官網】）

開始

這裏假設你已經安裝好了nodejs , androidSDK,JDK 等，若是您在安裝這些時候遇到了問題，網上有不少專門的文章來解決，這裏不在陳述。

ionic2 應用的大部分工做（除了編碼）都經過命令行來完成，下面給出一個完整的腳本片斷 + 描述

npm install -g ionic cordova    // 安裝 ionic 客戶端 和 cordova

// 創建模板項目
// windows 下 cd 到你的工做目錄，假設是 d:\dev ,在當前目錄下執行：

ionic start cutePuppyPics --v2   // 創建ionic 模板工程命令，工程名爲  cutePuppyPics



ionic serve      // 進入到  cutePuppyPics， 啓動項目，這個命令會啓動當前項目，並自動打開瀏覽器展現瀏覽器中的調試頁面


ionic platform add android   // 添加android平臺 

ionic build andriod  // 打開發包（開發的時候打這個包）

ionic build android -release  // 打發布包 （發佈的時候打這個包）

// 你能夠在   {項目目錄}\platforms\android\build\outputs\apk 目錄裏面找到  生成好的apk文件。



補充

// 創建新的page
ionic g page NewPage

// 添加whitelist插件
cordova plugin add cordova-plugin-whitelist --save

// 添加
ionic plugin add https://github.com/VersoSolutions/CordovaClipboard.git
cordova plugin add cordova-plugin-inappbrowser

常見問題

ionic 項目代碼上傳到svn 或者git的時候，須要上傳全部的目錄嗎？

查看gitignore 文件就知道哪些不須要上傳了。

原來運行的很好的ionic項目，從新得到一次代碼從新構建項目以後出現 ionic serve 不能運行的狀況。

個人解決辦法是：使用ionic start projectName --v2 新建一個項目，而後將 node_modules 目錄拷貝過來，而後從新運行ionic serve ，成功.

ionic build android 時候heap 不能分配足夠空間

首先設置系統的jvm 參數 _JAVA_OPTS=-Xmx1024m ,而後設置 user 目錄gradle 目錄的gradle.properties 文件中的內容爲org.gradle.jvmargs=-Xmx512m -XX:MaxPermSize=256m

ionic build adnroid 的時候提示沒有接受android sdk 的受權之類的

在 ANDROID_HOME 目錄建立 licenses 目錄，在以內建立 android-sdk-license 文件，內容爲 8933bad161af4178b1185d1a37fbf41ea5269c55

如何更改splashscreen，怎麼修改了也無效，仍是現實cordova 圖標

先明確兩個事情：

1. ionic platform add android 以後，platform/android/res 文件夾裏面的內容就不變了，不會每次build 的時候將ionic 項目內的res 目錄內的文件更新過來
2. ionic build android 的時候，打包只會打drawable-，mipmap- 等文件夾，也就是說只有將將splash screen圖片放入到這些目錄纔可用，放入其餘目錄，雖然構建腳本不會提示錯誤，可是打出來的apk 裏面沒有對應的文件夾或者文件。

ionic recources 文件會在resources 目錄下生成對應的各類尺寸的splash 或者 icon 文件，若是build命令沒有將這些文件拷貝到res目錄，則須要拷貝過去。

若是build命令沒有將這些目錄拷貝到platform 文件夾對應的目錄中，則須要拷貝過去。