Windows phone 應用開發[8]-體驗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」-一次編譯處處運行.

 

本篇我並不打算介紹一些PhoneGap基礎概念.而是想說說最近幾天在體驗PhoneGap中碰到一些困惑.以及找到一些關於這些問題的答案.若是你不瞭解PhoneGap是什麼能夠經過以下連接:

PhoneGap Platform: PhoneGap Home Page PhoneGap On WikiPedia PhoneGap on Baidu Baike

關於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實現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的」祕密「所在. 圖解以下:

以下在Windows  phone開發環境構建幾個簡單PhoneGap應用來體驗一下其執行過程.So 若是你不瞭解如何在Windows phone 中搭建PhoneGap開發環境請參考以下連接:

How to Build development environment ： Build PhoneGap Development Environment HomePage API Docs: http://docs.phonegap.com/en/1.3.0/index.html

構建一個PhoneGap Application 命名:PhoneGapBuildAppDemo

從初始的解決方案的結構來看.Gaplib目錄下包含一個WP7GapClassLib.dll. WWW目錄下則是要編寫發佈 運行時展現的內容.若是要遷移支持多平臺.這是核心內容.關於一次編譯處處運行.不少開發人員可能產生一些誤解. 即便咱們在Windows phone 平臺成功編譯運行.仍是須要Copy WWW目錄下文件遷移到其餘平臺.作一些必要調整和修改.

至於Plugins目錄稍後解釋. 打開MainPage.xml文件發現只有一個定製的WEbBrowser控件:

<!--xmlns:my="clr-namespace:WP7GapClassLib;assembly=WP7GapClassLib"-->   <my:PGView HorizontalAlignment="Stretch"
         Margin="0,0,0,0"
         Name="PGView"
         VerticalAlignment="Stretch" />

運行時加載解析的是www目錄下Inde.html網頁內容.Well.這裏咱們現實當前平臺一些基本信息.能夠在API Doc文檔找到Deveice現實信息的API,修改JavaSCript以下:

<script type="text/javascript">
    document.addEventListener("deviceready", onDeviceReady, false);

  // once the device ready event fires, you can safely do your thing! -jm
  function onDeviceReady() {
      document.getElementById("welcomeMsg").innerHTML += 'Device Name: ' + device.name + '<br />' +
                      'Device PhoneGap: ' + device.phonegap + '<br />' +
                      'Device Platform: ' + device.platform + '<br />' +
                      'Device UUID: ' + device.uuid + '<br />' +
                       'Device Version: ' + device.version + '<br />';
   }

 </script>

運行應用程序:

能夠看到經過JAvaScript中調用直接訪問Windows phone SDK 中API拿到當前設備的基本信息.若是你以爲PhoneGap還不足夠媲美Windows phone 自身SDK API能力.那麼JAvaScript中直接調用設備的攝像頭.並可以實現攝像頭圖片截屏. 並保存到圖片庫中. 保存成功後.JAvaScript依然可以可以訪問指定圖片相冊去讀取截圖文件. 只需需該一段JAvaScript 輕鬆實現截屏功能:

<script type="text/javascript" charset="utf-8">
navigator.camera.getPicture(onSuccess, onFail, { quality: 50 });

function onSuccess(p_w_picpathData) {
    var p_w_picpath = document.getElementById('myImage');
    p_w_picpath.src = "data:p_w_picpath/jpeg;base64," + p_w_picpathData;
}

function onFail(message) {
    alert('Failed because: ' + message);
}
</script>

 

運行時截圖:

具體調用攝像頭的實例請參考官方API文檔：http://docs.phonegap.com/en/1.3.0/phonegap_camera_camera.md.html#Camera .

well.出了官方提供的通用的SDK API.咱們依然可以從第二章圖能看出有些SDK API調用也是因平臺不一樣而 各異. 不由有開發人員提出一些具體而實際的需求.若是說要在PhoneGap直接調用PhoneCallTask任務實現打電話功能. 這裏就必須提到如上解決方案中Plugins目錄.

