新手必讀:PhoneGap開(kāi)發(fā)入門(mén)六大問(wèn)題
1.PhoneGap是什么?
PhoneGap是一個(gè)基于HTML和JavaScript的應(yīng)用開(kāi)發(fā)平臺(tái),使用它可以構(gòu)建本地應(yīng)用。你可以把PhoneGap看作一個(gè)正方形的web view container,它使用JavaScript編程接口實(shí)現(xiàn)用戶(hù)在不同操作系統(tǒng)下的訪問(wèn)。你可以利用傳統(tǒng)的web開(kāi)發(fā)技術(shù)(如HTML、CSS、JavaScript)開(kāi)發(fā)用戶(hù)接口,利用PhoneGap容器把它們部署到不同的應(yīng)用環(huán)境和設(shè)備上。
PhoneGap可以被用來(lái)開(kāi)發(fā)跨平臺(tái)的應(yīng)用,這些平臺(tái)包括Apple iOS、Google Android,、Windows Phone、BlackBerry、HP webOS,、Symbian和bada。你可以通過(guò)鏈接
這里獲取更多關(guān)于PhoneGap支持的平臺(tái)及其特色功能的信息。
PhoneGap是一個(gè)開(kāi)源的框架,用戶(hù)可以去這里l獲取更多信息。
2.開(kāi)發(fā)出的PhoneGap應(yīng)用是什么樣的形態(tài)?
由于UI繪制引擎就是移動(dòng)設(shè)備的內(nèi)置web瀏覽器,所以PhoneGap應(yīng)用的形態(tài)可能多種多樣。你可以使用標(biāo)準(zhǔn)的HTML&CSS使它看起來(lái)就像一個(gè)簡(jiǎn)單的網(wǎng)頁(yè),也可以使用UI框架使它像jQuery UI,Kendo UI,Sencha,Twitter Bootstrap或Skeleton(或者其它任意基于HTML/CSS/JS的用戶(hù)框架接口)。另外你也可以采用CSS模式/主題使它看起來(lái)就像一個(gè)本地應(yīng)用,如模仿iOS和Android的iUI,模仿BlackBerry的bbUI。
PhoneGap應(yīng)用可以是基于HTML的靜態(tài)UIs,也可以是利用JavaScript開(kāi)發(fā)具有動(dòng)態(tài)效果和交互體驗(yàn)動(dòng)態(tài)UIs。這取決于特定的應(yīng)用、用戶(hù)體驗(yàn)設(shè)計(jì)、受眾目標(biāo)以及指示PhoneGap應(yīng)用如何出現(xiàn)的應(yīng)用實(shí)例。
使用PhoneGap應(yīng)用,你可以通過(guò)縮小放大操作放大或者縮小查看的內(nèi)容,或者利用利用viewport metadata tag鎖定瀏覽內(nèi)容的大小。你可以利用常規(guī)瀏覽器的操作方式滾動(dòng)瀏覽網(wǎng)頁(yè)也可以像iScroll一樣采用基于接觸的滑動(dòng)方式瀏覽網(wǎng)頁(yè)。
基于HTML,CSS &JavaScript你有許多方式可以創(chuàng)建用戶(hù)接口,所以并沒(méi)有一個(gè)典型的外觀。如果你沒(méi)有使用任何的CSS模式,那么用戶(hù)接口各元素默認(rèn)和使用的操作系統(tǒng)或者瀏覽器保持一致,包括按鈕、鏈接、色彩以及亮度。這時(shí)PhoneGap應(yīng)用和操作系統(tǒng)默認(rèn)的瀏覽器一樣運(yùn)行。
3.如何利用PhoneGap開(kāi)發(fā)應(yīng)用?
利用PhoneGap開(kāi)發(fā)應(yīng)用非常簡(jiǎn)單,90%的PhoneGap應(yīng)用只需要一個(gè)文本編輯器即可。PhoneGap也能很容易的與特定的設(shè)備整合形成開(kāi)發(fā)環(huán)境。具體可以參考以各應(yīng)用平臺(tái)上的開(kāi)發(fā)指導(dǎo)鏈接:
在開(kāi)發(fā)PhoneGap應(yīng)用應(yīng)用時(shí),一定要謹(jǐn)記你是在web瀏覽器實(shí)例中運(yùn)行代碼。你是利用HTML和JavaScript開(kāi)發(fā)應(yīng)用而不是本地代碼,因此不需要其它任何東西。實(shí)際上我的大部分開(kāi)發(fā)都是利用HTML編輯器和Chrome瀏覽器實(shí)現(xiàn)的。當(dāng)我需要在設(shè)備上做測(cè)試的時(shí)候再切換到特定的設(shè)備環(huán)境。
4.如何調(diào)試PhoneGap應(yīng)用?
調(diào)試PhoneGap應(yīng)用是PhoneGap開(kāi)發(fā)過(guò)程中最棘手部分。只在物理設(shè)備上測(cè)試,并不能測(cè)試出所有的JavaScript異常。下面是一些具體的調(diào)式策略:
盡可能利用桌面瀏覽器調(diào)試
由于PhoneGap應(yīng)用是利用HTML,CSS,and JavaScript進(jìn)行開(kāi)發(fā)的,你可以利用HTML編輯器開(kāi)發(fā)大部分應(yīng)用然后利用桌面web瀏覽器調(diào)試。最新版本的web瀏覽器(包括Chrome、IE、Firefox、Opera和Safari)都提供了豐富的調(diào)試功能。利用web瀏覽器開(kāi)發(fā)工具,你可以檢查HTML DOM元素,檢查CSS的模式、設(shè)置JavaScript斷點(diǎn)、檢查內(nèi)存和JavaScript變量。通過(guò)下面鏈接可以獲得更多更多關(guān)于桌面瀏覽器開(kāi)發(fā)工具的信息:
- Chrome Developer Tools
- Firefox via FireBug
- Safari Developer Tools
- IE Developer Tools
- Opera Developer Tools
你一旦利用桌面工具開(kāi)發(fā)了應(yīng)用的主要功能,便可以切換到特定的設(shè)備環(huán)境增加特定的設(shè)備功能并與PhoneGap APIs整合。
利用真實(shí)設(shè)備進(jìn)行測(cè)試是必不可少的。利用真實(shí)設(shè)備測(cè)試可能獲得不同于桌面瀏覽器和模擬器的性能,也可以發(fā)現(xiàn)不同的bug和問(wèn)題包括API的不同和UX腳本的不同。
用debug.phonegap.com調(diào)試
利用debug.phonegap.com可以進(jìn)行遠(yuǎn)程的基于設(shè)備的調(diào)試。利用Weinre調(diào)試工具你可以遠(yuǎn)程檢查DOM、測(cè)試資源下載、檢測(cè)網(wǎng)絡(luò)使用、檢測(cè)時(shí)間線以及控制臺(tái)輸出。如果你已經(jīng)使用了上述列出的開(kāi)發(fā)工具,就會(huì)發(fā)現(xiàn)它們看起來(lái)很相似。只是你不能在移動(dòng)設(shè)備上設(shè)置斷點(diǎn),但是肯定比什么都沒(méi)有強(qiáng)。
利用iOS5進(jìn)行遠(yuǎn)程web調(diào)試
利用iOS5模擬器實(shí)現(xiàn)遠(yuǎn)程調(diào)試只需要開(kāi)通遠(yuǎn)程調(diào)試功能即可。然后利用iOS5桌面模擬器發(fā)布應(yīng)用。一旦應(yīng)用運(yùn)行它就會(huì)打開(kāi)一個(gè)本地Safari實(shí)例。這將啟動(dòng)遠(yuǎn)程調(diào)試工具,完成斷點(diǎn)設(shè)置和腳本測(cè)試。
通過(guò)連接你可以獲取更多信息。
其他調(diào)試信息
通過(guò)下面鏈接你可以閱讀更多關(guān)于PhoneGap應(yīng)用應(yīng)用的調(diào)試信息:
- http://phonegap.com/2011/05/18/debugging-phonegap-javascript/
- http://wiki.phonegap.com/w/page/16494768/Debugging%20PhoneGap%20Apps
5.如何部署PhoneGap應(yīng)用?
部署PhoneGap應(yīng)用和創(chuàng)建移動(dòng)設(shè)備web是一樣的,唯一不同的就是PhoneGap應(yīng)用程在本地初始化HTML設(shè)置而不是遠(yuǎn)程服務(wù)器。PhoneGap應(yīng)用加載初始化的HTML,它可以用來(lái)申請(qǐng)服務(wù)器或者本地上的資源。由于PhoneGap是基于瀏覽器的,可以像瀏覽器一樣運(yùn)行。你可以同時(shí)下載各種網(wǎng)頁(yè)但是一旦你下載或者關(guān)閉一個(gè)網(wǎng)頁(yè)很可能丟失通過(guò)JavaScript腳本存儲(chǔ)在內(nèi)存中的數(shù)據(jù)。PhoneGap也支持單頁(yè)瀏覽模式,建議用戶(hù)使用單頁(yè)瀏覽模式。
單頁(yè)瀏覽模式部署
單頁(yè)瀏覽架構(gòu)就是指只有一個(gè)HTML頁(yè)基于數(shù)據(jù)和用戶(hù)輸入進(jìn)行動(dòng)態(tài)更新,你可以把它看做是客戶(hù)/服務(wù)器模式,由一個(gè)客戶(hù)應(yīng)用和一個(gè)服務(wù)器組成??蛻?hù)應(yīng)用可以請(qǐng)求數(shù)據(jù)或者進(jìn)行更新而不用重新加載web頁(yè)。
通過(guò)使用單頁(yè)瀏覽模式你可以維護(hù)內(nèi)存中的數(shù)據(jù)。通過(guò)如下鏈接可以了解更多關(guān)于單頁(yè)模式的知識(shí)。
可以利用任意常見(jiàn)的JS架構(gòu)如Angular,Ember,Backbone,Mustache部署PhoneGap應(yīng)用。
6.如何使PhoneGap應(yīng)用在移動(dòng)設(shè)備和應(yīng)用環(huán)境中運(yùn)行?
對(duì)每一個(gè)給定的平臺(tái)而言,PhoneGap應(yīng)用采用和本地應(yīng)用相同的規(guī)則部署,你必須遵守每一個(gè)應(yīng)用平臺(tái)的部署規(guī)則。你可以利用每個(gè)平臺(tái)的構(gòu)建過(guò)程為這個(gè)平臺(tái)編譯可執(zhí)行文件也可以利用build.phonegap.com進(jìn)行編譯。build.phonegap.com是可以為每個(gè)平臺(tái)編譯使用時(shí)具體平臺(tái)的應(yīng)用的服務(wù)。構(gòu)建過(guò)程的輸出是適用于一個(gè)特定平臺(tái)的二進(jìn)制文件:適用于iOS的IPA,適用于Android的APK。通過(guò)下面鏈接你可以獲得更多信息:
- iOS App Store
- Google Android Market
- Amazon App Store
- BlackBerry App World
- Barnes & Nobe Nook Store
- Windows Phone Marketplace
7.PhoneGap和AIR的區(qū)別是什么?
PhoneGap和AIR最根本的不同就是你利用Flash平臺(tái)(如Flex,Flash,ActionScript,MXML)開(kāi)發(fā)AIR應(yīng)用而基于HTML,CSS,&JavaScript開(kāi)發(fā)PhoneGap應(yīng)用。AIR應(yīng)用利用AIR開(kāi)發(fā)環(huán)境運(yùn)行,這樣應(yīng)用只需要一個(gè)代碼基便可以在所有它支持的平臺(tái)上運(yùn)行,PhoneGap可以在每一個(gè)它支持的平臺(tái)上的瀏覽器上運(yùn)行。由于這個(gè)原因,不同的平臺(tái)可能有不同的代碼基,在開(kāi)發(fā)PhoneGap應(yīng)用時(shí)需要考慮這一點(diǎn)。
可以在iOS、Android、BlackBerry Playbook和desktop(mac and windows)包括上Windows Metro開(kāi)發(fā)AIR應(yīng)用。通過(guò)下面鏈接可以了解更多關(guān)于AIR支持的平臺(tái)的信息。
- http://www.adobe.com/products/air/tech-specs.html
ActionScript動(dòng)作腳本語(yǔ)言支持傳統(tǒng)的繼承編程模式??梢允褂肍lex框架構(gòu)建AIR應(yīng)用,這使得開(kāi)發(fā)者可以快速的構(gòu)建企業(yè)類(lèi)應(yīng)用。AIR應(yīng)用中的組件是具有行為、屬性和圖形上下文的邏輯客體。
基于JavaScript的應(yīng)用支持原型繼承編程,有許多開(kāi)源框架和工具可以被使用。HTML/JS通過(guò)HTML DOM元素實(shí)現(xiàn)可視化。雖然利用JavaScript模板可以創(chuàng)建HTML接口,但是實(shí)際上你只是創(chuàng)建了具有屬性和模式的DOM元素。
雖然兩者構(gòu)建應(yīng)用的語(yǔ)法不通但是基本的交互式設(shè)計(jì)和交互式開(kāi)發(fā)的概念卻是一直的。兩個(gè)開(kāi)發(fā)平臺(tái)各有優(yōu)缺點(diǎn)。
接下來(lái)做什么?
你可以去鏈接http://phonegap.com/下載PhoneGap并開(kāi)發(fā),當(dāng)然你也可以去鏈接查看其他人開(kāi)發(fā)的應(yīng)用。