phoneGap+cordova+ionic混合app開發環境搭建

　　近段時間組件寫的差很少了，老大又給了個新任務：研究phonegap+cordova+ionic。之前作混合app開發都是用的Hbuilder+mui+(H5+)來搞的。phonegap對我來講，徹底是一張白紙。瞎折騰了好幾天，終於把環境搭建起來了，中間踩了太多的坑，浪費了大量的時間，因此決定把整個環境搭建的過程寫下來，若是有須要的小夥伴，儘管拿去，以避免少走彎路。

1、環境搭建

　　說明：如下環境搭建都是基於windows7 64位操做系統而言，對應的軟件也是64位，若是不是64位操做系統，可參照該文檔並自行下載適合本身操做系統的相關軟件。

一、JDK的安裝和環境變量的配置　

　　請下載java JDK1.6以上的版本，我這裏使用的1.7版本的，官方下載的連接爲：http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html。環境變量配置可參考如下博客：http://www.cnblogs.com/linjiqin/archive/2013/11/02/3403095.html

 

　　配置完成之後打開cmd命令窗口，在命令行中分別輸入java 和javac，並使用 javac -version查看配置的JDK版本，若是出現如下信息，表示安裝成功： 輸入 jvava:

輸入javac

輸入 javac -version

備註：這裏必定要用javac -version檢查一下當前正在使用的JDK的版本，頗有可能你的電腦上安裝了其餘的jdk版本，你配置的時候一不當心又配置錯了，誰又知道呢？

 二、Android Development Tools的下載和環境變量的配置

　　Android Development Tools已經包含了Android SDK、eclipse，解壓便可用。下載地址：https://developer.android.com/sdk/index.html。請認準必定要下載這個最全的，phonegap不支持Android4.1如下的，因此你到時候還要更新。本身也試過其餘的幾個development Tools包，可是都是在 build Android的時候報錯了。惟獨使用這個的時候最後會成功。

　　下載完成之後，把adt包解壓到一個目錄下，以下：

解壓完成之後，開始環境變量的配置：點擊桌面計算機，右鍵屬性，選擇高級系統設置，點擊環境變量，進入環境變量配置

A、找到系統變量模塊，點擊新建，在變量名中輸入：ANT_HOME，在變量值中輸入：　　

　　C:\Program Files (x86)\adt\eclipse\plugins\org.apache.ant_1.8.3.v201301120609 （請注意路徑，若是adt的包不是放在和我同樣的目錄，請本身進行更改，如下同理），最後點擊肯定。

B、Path環境變量的配置：打開notepad或者是notepad++，輸入：

　C:\Program Files (x86)\adt\sdk\tools;C:\Program Files (x86)\adt\sdk\platform-tools;%ANT_HOME%\bin; 其實就是配置sdk的tools和platform-tools。再在系統環境變量中找到path變量，點擊編輯，在變量值一欄的最後先輸入一個分號，在把notepad++中的內容拷貝進去。點擊肯定便可。

C、驗證：打開cmd命令窗口，輸入ant,若是出現如下信息，表示環境變量配置成功：

三、Nodejs的安裝

　　Nodejs下載地址：https://nodejs.org/en/。 我這裏使用的是v.4.4.4版本，使用最新的也是能夠的。下載完成之後，直接點擊安裝，而後下一步，直到完成便可。驗證安裝是否成功：打開命令窗口，在命令行中輸入: node -v,出現如下信息表示安裝成功：

四、nrm安裝

　　nrm是一個npm資源管理器，容許你快讀地在以下NPM源間切換。想要了解的，能夠閱讀這篇文章：http://www.tuicool.com/articles/nYjqeu 安裝：打開命令窗口，在窗口中先輸入npm install -g nrm進行安裝,若是出現如下信息，表示安裝成功。

查看： 繼續輸入 nrm ls

切換： nrm use taobao

五、Phonegap3.4的安裝

　　打開命令窗口，輸入npm install -g cordova 。若是出現如下信息，表示安裝成功。

　　

　　順便檢查一下cordova的版本，一樣輸入 cordova -v

　　

　　至此，phonegap+cordova的環境安裝完成。

六、ionic的安裝

　　相對於phonegap +cordova的環境安裝，ionic安裝就更簡單了。只須要在命令行中輸入：npm -install -g ionic便可：

　　

　　檢查版本

　　

2、建立應用

　　一、在D盤目錄下新建一個phonegap文件夾。

　　二、打開命令窗口，切換到該目錄下

　　

　　三、輸入 ionic start demo003命令，其中demo003是你的項目名稱

　　

　　若是出現這種狀況，只能從新再來，記得刪除phonegap中demo003文件夾

　　若是出現以上的信息，那確定是安裝成功咯！！！

　　四、添加android支持：切換到你建立的項目目錄下，輸入 ionic platform add android命令

 　　

　　五、Build andriod：在命令行中輸入 ionic build android命名

　　

 

　　在build的過程當中，若是沒有出現build successful信息，則表示build出錯，若是不肯定問題緣由，能夠看報錯信息。

　　六、運行：用數據線把手機和電腦相連（可使用360助手）。確認鏈接成功之後，在命令行中輸入 ionic run android 命令

　　

　　這個時候要查看你的手機，要贊成用USB安裝軟件，點擊肯定之後，會在你手機上安裝一個名爲demo003 APP，打開app，效果以下：

　　

 

　　至此，phonegap+cordova+ionic的開發環境已經搭建完成。

 

 

 

 

3、資源下載

　　ionic視頻下載：http://www.ionic.wang/course-index.html

　　ionic主頁：http://www.ionic.wang/

　　phonegap視頻站：http://www.phonegap100.com/

　　cordova插件：http://ngcordova.com/docs/plugins/camera/

 

　　目前還在持續的研究整個的開發流程，若是摸清了，後續可能會補充相關的開發文檔。