Plugins目錄固然顧名思義.就是擴展的插件.PhoneGap有一個另外很重要的特色就是對對應平臺能夠供開發人員插件的方式集成SDK API中功能.實現即插即用的框架組織結構.這對開發人員無心給出最大的擴展自由. 若是咱們PhoneGap集成一個打電話功能.首先要在Plugins目錄建立一個PhoneTaskService類 添加引用:

using Microsoft.Phone.Tasks;
using WP7GapClassLib.PhoneGap;

定義類:

public class PhoneTaskService : BaseCommand
{
    public void ExcutePhoneCallTask()
    {
        PhoneCallTask mefPhoneCallTask = new PhoneCallTask();
        mefPhoneCallTask.DisplayName = "China Mobile Customer Service";
        mefPhoneCallTask.PhoneNumber = "10086";
        mefPhoneCallTask.Show();
    }
 }

首先修改類命名空間.將該類作爲 PhoneGap 運行庫命名空間，所以將該類的命名空間修改成WP7GapClassLib.PhoneGap.Commands. 另外咱們還必須繼承 PhoneGap 運行庫的 BaseCommand 類，以便咱們能夠在 JavaScript 中調用到該類. 定義JAvaScript調用:

function CallComposer(){
    this.resultCallback = null;
}

CallComposer.prototype.showCallComposer = function(toRecipients, body)
{
    var args = {};

    if(toRecipients)
         args.toRecipients = toRecipients;

    if(body)
        args.body = body;

    PhoneGap.exec(null, null, "PhoneCall", "call", args);

}

PhoneGap.addConstructor(function () {
    if (!window.plugins) {
        window.plugins = {};
    }
    window.plugins.CallComposer = new CallComposer();
  }
);

在解決方案另存爲.JS文件. 經過<Script>引用Index.HTML頁面.經過以下方式JavaScript代碼調用:

window.plugins.CallComposer.showCallComposer(recipients, message)

PhoneGap針對不一樣平臺的WebView作了擴展和封裝，使WebView這個組件變成可訪問設備本地API的強大瀏覽器，因此開發人員在PhoneGap框架下可經過JavaScript訪問設備本地API.實現WebView與SDK API雙向通訊.但PhoneGAp所體現的混合類型的應用還不能徹底取代原生應用，在一些複雜的API調用或者涉及高性能計算的應用開發上，原生應用仍是惟一的選擇。除此之外的大多數場合，混合類型的應用以很小的性能犧牲爲代價，帶來了極大的靈活性和開發效率.

固然PhoneGap依然存在不少問題:

存在的問題: 運行速度慢：PhoneGap集成多了個平臺.程序的載入和UI界面的反應都比原生的程序慢，UI反應延時——這是個致命傷 .它實際上仍是在展現Web頁面，因此載入、頁面刷新等確定是須要必定時間的。 這在用戶體驗上來講PhoneGAp依然沒法替代原生應用程序. 不適合部分程序：若是你的程序須要3D功能，或者對界面刷新有較高的要求，這樣的程序如今來講還只是用原生的語言會比較好.PhoneGap支持API還有待在各個平臺逐步完善

開發者能夠選擇jQueryMobile和SenchaTouch等JavaScript庫加速開發進度，使用AppMobi和Tiggr等集成開發環境進行開發和調試（經過拖拽進行排版、在線編碼以及運行各類移動設備的模擬器），也能夠選擇PhoneGap Build這個專業的在線編譯工具提供編碼效率.固然與其相似還有Titanium.Rhodes 等跨平臺移動開發框架.

PhoneGap提供一種多平臺解決方案.無疑爲開發提供一種方式可參考思路.

參考資料:

PhoneGap On Baidu Baike

PhoneGap Online Doc API

PhoneGAp Build Tool

PhoneGap HomePage

PhoneGap on GitHub