如何使用PhoneGap打包Web App

顏海鏡發表於2014-07-10
WebAPP

最近做了一款小遊戲，定位是移動端訪問，思來想去最後選擇了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 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/

參考文獻：

  • http://zhidao.baidu.com/link?url=TQDJTCYZqa-lG9AvhAvYjbj3DqbHwZLkIbGvBlFBMsomC73s0Ro-byUvAxu9fsByVPjpSicFFFGtS2dVrVqzpYcVU2NK8ljogH0dX8XXp1i
  • http://zhaochaozcx.blog.163.com/blog/static/22000865201375102830684/

相關文章