在Windows Phone中使用HTML編程

在開發Windows Phone的項目中，需求中有幾個頁面是要用表格來布局的(效果圖如下)，由於Grid中有的邊線是虛的，而且沒有邊線，果斷放棄了，用了border將表格的線加上去了。於是在有表格布局的頁面，感覺很耗新能。在512M內存的手機上測試也不影響什么，於是就上傳到商店了。現在想起來，WP8不是可以用HTML5編程么？於是就寫了個DEMO來測試HTML的使用方法。

跟WinForm一樣，WP也有WebBrowser這個瀏覽器的框，所以可以在頁面上加個WebBrowser來作為HTML的容器，然后將對應的HTML頁面顯示在里面。

1、在VS2012中新建一個HTML5的項目

2、新建項目后看解決方案結構

   (vs會自動創建一個默認的HTML5程序示例，供開發者參考)

3 、將我們要制作的表格放到一個HTML頁面中去

<div>
        <table border="1">
            <tr>
                <td class="td-title">企業名稱</td>
                <td id="com"></td>
            </tr>
            <tr>
                <td class="td-title">企業法人</td>
                <td id="name"></td>
            </tr>
            <tr>
                <td class="td-title">法人電話</td>
                <td id="phone"></td>
            </tr>
            <tr>
                <td class="td-title">企業所在地</td>
                <td id="adress"></td>
            </tr>
            <tr>
                <td class="td-title">備案號</td>
                <td id="ipc"></td>
            </tr>
        </table>
        <p id="jianjie"></p>
    </div>

如何填充數據呢？→Ajax。但是如何動態的獲取數據呢？每個信息的id如何穿進去呢？就要看下一步了。

如果不想用Ajax，也可以直接將HTML代碼加載到WebBrowser中。具體的看文章結尾的分享。

4、進行JavaScript和C#，C#和JavaScript交互了。

如果能夠像Asp.Net一樣后台像前台HTML附加數據，或者傳出對應的Id號該有多好啊，可惜WP畢竟不是Asp.Net。如果你訪問的url（本地HTML）是加參數的話，那么用JavaScript可以直接獲取參數。如果只是單單的訪問一個頁面呢？比方/Html/index.html，如何用C#傳入對應的參數呢？

用js寫個方法

function GetID(id)
        {
            //你的方法
        }

然后你C#通過瀏覽器對象的InvokeScript方法來調用你的JS

Browser.InvokeScript("GetID","10010");

（InvokeScript方法支持多參數）

因為我是用HttpRequest去請求數據的，把id傳入后再用ajax去獲取數據感覺有點慢，於是乎就直接吧json數據通過C#傳入到HTML的js方法里。然后通過js方法將數據填充到對應的表格中

function InsertHtml(json) {
            json = $.parseJSON(json);//將字符串格式化成json格式
              

$(

"#com").html(json["CName"]);
            $("#name").html(json["Contact"]);
            $("#phone").html(json["CTel"]);
            $("#adress").html(json["CAddress"]);
            $("#ipc").html(json["OrgCoad"]);
            $("#jianjie").html(json["CIntro"]);
        }

Browser.InvokeScript("InsertHtml", "{\"CAddress\": \"**省**市**區**廣場1號門7樓\",       \"CIntro\": \"　　**建設集團有限公司成立於一九九三年，是一家綜合性建築業企業。<br>\",    \"CName\": \"**建設集團有限公司\",    \"CTel\": \"159****0500\",    \"Contact\": \"金**\",       \"OrgCoad\": \"733***90X\"  }");

結果就出來了。

(注意：如果要是用JS的話一定要在WebBrowser 控件中設置 IsScriptEnabled="True"，否則js不起作用)

如果我要在JS中調用C#撥打電話之類的操作呢？很簡單，WebBrowser提供了這個事件。如下

<input type="button" value="打電話" id="btn_call" style="width: 150px" /></p>

 <script type="text/javascript">
        $(function () {
           
            $("#btn_call").click(function () {
                window.external.notify("18300001111");
            });

        });
</script>

<phone:WebBrowser x:Name="Browser"
                          HorizontalAlignment="Stretch"
                          VerticalAlignment="Stretch"
                          Loaded="Browser_Loaded"
                                  IsHitTestVisible="True"
                                  IsScriptEnabled="True"
                          NavigationFailed="Browser_NavigationFailed"  Margin="0"                                                      ScriptNotify="Browser_ScriptNotify">
                </phone:WebBrowser>

private void Browser_ScriptNotify(object sender, NotifyEventArgs e)
        {
            PhoneCallTask phone = new PhoneCallTask();
            phone.PhoneNumber = e.Value;
            phone.Show();
        }

5、如果你的這個HTML頁面是在Pivot或者Panorama中的某個Item中，那么會遇到這個棘手的問題，就是手勢操作，左右滑動可能不會切換Item。那該怎么辦呢？不要急，toolkit里提供了一個組件供我們使用

<phone:WebBrowser x:Name="Browser"
                          HorizontalAlignment="Stretch"
                          VerticalAlignment="Stretch"
                          Loaded="Browser_Loaded"
                                  IsHitTestVisible="True"
                          NavigationFailed="Browser_NavigationFailed"  Margin="0" ScriptNotify="Browser_ScriptNotify">
                    
                    <toolkit:GestureService.GestureListener>
                        <toolkit:GestureListener Flick="GestureListener_Flick" />                        
                    </toolkit:GestureService.GestureListener>
                </phone:WebBrowser>

private void GestureListener_Flick(object sender, FlickGestureEventArgs e)
        {

            if (e.Direction.ToString() == "Horizontal")
            {
                if (e.Angle > 0)//手向左滑動，即Items向右滾動
                {
                    if (MyPivot.Items.Count == MyPivot.SelectedIndex + 1)
                    {
                        MyPivot.SelectedIndex = 0;
                    }
                    else
                    {
                        MyPivot.SelectedIndex++;
                    }

                }
                else//反之
                {
                    if (MyPivot.SelectedIndex == 0)
                    {
                        MyPivot.SelectedIndex = MyPivot.Items.Count;
                    }
                    else
                    {
                        MyPivot.SelectedIndex--;
                    }
                }
            }
        }

如果Items的header(如圖所示)沒有超過屏幕寬度的話會有bug，就是切換的方向問題，還未想到好的解決方案。

6、關於網頁與手機主題同步

 background-color: Background;/*Background跟系統背景一致*/
 color: Highlight;/*Highlight跟系統的主題色一致*/

 7、頁面的縮放

 說了這么多，你可能會問，一些頁面我並不想啊讓縮放，怎么控制啊。很簡單，由於瀏覽器對HTML5支持，所以只需要在HTML的Hand加入下面一段代碼即可

 <meta content="width=device-width,user-scalable=no" name="viewport">

<!--
   Viewport的Content相關屬性介紹
width - viewport的寬度 height - viewport的高度
initial-scale - 初始的縮放比例
minimum-scale - 允許用戶縮放到的最小比例
maximum-scale - 允許用戶縮放到的最大比例
user-scalable - 用戶是否可以手動縮放 
--!>

 

　　

8、資料分享

 Windows Phone WebBrowser的技巧  

  HTML5 in Windows Phone 8.zip  

 

(我對HTML5了解的也不多。如果哪里不對，請大家指正。共同學習，共同進步。)