在Windows Phone中使用HTML编程

原文:在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如何穿进去呢？就要看下一步了。

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、资料分享

Windows Phone WebBrowser的技巧

HTML5 in Windows Phone 8.zip

(我对HTML5了解的也不多。如果哪里不对，请大家指正。共同学习，共同进步。)

在Windows Phone中使用HTML编程相关推荐

如何在window系统VS中设置boost编程环境
在windows系统中设置boost编程非常简单: 1.下载boost软件包网址:http://www.boost.org/ 最新版:http://www.boost.org/users/histo ...
Windows编程—Windows驱动中定时器的使用
文章目录 Windows编程-Windows驱动中定时器的使用前言代码简单版升级版程序效果 Windows编程-Windows驱动中定时器的使用前言定时器操作是应用编程中非常常见的操作, ...
access ribbon 编程_基于Windows 7中的 Ribbon开发技术应用
Windows 7的画图工具采用了微软所称的Scenic Ribbon 界面,这种界面起初是在Office 2007中出现的,也在WordPad出现过.虽然很多用户还在抱怨 "不习惯Ribb ...
[.NET] 《Effective C#》快速笔记 - C# 中的动态编程
<Effective C#>快速笔记 - C# 中的动态编程静态类型和动态类型各有所长,静态类型能够让编译器帮你找出更多的错误,因为编译器能够在编译时进行大部分的检查工作.C# 是一种静 ...
Java中的多线程编程（超详细总结）
文章目录 Java中的多线程编程(超详细总结) 一.线程与多线程的概念二.线程与进程之间的关系三.一个线程的生命周期四.多线程的目的和意义五.线程的实现的方式 Java中的多线程编程(超详细总 ...
Snmp在Windows下的实现----WinSNMP编程原理
在Windows 下实现SNMP协议的编程,可以采用Winsock接口,在161,162端口通过udp传送信息.在Windows 2000中,Microsoft已经封装了SNMP协议的实现,提供了一套 ...
Windows Embedded Compact 7网络编程概述(上)
如今,不论是嵌入式设备.PDA还是智能手机,网络都是必不可少的模块.网络使人们更方便地共享设备上的信息和资源.而且,利用智能手机浏览互联网,也逐渐成为生活中的常见手段.物联网所倡导的物物相联,也离不开 ...
Android 开发中的多线程编程技术
此文章来自"Intel Software"应用开发多线程这个令人生畏的"洪水猛兽",很多人谈起多线程都心存畏惧.在Android开发过程中,多线程真的很难吗? ...
正确使用Windows Azure 中的VM Role
公告 :本博客为微软云计算中文博客的镜像博客. 部分文章因为博客兼容性问题 ,会影响阅读体验 .如遇此情况,请访问原博客 . 在2010 PDC大会上,我们介绍了Windo ...

在Windows Phone中使用HTML编程

在Windows Phone中使用HTML编程相关推荐

最新文章

热门文章