【轉】如何使用PhoneGap打包Web App

如何使用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項目

接下來將路徑切到任意目錄，輸入 phonegap create my-app 你將會看到以下畫面：

將PhoneGap編譯爲android項目

接下來先切換到myapp1目錄，而後運行phonegap run andriod

cd my-app
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://zhidao.baidu.com/link?url=TQDJTCYZqa-lG9AvhAvYjbj3DqbHwZLkIbGvBlFBMsomC73s0Ro-byUvAxu9fsByVPjpSicFFFGtS2dVrVqzpYcVU2NK8ljogH0dX8XXp1i

http://zhaochaozcx.blog.163.com/blog/static/22000865201375102830684/