天天看點

《PhoneGap精粹:建構跨平台的移動App》——1.3節PhoneGap工作機制

本節書摘來自異步社群《phonegap精粹:建構跨平台的移動app》一書中的第1章,第1.3節phonegap工作機制,作者 【美】john m. wargo,更多章節内容可以通路雲栖社群“異步社群”公衆号檢視

1.3 phonegap工作機制

phonegap精粹:建構跨平台的移動app

正如之前提到的,phonegap讓開發人員可以使用web技術(html、css和javascript)為移動裝置(智能機和平闆電腦)建構原生的應用程式。一名開發人員為移動裝置建構web應用程式,然後使用phonegap提供的特殊工具将web應用程式打包成各個平台的原生應用程式。圖1-1揭示了這個打包的過程,在本章後面的部分我們會詳細解釋其中的細節。

《PhoneGap精粹:建構跨平台的移動App》——1.3節PhoneGap工作機制

在打包出來的原生應用程式中,該應用程式的使用者界面主要由一個滿屏顯示的web視圖構成。當啟動應用程式時,該應用程式會将web應用程式的啟動頁(通常是index.html,但你也可以修改為其他的頁面)加載到web視圖中,然後将使用者操作傳入web視圖中,讓使用者可以與web應用程式互動。當使用者與應用程式的内容(即web應用程式)互動時,應用程式中的連結或者javascript代碼可以從随應用程式打包的資源檔案中加載其他内容,當可以通路網絡時,也可以從web伺服器或者應用程式伺服器上擷取内容。

對于某些移動平台來說,比如bada、symbian和webos,原生應用程式就是web應用程式。它們沒有編譯成原生應用程式,然後部署到裝置的概念。取而代之的是在裝置上運作一個被專門打包的web應用程式。在後續的章節中,我們會更詳細地介紹。

web視圖

web視圖是一個原生應用程式元件,該元件用于顯示原生應用程式中的web内容(通常是html頁面)。在移動裝置中,web視圖本質上是一個可以通過程式設計方式通路的内置web浏覽器的封裝器。

比如,在blackberry平台上,web視圖被實作為一個browser field對象(使用net.rim. device. api. browser.filed2)。在android上,通過webview視圖(android.webkit. webview)實作,還有在ios上,它是uiwebview(system/library/frameworks/uikit. framework)。

web應用程式運作在web視圖這個容器中,就像web應用程式運作在移動web浏覽器中。web視圖也可以顯示其他(本地或遠端web伺服器上)的html頁面;内嵌在應用程式中的javascript實作了所需的應用程式邏輯、根據頁面需要顯示或隐藏内容、播放多媒體檔案、打開新的頁面、執行運算以及向伺服器收發内容。應用程式的外觀和體驗可以通過css或者直接在html元素中添加設定來實作,比如線、間距、色彩或底紋等屬性。在頁面中使用圖形元素也可以為應用程式提供更好的外觀。任何可以通過web應用程式實作的功能,你都可以用phonegap應用程式實作。

通常來說,移動web浏覽器無法像裝置上的其他應用程式(比如,通訊錄(contacts)應用程式)那樣通路裝置端的元件和硬體(加速度計、攝像頭、羅盤、麥克風等)。但是典型的原生移動應用程式是會經常使用這些元件的。為了能夠創造出有趣的移動應用程式,我們的移動應用程式需要通路這些web容器之外的原生裝置元件。phonegap提供了一套javascript api來滿足這些需要,開發人員可以使用這些javascript api讓運作在phonegap應用程式容器中的web應用程式通路這些裝置元件。圖1-2在一個較高的層次上說明了其中的原理。

《PhoneGap精粹:建構跨平台的移動App》——1.3節PhoneGap工作機制

當開發人員在應用程式中使用phonegap實作某個功能時,該應用程式會通過javascript調用phonegap api,然後應用程式的某個特殊的層會将對phonegap api的調用翻譯成對應的原生api。比如在blackberry上調用攝像頭的方法就和在android上的不一樣,是以這個api公共層讓開發人員可以對不同平台使用同一接口,該接口會在作為容器的應用程式中被翻譯成對應平台的原生api。讓我們來看下使用phonegap的應用程式,javascript代碼看上去應該像下面這樣:

這裡我們傳入了兩個回調函數作為參數:onsuccess和onfail(在後面的章節中我們會詳細解釋)。

在blackberry上,上面這段代碼相當于在後端執行了下面的代碼:

雖然這裡列出的示例代碼并沒有涵蓋擷取圖檔過程的所有方面(比如處理錯誤或者處理傳回的圖檔),但是這個示例向我們展示了phonegap是如何簡化跨平台移動開發的。在phonegap支援的移動平台間,開發人員可以使用一個通用的api,phonegap會将這次調用翻譯成每個平台對應的原生api。這使得開發人員無需掌握大量潛在的技術,讓他們可以更專注于應用程式本身而不是如何在不同裝置上實作。

目前,phonegap支援以下api:

 accelerometer(加速度計)

 camera(攝像頭)

 capture(捕獲)

 compass(羅盤)

 connection(連接配接)

 contacts(通訊錄)

 device(裝置)

 events(事件)

 file(檔案)

 geolocation(地理位置)

 media(多媒體)

 notification(通知)

 storage(存儲)

随着新标準的演變,phonegap項目團隊會不斷提出其他的api。phonegap對于api的實作傾向根據w3c的device apis and policy(dap)working group(www.w3.org/2009/dap)的規範進行實作。該小組緻力于“創造一種用戶端api,通過該api可以在開發web應用程式和web元件時和裝置服務(比如月曆、通訊錄、攝像頭等)互動。随着dap api越來越規範,phonegap将會實作dap api。

随着時間的推移,當移動裝置浏覽器完全實作dap api時,phonegap就會失去價值。當所有移動浏覽器都支援dap api時,就沒有什麼功能是需要phonegap提供的了,同時phonegap也将消失。

apple和phonegap

在ios應用程式中,apple對能做什麼和不能做什麼有着嚴格的限制。在2009年9月,apple通過了phonegap應用程式(使用phonegap架構的0.8版本)。如今,在apple app store中已經有許多phonegap應用程式了。

繼續閱讀