在开发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如何穿进去呢？就要看下一步了。
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了解的也不多。如果哪里不对，请大家指正。共同学习，共同进步。)
