PhoneGap:快速開發(fā)跨平臺(tái)HTML 5應(yīng)用的膠水層
在開發(fā)移動(dòng)應(yīng)用的過程當(dāng)中,如果你的應(yīng)用只定位在一種平臺(tái)上,這可不是一個(gè)好主意,但是為許多不同的平臺(tái)Building應(yīng)用又是一件非常麻煩和非常不爽的事情,因?yàn)槟銜?huì)發(fā)現(xiàn)每一種手機(jī)平臺(tái)都有自己的SDK,它們需要使用不同語言來進(jìn)行開發(fā)。你可能不得不需要5、6個(gè)代碼倉庫來管理不同設(shè)備上的代碼,而且需要不同設(shè)備的開發(fā)人員來開發(fā)維護(hù)這些倉庫,你還不得不裝上各個(gè)設(shè)備的SDK,設(shè)置好路徑和各種配置信息,來編譯不同設(shè)備上的應(yīng)用包。
那么移動(dòng)網(wǎng)站模式是不是一個(gè)可以接受的替代方案呢?幸運(yùn)的是移動(dòng)應(yīng)用和移動(dòng)網(wǎng)站并不是對(duì)立的兩端,通過PhoneGap我們可以采用HTML 5的網(wǎng)站形式來開發(fā)移動(dòng)應(yīng)用。也許開源PhoneGap 會(huì)成為 Web App 上設(shè)備端開發(fā)的事實(shí)上標(biāo)準(zhǔn)。
我們先來看看PhoneGap的特性:
支持6種移動(dòng)設(shè)備平臺(tái):iOS, Android, BlackBerry, WebOS, Symbian WRT, Windows Mobile(內(nèi)部測試),以及桌面環(huán)境(內(nèi)部測試)
HTML5 + CSS3 + JavaScript 利用標(biāo)準(zhǔn)的Web技術(shù)開發(fā)應(yīng)用
PhoneGap Build(https://build.phonegap.com/): write once, compile on cloud, run anywhere. 提供在線Builder平臺(tái):只寫一次,云端編譯,運(yùn)行在任何地方
目前已經(jīng)有上千基于PhoneGap的應(yīng)用(http://www.phonegap.com/apps)在App Store上
PhoneGap 目前標(biāo)注的版本依然是0.9.x,PhoneGap的功能特性并不穩(wěn)定,會(huì)有不少bug,要小心。
開始
首先自然是需要下載 PhoneGap: http://www.phonegap.com/
然后你還需要相應(yīng)設(shè)備的SDK
針對(duì)iPhone:
從 Apple Developer Portal 下載安裝 XCode.
解開下載好的PhoneGap壓縮包,進(jìn)入iphone目錄安裝好PhoneGap
打開XCode,在文件菜單選擇 New Project…. 菜單
點(diǎn)開“User Templates”欄,選擇PhoneGap,然后選中右邊的“PhoneGap-based Application”,點(diǎn)擊“Choose…”按鈕,命名你的項(xiàng)目,選擇項(xiàng)目文件的位置.

針對(duì)Android:

下載安裝 JDK 1.5

下載安裝 Android SDK(http://developer.android.com/sdk/index.html)
下載安裝 Apache ANT(http://ant.apache.org/ivy/download.cgi)
下載安裝 Ruby (命令行方式開發(fā)需要)
解壓已經(jīng)下載好的 PhoneGap, 進(jìn)入android 目錄,my god,最新的0.9.4ZIP包中沒有命令行創(chuàng)建項(xiàng)目的方式,好吧,你需要從最新的倉庫中把代碼取出來: git clone https://github.com/phonegap/phonegap-android.git
命令行方式(Droidgap)腳本的開發(fā)者沒有修改路徑以配合新的0.9.4版本,這是這次在發(fā)布中被拿掉的原因吧。需要自己改改,蠻簡單的,就不多說。
將 android下的bin目錄 加入你的搜索 path:
UNIX/LINUX的機(jī)子: export PATH=$PATH:~/phonegap-android/bin
在windows下將phonegap-android/bin 路徑加到Path中就不用多說了。
ok,在命令行下輸入 “droidgap gen demo”,即可創(chuàng)建phonegap支撐的html5應(yīng)用項(xiàng)目。
cd demo;ant debug install 即可安裝到設(shè)備或模擬器
adb logcat 在控制臺(tái)查看設(shè)備的輸出日志
使用PhoneGap來創(chuàng)建移動(dòng)App應(yīng)用:
打開項(xiàng)目的www目錄(android是在項(xiàng)目的assets/www目錄下),編輯index.html,在body中鍵入hello world(你也可以加上js和css文件在這個(gè)目錄下面),保存,然后你就可以首先部署到模擬器上看看。
也許你會(huì)說,這不就是網(wǎng)頁嘛!是的,這就是網(wǎng)頁,不過通過PhoneGap,這樣的網(wǎng)頁應(yīng)用就有能力訪問設(shè)備的所有功能:文件系統(tǒng),GPS,相機(jī),重力加速度計(jì),電話簿等,當(dāng)然不同的設(shè)備支持的功能會(huì)有所不同(目前PhoneGap還不能支持完所有的功能,具體看各個(gè)設(shè)備支持的特性列表)。另外要想呈現(xiàn)和移動(dòng)應(yīng)用一樣的外觀,你還需要選擇一種HTML 5 Mobile UI Framework庫,這樣的Framework庫已經(jīng)很多了: Sencha Touch, JQTouch, JMobile, XUI, The-M-Project,Dojo Mobile, dhtmlxTouch, wink, jo, webapp.net…
PhoneGap Build
除了在本地編譯應(yīng)用之外,您還可以使用Phonegap提供的云端Build工具進(jìn)行應(yīng)用編譯。那就是:Phonegat Build,通過它,您只需要將用HTML 5寫好的應(yīng)用上傳到PhoneGap的云端服務(wù)器,它即可以幫你編譯不同平臺(tái)平的應(yīng)用。

PhoneGap Build 當(dāng)前PhoneGap Build依然處于beta狀態(tài),你需要申請(qǐng),等到通過方可使用。另外推薦一個(gè)Chrome的插件,Ripple Emulator(http://ripple.tinyhippos.com/) 可以在Chrome瀏覽器上測試你的應(yīng)用,支持PhoneGap。