windows phone开发-Webbrowser使用技巧

5月份开发了脸萌WP版,其中需要使用web技术来绘制图像,于是就使用了原生webbrowser控件。在使用webbrowser control的过程中,发现了一些坑,也总结的几个小技巧,分享给大家。

首先我们需要了解下webbrowser control,与桌面windows平台上的webbrowser一样,都是基于IE内核封装的web展示控件,用法与wpf基本一致,同时也是非托管资源,但wp平台上没有实现IDispose接口,带了了内存控制的挑战。此外,webbrowser本身支持有限的js script和c#代码交互,带来了更多的可操作性。

1.c#调用webbrowser function

这里主要是指使用本地代码(C#)和webbrowser加载的Javascript代码的交互行为,利用此方法可以很容易的实现web项目对wp原生项目的移植,这对web开发者来讲是很方便的。这里主要给大家介绍2个API:分别是InvokeScript()方法以及ScriptNotify事件。

InvokeScript方法可以传参并执行webbrowser加载的javascript代码中的函数,实现对应的效果,用法如下:

webbrowser.InvokeScript("initPerson");
webbrowser.InvokeScript("initPerson", new string[] {"0","2001","1" });

第一段就是简单的调用js function,第二行则是传递参数并调用js function。这两种方法使用起来很灵活,足以来处理很多的交互行为。以脸萌WP版为例,我在C#中处理各种用户行为,并将获得的参数传入webbrowser,js 脚本响应后会动态执行,使用web技术绘制出我想要的头像,这非常灵活。

同时,对js 函数适当的封装可以提高交互效率,因为InvokeScript可传入的参数类型只能为 string[],js函数不恰当的封装会导致交互的困难,甚至是无法交互,下面我举例说明:

 var personA = {
            ‘eye‘: {
                ‘id‘: 0
            },
            ‘hair‘: {
                ‘id‘: 0
            }
        };

        function initPerson(person) {
            a = person.eye.id;
            b = person.hair.id;
        }

这里的initPerson函数需要直接传入javascript对象,这是InvokeScript难以直接传入的,但我们可以进行简单的封装,就可以顺利的实现意图,如下:

var personA = {
            ‘eye‘: {
                ‘id‘: 0
            },
            ‘hair‘: {
                ‘id‘: 0
            }
        };

        function initPerson(person) {
            a = person.eye.id;
            b = person.hair.id;
        }
        function drawPerson(eyeId, hairId) {
            personA.eye.id = eyeId;
            personA.hair.id = hairId;
            initPerson(personA);
        }

这样C#就直接可以写为:

webbrowser.InvokeScript("drawPerson", new string[] {"0","2001" });

能够顺利的实现交互,以上只是方法之一,大家还可以直接传入一个字符串,然后再在javascript中进行处理,如下:

function initPerson(person) {
            if (typeof person == ‘string‘)
                var person = eval(person);
            a = person.eye.id;
            b = person.hair.id;
        }

C#:

webbrowser.InvokeScript("initPerson", "{ ‘eye‘: {‘id‘: 0 }, ‘hair‘: { ‘id‘: 0}}");

借助神奇的eval()函数,同样可以实现我们想要的效果。MVP郝冠军告诉我,使用eval并不恰当,可以使用Native json API来替代,大家可以自行搜索下用法,使用方式和eval一致。

2.webbrowser调用C#脚本

这里使用的API主要是ScriptNotify事件,可以实现javascript函数调用c#脚本的效果,能够动态的改变整个应用的行为,这能够使得基于web技术的app调用更高级的原生功能,包括位置,推送,动态磁贴等等,是不是觉得很棒呀,下面我们来看简单的实现方式。

首先webbrowser需要注册ScriptNotify事件,以接收来自javascript的信息

webbrowser.ScriptNotify += (e, g) =>
            {
                //响应代码
                var result = g.Value;
            };

同时,javascript发送数据方式如下:

window.external.notify("参数");

如此即可实现webbrowser与整个app的动态交互,这是非常便利的。

3.webbrowser的内存控制

由于webbrowser是非托管资源,同时wp上未实现IDispose接口,这给app的内存带来了很大压力,每次导航都可以明显发现有20M左右内存没有释放,经过多次检查,发现是webbrowser的资源没有释放,同时也发现强制GC也没有任何效果,最终经过一番学习,通过js来进行释放,大幅减小了内存的消耗,但仍不彻底,诸位大牛如果有好的办法可以指点下我。下面是我的方法:

js中将所有使用的资源都做空处理:

function memoryRelease() {
            personA = null;
            window = null;
        }

C#每次在离开当前页面时执行它:

protected override void OnNavigatedFrom(NavigationEventArgs e)
        {
            webbrowser.InvokeScript("memoryRelease");
        }

通过这种方式可以有效的减少内存泄漏,仅做抛砖引玉只用。

最后,silverlight架构下的webbrowser控件虽然坑不少,但仍是一个非常灵活的控件,这对于使用html5开发跨平台app的开发者来讲,是个非常棒的方式。

windows phone开发-Webbrowser使用技巧

时间: 2024-10-27 21:40:04

windows phone开发-Webbrowser使用技巧的相关文章

windows phone 开发常用小技巧 - 退出应用之升级版(三秒内双击退出)

//设置一个DispatcherTimer,控制三秒内再次点击返回键时执行退出逻辑 public void ExitBy2Click(System.ComponentModel.CancelEventArgs e) { if (!IsExit) { IsExit = true; e.Cancel = true; _timer = new DispatcherTimer(); _timer.Start(); SystemTrayMessage.Instance.StartAdv("再按一次退出&q

windows phone 开发常用小技巧 - 退出应用

wp7 //退出应用 new Microsoft.Xna.Framework.Game().Exit(); ================================================== wp8中无法使用上边的方法,下边两种都可行 1. while (NavigationService.BackStack.Any()) NavigationService.RemoveBackEntry(); base.OnBackKeyPress(new CancelEventArgs()

windows phone 开发常用小技巧 - 命名空间 Microsoft.phone.Controls.Toolkit 中不存在名称

有时候从网上下来的项目示例,打开时页面会有莫名的找不到引用的报错,而dll文件确实存在,这有可能是文件被保护锁定了,找到该dll文件右键属性点击解除锁定,重新生成一下项目就可以了 windows phone 开发常用小技巧 - 命名空间 Microsoft.phone.Controls.Toolkit 中不存在名称

Windows App开发之更多技巧

使用华丽丽的字体 所有的TextBlock等都用的默认字体,大家是否会感觉很千篇一律很枯燥呢?对于FontFamily,我们见过一些可以用的字体,但这个属性不像Foreground等有下拉框,所以我们在应用中见过的许多有意思的字体却没法用,因为不知道名字. 代码的话也贴张图示意一下吧. 好了,我就不再多说废话啦,名字都是从这里来的-->>>>> 注意: 1)除了微软雅黑外,大部分字体只能在Windows 8/8.1/10上体现出来,在WP8/8.1上无法发挥作用.这是因为这个

