最近做了一款小遊戲，定位是移動端訪問，思來想去最後選擇了jQuery mobile最為框架，製作差不多以後，是否可以打包成App，恰好以前對PhoneGap有耳聞，便想用這個來做打包，可以其中艱辛曲折多次讓我想放棄的心情，官方提供的例子，對我這種沒用過的人而言，真是無語的很，所已將配置環境和打包過程寫下做個記錄。
因為我只弄了Andriod的環境，所以在此只以Andriod為例。
使用PhoneGap搭建Android開發的專案整體步驟如下：
-
安裝java環境。
-
安裝ant構建工具。
-
安裝android的開發環境並配置環境變數。
-
安裝Node.js環境並配置環境變數。
-
安裝git
-
使用npm安裝PhoneGap全域性環境。
-
使用PhoneGap命令建立PhoneGap專案。
-
將PhoneGap編譯為android專案。
-
將上述專案匯入ADT進行後續開發。
-
安裝.apk檔案
其實官網給出的安裝過程忽略了很多步驟（因為這裡是Andriod環境，所以才會比官網的例子多出不少步驟），像我這種前端開發人員，電腦裡可是連java都沒裝的，下面就詳細講解這些步驟，並最終生成apk檔案。
安裝Java環境
這點不用我講，網上一搜一大堆，而且很多程式設計師電腦裡面都是有java環境的，需要強調的是安裝java的環境要和後面下載andriod開發環境一致，不然會報錯，要保證都是32位或64位，筆者就裝了個64位jdk然後，安卓環境是32位的，執行不成功。
資源
jdk 下載：http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
配置java環境：http://zhidao.baidu.com/link?url=OY0oVYGYuBgsCu-ASgWoY2V1Sh0W5R0yPgpndOjA1c_cvAqUnBGv3RWGVZGIvSeAEUXPN39Pg6kUzTgizeuoYq
安裝Ant構建工具
Adobe將PhoneGap已經放到Apache名下進行開源，並且還改了個名字，ant可以apache下的構建工具，所以……需要先安裝ant才可以，安裝過程其實非常簡單，第一個就是下載，選擇適合自己的版本，因為我的環境是win7 所以下載zip格式的就可以了。
然後將zip檔案解壓到任意目錄，並新增環境變數，具體可以參看這裡
- 將bin目錄新增到path裡面
- 新增ANT_HOME變數為ant的根目錄
- 確保安裝了jdk並配置好了JAVA_HOME
然後儲存環境變數，開啟命令列輸入 ant -version 你應該看見類似下面的輸出，那恭喜成功了，可以進行下一步了，如果未成功，可百度下錯誤原因：
下載Andriod開發環境並配置環境變數
首先就是來這裡下載環境，然後是安裝，其實就是解壓到任意目錄，可以看這裡，接下來需要新增環境變數，將sdk目錄下的platform-tools 和 tools新增到path裡。
然後你還需要設定avd，開啟AVD Manager，點選新建，然後設定一些引數即可，由於我也不是搞安卓的，所以嗎你要想深入瞭解需自行研究。
安裝git
git是我非常喜歡的版本控制工具，我電腦上自帶的是github for windows，只需將其git命令新增到path即可，如果你沒有安裝git我建議你安裝mysygit，安裝過程中記得勾上將git新增僅path選項。如果你安裝的其他git工具，請確保將git命令加入path，因為安裝phonegap過程會用到git命令。
來這裡下載mysygit，注意下載過程非常緩慢（沒辦法了誰讓我們在天朝呢，以前mysygit在google code上的時候速度更慢，下載遷移到github速度已經快很多了）。
如果你對git感興趣，我建議你加入我的群一起交流，GitHub家園② 193091696，由於1群已滿，群共享裡也有mysygit的最新pre版，下載速度會是github上的幾百倍吧！！！！
安裝Node.js環境並配置環境變數
來這裡下載你需要的版本，windows建議下載.msi安裝包，自帶npm，無需配置環境變數，如果你下載.exe的話下載的知識node，還需要自行配置環境變數和安裝npm。現在的node安裝過程真的非常簡單了。
使用npm安裝PhoneGap全域性環境
到這裡就可以安裝官網上的提供的教程來了，開啟剛剛安裝的node的命令列工具，然後輸入 npm install -g phonegap，將會自動安裝phonegap，需要注意的是安裝過程非常緩慢，因為安裝期間回到用到git命令去下載檔案（不是git慢，而是外網慢）。安裝完成後會提示安裝成功，當然你也可以輸入 phonegap -v，你將會看到如下輸出，說明你安裝成功了：`
使用PhoneGap命令建立PhoneGap專案
接下來將路徑切到任意目錄，輸入<code>phonegap create my-app 你將會看到如下畫面：
將PhoneGap編譯為android專案
接下來先切換到myapp1目錄，然後執行phonegap run andriod
cd myapp
phonegap run android會出現很多構建資訊，成功後會自動啟動adk模擬器
如果你不想執行安卓模擬器，而只想構將專案那麼可以，你只需執行 phonegap build android 即可。
將上述專案匯入ADT進行後續開發
啟動ADT中的eclipse，然後選擇File-New-Project,在開啟的“New Project”嚮導中選擇Android->Android Project from Existing Code，並選擇Next
在下一步的導航頁中Root Directory選擇剛才建立的my-app/platforms/android資料夾，下方Projects會出現兩個專案，都勾選，但是不要勾選Copy projects into workspace選項。
選擇Finish完成上述匯入
話說上面的匯入過程是複製貼上的，筆者匯入的時候點選finished就是不起作用，不知為何，比較鬱悶，不知你是否也會遇到同樣的事情。
安裝.apk檔案
專案目錄下的platforms\android\ant-build 裡已經生成了對應的apk檔案，將其匯入手機即可安裝。
我也不知道這兩個apk有什麼區別，我講第一個放到手機裡試了試，挺完美的。
結論
至此完成了用phonegap構建web專案的過程，是不是灰常複雜，而且網上的其他文章的安裝過程，筆者嘗試絕大部分未能成功，在此將自己安裝過程總結下來，希望能幫到大家。
注
原文地址：http://yanhaijing.com/mobile/2014/06/24/12-how-use-phonegap-package-web-app/
參考文獻：