如何使用PhoneGap打包Web App

標籤：

最近做了一款小遊戲，定位是移動端訪問，思來想去最後選擇了jQuery mobile最為架構，製作差不多以後，是否可以打包成App，恰好以前對PhoneGap有耳聞，便想用這個來做打包，可以其中艱辛曲折多次讓我想放棄的心情，官方提供的例子，對我這種沒用過的人而言，真是無語的很，所已將配置環境和打包過程寫下做個記錄。

因為我只弄了Andriod的環境，所以在此只以Andriod為例。

使用PhoneGap搭建Android開發的項目整體步驟如下：

1. 安裝java環境。

2. 安裝ant構建工具。

3. 安裝android的開發環境並配置環境變數。

4. 安裝Node.js環境並配置環境變數。

5. 安裝git

6. 使用npm安裝PhoneGap全域環境。

7. 使用PhoneGap命令建立PhoneGap項目。

8. 將PhoneGap編譯為android項目。

9. 將上述項目匯入ADT進行後續開發。

10. 安裝.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檔案解壓到任意目錄，並添加環境變數，具體可以參看這裡

1. 將bin目錄添加到path裡面
2. 添加ANT_HOME變數為ant的根目錄
3. 確保安裝了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 myappphonegap 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/

參考文獻：

如何使用PhoneGap打包Web App