Windows Phone开发人员必看资料

win phone开发必看资料,下载地址收藏啦!收藏后可有选择性的下载,希望大家喜欢! 完整附件下载:http://down.51cto.com/data/414417 附件预览: Windows Embedded Standard开发初体验[课件汇总] http://down.51cto.com/data/65627 利用Windows Embedded Standard 7构建操作系统映像 http://down.51cto.com/data/65761 Windows Embedded S

Android开发工程师应该知道的50个开发秘诀、技巧和资源分享

作者撰写本文的初衷,是为了罗列出Android Studio有用的提示.技巧.快捷方式和参考资源,将提高您的整体效率和操作性能. 显然,还有很多优化.快捷方式等,但作者为了保持这篇文章的简短,限制为50个,希望读者会喜欢这篇文章! InfoQ注:本文是以MacOS X操作Android Studio为例,与Windows / Linux不一致的地方已经标注,请读者注意这一点. 可视化 1.Android Logcat的材料颜色主题(Material Colors theme). 要更改Andro

[转]15个关于Chrome的开发必备小技巧

谷歌Chrome,是当前最流行且被众多web开发人员使用的浏览器.最快六周就更新发布一次以及伴随着它不断强大的开发组件,使得Chrome成为你必备的开发工具.例如,在线编辑CSS,console以及debugger这些常用的调试技术,或许你已经了解.在本篇文章中,我们将介绍15个炫酷且实用的技巧,这将更快的提高你的开发效率. 一.快速查找文件 如果你使用过Sublime,那么你会知道'Go to anything'的强大.没错,Chrome现在也有了这一功能. 操作如下: 1.F12打开你的Ch

Windows App开发之开发准备

操作系统及SDK 操作系统 显而易见.想要开发Windows App就得在Windows 8/8.1/10上进行.老旧的Windows XP/Vista/7已经不能满足时代的须要了. 当然.在Windows App的发展过程中,其本身也有着较大的变动,为了使用新的特性,建议使用Windows 10.我在写这个教程时.Windows 10正式版并未面世,因此临时未介绍Windows 10上的新特性,随后会继续更新,欢迎您的继续关注. 操作系统除了在官网下载之外.还能够在DreamSpark等地方下

Windows驱动程序开发基础(四)驱动的编译调试和安装

Windows驱动程序开发基础,转载标明出处:http://blog.csdn.net/ikerpeng/article/details/38793995 下面说一下开发出来驱动程序以后如何编译.一般有以下几种方式: 1. 建立Makefile文件,用nmake工具进行编译和链接: 2. 建立Makefile,sources, dirs文件,用build工具编译. 3. 用集成开发环境进行编译链接. 我采用的是第三种方式,通过VS2010+wdk配置Windows驱动程序开发环境.地址:   h