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