PhoneGap跨平臺移動應用開發框架體驗
早在7月份就聽說PhoneGap.移動應用產品往往常常考慮多個平臺的支持.單一平臺很難保證應用的覆蓋面或者換句話說就是用戶群體的量和持續的活躍性上從長期的角度而言往往存在短板.另外從開發的角度而言.多平臺的支持往往需要建立不同的技術團隊.而平臺之間開發技術也是完全迥異的. 開發一個具有相同業務的應用Natural-Application需要使用到不同平臺的框架和開發語言.使用 C/C++ 的 Symbian、使用 Object C 的 iOS 和使用 Java 的 Android 應用開發技術,幾乎是完全無法融合的. PhoneGap跨平臺移動應用開發框架正是應運而生.
Well .在介紹PhoneGap前關于移動平臺Application 需要搞清楚幾個概念:Web App,Native App,Hybird App:
移動平臺Application幾個概念:
Web App:這個主要是采用統一的標準的HTML,JavaScript.CSS等web技術開發.通過不同平臺的瀏覽器訪問來實現跨平臺.同時可以通過瀏覽器支持充分使用HTML5特性,缺點是這些基于瀏覽器的應用無法調用系統API來實現一些高級功能,也不適合高性能要求的場合.
Native APP:就是所謂的原生應用.指的是用平臺特定的開發語言所開發的應用.使用它們的優點是可以完全利用系統的API和平臺特性,在性能上也是最好的。缺點是由于開發技術不同,如果你要覆蓋多個平臺,則要針對每個平臺獨立開發,無跨平臺特性.
Hybird App:則是為了彌補如上兩者開發模式的缺陷的產物.分別繼承雙方的優勢.首先它讓為數眾多的web開發人員可以幾乎零成本的轉型成移動應用開發者;其次,相同的代碼只需針對不同平臺進行編譯就能實現在多平臺的分發,大大提高了多平臺開發的效率;而相較于web App,開發者可以通過包裝好的接口,調用大部分常用的系統API.
而PhoneGap正是Hybird APP目前框架中集大成者. 一方面以標準HTML JavaScript技術開發應用通過瀏覽器的方式實現跨平臺的概念.另外它也滿足在能夠應用直接調用核心功能的API.用PhoneGap官方的一句話概況其特點是:”written once, run everywhere”-一次編譯到處運行.
<1>PhoneGap發展歷程
本篇我并不打算介紹一些PhoneGap基礎概念.而是想說說最近幾天在體驗PhoneGap中碰到一些困惑.以及找到一些關于這些問題的答案.如果你不了解PhoneGap是什么可以通過如下鏈接:
PhoneGap Platform:
關于PhoneGap整理其發展歷程如下:
其實PhoneGap原來是由一家加拿大的小公司開發支持. 它真正開始成名是在2008年的在San Francisco舉辦的iPhoneDevCamp上.很快就在2009年由O’Reilly Media舉辦的2009 Web 2.0 大會贏得了“開發者選擇”獎的殊榮.而正在此時項來以封閉的著稱的蘋果帝國-蘋果公司正式認同這個開發框架.甚至為此特意修改了4.0版開發者協議。其實這也是蘋果支持為數不多的開放標準之一HTML5一次選擇.
2009年2月25日,PhoneGap0.60正式發布,這是第一個穩定版,同時支持iOS、Android、BlackBerry三個平臺.
2009年8月到2010年7月,PhoneGap實現了對Windows Mobile、Nokia WRT(S60)、Palm、Symbian^3平臺的支持,支持平臺達到6個.Worklight和appMobi等移動應用開發平臺也采用了PhoneGap框架作為對其移動客戶端開發引擎的支撐.
2011年10月,Adobe收購了創立PhoneGap項目的Nitobi公司,隨后把PhoneGap項目捐給了Apache基金會,但Adobe保留了PhoneGap的商標所有權(該項目在Apache旗下的名稱是Apache Callback)。
2011年7月29日,PhoneGap發布了1.0版產品。PhoneGap 1.0的推出,該版本重點是訪問本地設備的API.
2011年11月7日,PhoneGap1.2.0發布,隨著微軟的介入這個版本正式支持Windows Phone 7,至此支持的平臺數達到7個.
<>PhoneGap原理
其實在看到PhoneGAp實現Windows phone 和其他平臺IOs Android平臺應用互動Demo后.我當時就很疑惑PhoneGap如何實現的?其實談到這點.很多人往往關注到PhoneGap解決了了什么.卻忽略了作為跨平臺移動應用框架所在交互上所面臨的問題.
“written once, run everywhere” 這句話要解決跨平臺移動應用框架兩個無法規避的問題:
存在問題:
A:首先要解決平臺之間兼容問題.實現其跨平臺的特性.必須要在開發技術上要跨越各個平臺開發編程語言和框架的界限.
B: 其次要能夠實現和各平臺的SDK API實現無差別的交互.
這兩點其實也正是PhoneGap所最開始的設計初衷.那么PhoneGap如何解決這兩個問題?
首先在解決平臺兼容性問題上.來看看PhoneGap使用的開發技術-[HTML+CSS+JavaScript等].不難看出這些具有成熟統一標準的web前段技術[HTML+CSS+JavaSCript],在各個主流平臺支持HTML 5背景下.這些技術都是支持和認可的.PhoneGap的做法是采用成熟的腳本和 Web 技術作為實現平臺兼容的切入點. 而未來HTML 5標準之一就是跨平臺特性. 無疑為這種成熟解決方案創造了可能.具體來說這些開發技術[HTML+CSS+JavaScript]在PhoneGap主要實現應用程序UI呈現和組織業務邏輯功能.對于移動應用框架的跨平臺性 有一張很好解釋圖:
其實在說到和各個平臺SDK API實現無差別的交互上.PhoneGap通過調用JavaSCript 調用API庫實現和各個平臺的SDK進行無差別的交互. 以達到調用不同平臺手機上攝像頭,文件系統,重力感應.GPS定位等功能.從第二張圖中可以看出.雖然能夠實現這種方式實現SDK API調用.但是各個平臺之間依然存在差異.但Windows phone 支持所有PhoneGap對SDK操作.
雖然能夠實現JavaScript調用Windows phone SDK功能.當我按照官方給出的API文檔簡單實現幾個功能后. 我不禁有些疑惑這種在JavaScript中直接實現調用SDK API在框架中是如何實現的.?
其實這個問題也不難找到.PhoneGap在運行時.會吧編寫的HTML、CSS,Javascript文件處理成一種類似”文件鏡像”方式.然后通過瀏覽器解析執行.在解析執行的過程中會調用SDK 中API.
而調用SDK中API方式其實你只要打開fildder工具監聽請求.就能看到每次調用時會發送Ajax請求,也就是通過腳本向設備發送消息方式.當設備接到消息后解析處理后通過調用XAML固定的WebView瀏覽器控制的Load方法執行腳本從而實現腳本回調.這就是PhoneGap通過JavaScript調用SDK 中API的”秘密“所在. 圖解如下:
<3>PhoneGap在Windows phone 體驗
如下在Windows phone開發環境構建幾個簡單PhoneGap應用來體驗一下其執行過程.So 如果你不了解如何在Windows phone 中搭建PhoneGap開發環境請參考如下鏈接:
How to Build development environment :
Build PhoneGap Development Environment HomePage
API Docs:
構建一個PhoneGap Application 命名:PhoneGapBuildAppDemo
從初始的解決方案的結構來看.Gaplib目錄下包含一個WP7GapClassLib.dll. WWW目錄下則是要編寫發布 運行時展示的內容.如果要遷移支持多平臺.這是核心內容.關于一次編譯到處運行.很多開發人員可能產生一些誤解. 即使我們在Windows phone 平臺成功編譯運行.還是需要Copy WWW目錄下文件遷移到其他平臺.做一些必要調整和修改.
至于Plugins目錄稍后解釋. 打開MainPage.xml文件發現只有一個定制的WEbBrowser控件:
1: <!--xmlns:my="clr-namespace:WP7GapClassLib;assembly=WP7GapClassLib"-->
2: <my:PGView HorizontalAlignment="Stretch"
3: Margin="0,0,0,0"
4: Name="PGView"
5: VerticalAlignment="Stretch" />
.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /white-space: pre;/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }
</style> 運行時加載解析的是www目錄下Inde.html網頁內容.Well.這里我們現實當前平臺一些基本信息.可以在API Doc文檔找到Deveice現實信息的API,修改JavaSCript如下:</p>
1: <script type="text/javascript">
2: document.addEventListener("deviceready", onDeviceReady, false);
3:
4: // once the device ready event fires, you can safely do your thing! -jm
5: function onDeviceReady() {
6: document.getElementById("welcomeMsg").innerHTML += 'Device Name: ' + device.name + '<br />' +
7: 'Device PhoneGap: ' + device.phonegap + '<br />' +
8: 'Device Platform: ' + device.platform + '<br />' +
9: 'Device UUID: ' + device.uuid + '<br />' +
10: 'Device Version: ' + device.version + '<br />';
11: }
12:
13: </script>