HTML5 On Windows Phone （2） windows phone mango上使用HTML5並與HTML5互動

通常使用本地程式來進行HTM5的開發時並不會採用自己實現瀏覽器的來承載HTML5頁面的做法，因為成本和效率得不到保證。

在Microsoft.Phone.Controls程式集裡微軟提供了WebBrowser控制項，可以通過設定WebBrowser控制項的URI屬性或使用nanvigate方法來導航到URI來顯示HTML5頁面。

樣本：

    <Grid x:Name="LayoutRoot" Background="Transparent">

        <phone:WebBrowser x:Name="Browser" IsScriptEnabled="True" />

    </Grid>

IsScriptEnabled屬性標明了當前瀏覽器控制項是否支援指令碼。

在assets檔案夾中有三項 一是JQUERY的js架構，sandcu.html是一個HTML5頁面，採用15個canvas來畫出scene中的15個塊作為一個簡單的拼圖。

在 Mainpage的後台代碼中

        public MainPage()

        {

            InitializeComponent();

            using (IsolatedStorageFile store = IsolatedStorageFile.GetUserStoreForApplication())

            {

                if (!store.FileExists("sandcu.html"))

                {

                    CreateFile(store, "sandcu.html", Application.GetResourceStream(new Uri("Assets/sandcu.html", UriKind.Relative)).Stream);

                }

                if (!store.FileExists("jquery.js"))

                {

                    CreateFile(store, "jquery.js", Application.GetResourceStream(new Uri("Assets/jquery.js", UriKind.Relative)).Stream);

                }

                if (!store.FileExists("scene.jpg"))

                {

                    CreateFile(store, "scene.jpg", Application.GetResourceStream(new Uri("Assets/scene.jpg", UriKind.Relative)).Stream);

                }

            }

            Browser.Loaded += (s, e) => Browser.Source = new Uri("sandcu.html", UriKind.Relative);

        }

由於在資源檔中得不到相對路徑的URI，所以普遍做法是將所需資源拷到隔離儲存區 (Isolated Storage)裡，其中的CreateFile函數是用來以指定名稱將資源檔寫入隔離儲存區 (Isolated Storage)裡，此處不詳細說明。

將程式run起來後可以看到sandcu.html已經展示在webbrowser裡了。

目前已有的跨平台開發架構有phoneGap，但是執行效率較低可自己進行簡單移植

    通過WebBrowser內建的InvokeScript可直接調用。

從HTML5代碼調用Native方法

從JS中可以向承載瀏覽器拋出參數，瀏覽器接到拋出的參數後做相應的流程處理。

將sandcu.html改寫 在DIV的onclick事件裡像外部容器即webbrowser拋出參數“sandcu”

在瀏覽器的ScriptNotify事件加入處理函數Browser_ScriptNotify（）

Windows Phone Game（XNA）與HTML5的互動

略

2.4 PhoneGap架構分析

http://www.phonegap.cn/

PhoneGap是再IOS和Android上應用比較廣泛的一個跨平台應用程式框架，在近日已經移植到了windows phone 7上，現在支援mango以上版本（含mango）

結構構成：

由三方庫，主題程式架構和web架構構成，

三方類庫主要用的是newtonsoft的json庫

主體程式架構由本地調用和終端中介層構成

 

其中的NaticeExecution.tt為模板檔案，可忽略

Plugin檔案夾地下的均為本地API調用中介層，非同步command為HTML頁面調用命令，以參數形式傳遞，使用PhoneGap架構後，預設的起始頁為index.html，以下以彈出messagebox來顯示裝置資訊為例簡述PhoneGap執行流程。

在li標籤裡的onclick事件綁定navigator.notification.alert()函數，並標明需要彈出的資訊內容。

在Phonegap.js（位於WWW檔案夾下）中由相應的函數來執行外部調用。

PhoneGap.exec = function(nativeMethodAndArgs)

{

  window.external.Notify(nativeMethodAndArgs);

};

而EXEC函數則統一進行外部瀏覽器通知，並將函數名和參數以字串參數的形式傳遞迴去。

在mainpage的後台代碼裡用BrowserScriptNotify來處理

在ProcessJavascript函數裡來分析回傳的參數，對於本地調用都非同步回調，當調用完成時使用InvokeScript方法來調用JS裡的callback。