在Windows Phone中使用HTML编程_移动开发_编程开发_程序员俱乐部

中国优秀的程序员网站程序员频道CXYCLUB技术地图
热搜:
更多>>
 
您所在的位置: 程序员俱乐部 > 编程开发 > 移动开发 > 在Windows Phone中使用HTML编程

在Windows Phone中使用HTML编程

 2013/10/11 18:23:37  ゞ修ζ止符℡_R²º¹³  博客园  我要评论(0)
  • 摘要:在开发WindowsPhone的项目中,需求中有几个页面是要用表格来布局的(效果图如下),由于Grid中有的边线是虚的,而且没有边线,果断放弃了,用了border将表格的线加上去了。于是在有表格布局的页面,感觉很耗新能。在512M内存的手机上测试也不影响什么,于是就上传到商店了。现在想起来,WP8不是可以用HTML5编程么?于是就写了个DEMO来测试HTML的使用方法。跟WinForm一样,WP也有WebBrowser这个浏览器的框,所以可以在页面上加个WebBrowser来作为HTML的容器
  • 标签:Windows 使用 编程

在开发Windows Phone的项目中,需求中有几个页面是要用表格来布局的(效果图如下),由于Grid中有的边线是虚的,而且没有边线,果断放弃了,用了border将表格的线加上去了。于是在有表格布局的页面,感觉很耗新能。在512M内存的手机上测试也不影响什么,于是就上传到商店了。现在想起来,WP8不是可以用HTML5编程么?于是就写了个DEMO来测试HTML的使用方法

跟WinForm一样,WP也有WebBrowser这个浏览器的框,所以可以在页面上加个WebBrowser来作为HTML的容器,然后将对应的HTML页面显示在里面。

1、在VS2012中新建一个HTML5的项目

2、新建项目后看解决方案结构

   (vs会自动创建一个默认的HTML5程序示例,供开发者参考)

image

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\"  }");

{96HMK@28_G@~UQGTBN)27E结果就出来了。

(注意:如果要是用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,就是切换的方向问题,还未想到好的解决方案。

image

6、关于网页与手机主题同步

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

 

7、资料分享

 Windows Phone WebBrowser的技巧    HTML5 in Windows Phone 8.zip 

 

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

上一篇: 类的关键字 下一篇: 没有下一篇了!
发表评论
用户名: 匿名