WebView2 使用及现状
前言
之前写过一篇文章来介绍WebView2:.Net桌面端开发使用WebView2,可以放弃CefSharp?
当时WebView2还是预览版,截止到今天,官方已经更新到1.0.705.50正式版本,对应的chrome 内核版本为:88.0.705.74,可以说更新的还挺频繁。刚好公司有个项目使用了CefSharp,就深入研究了一下WebView2的使用,这篇文章就来详细记录一下我的使用体验吧。
最新实战记录了WebView2的注意事项:WebView2的注意事项
老规矩,写技术类文章不注明开发环境还不如不写。
环境
运行环境:.Net Framework 4.5.2 (由于我的项目是基于452,所以这里没有用.Net 5)
开发环境:VS2019 16.8.2
框架语言:WPF
安装及使用
这个安装过程在上篇文章已经有了,就不再详述。
由于WebView2是基于Chrome内核的,所以必须有Chrome内核环境,有如下三种方式可以获取:
- 安装开发版的Edge (Chromium),稳定版的Edge目前不支持WebView2控件。
- 安装独立的WebView2 Runtime,它可以独立下载和升级 嵌入Edge chromium内核
- 嵌入Edge chromium内核
以上三种方法都可通过这个官方链接下载
初始化
有两种方法使用WebView2,上篇文章没有详细写第二种,再把官方文档的说明贴一下:
必须对CoreWebView2进行初始化,看一下微软官方的解释是因为创建 CoreWebView2 是一个昂贵的操作,它涉及启动 Edge 浏览器进程之类的操作。
有两种方法可导致创建 CoreWebView2:
1)设置 Source 属性(例如,可以通过标记执行此操作)。 这称为隐式初始化。
2)调用 EnsureCoreWebView2Async 方法。 这称为显式初始化。
<Border BorderThickness="2" BorderBrush="#2497F0"><webView:WebView2 x:Name="webView" Source="http://www.baidu.com"/>
</Border>
在使用第二种方法的时候需要特别注意:
if (this.webView != null)
{var path = AppDomain.CurrentDomain.BaseDirectory + "WebViewCache";var env = await CoreWebView2Environment.CreateAsync(userDataFolder: path);await webView.EnsureCoreWebView2Async();webView.CoreWebView2.Navigate("www.bing.com");}
如果只是在初始化的时候这么写,会发现最后一句话会报错,提示webView.CoreWebView2为空异常,这是因为创建 CoreWebView2 是通过调用底层的Chrome内核来初始化的,这里的await并不是等待CoreWebView2创建成功返回,而是等待去创建这个操作成功了返回。而真正的CoreWebView2的初始化才刚开始,所以下面直接执行Navigate报空异常。这里先需要注册一个CoreWebView2InitializationCompleted回调来等待CoreWebView2的初始化完成,
private void WebView_CoreWebView2InitializationCompleted(object sender, CoreWebView2InitializationCompletedEventArgs e){if (webView.CoreWebView2 != null){webView.CoreWebView2.Navigate("www.bing.com");}}
这样就可以了。
另外,在初始化的时候可以进行初始化环境配置
userDataFolder:设置用户目录
browserExecutableFolder:设置Chrome内核路径
options:环境相关参数
if (this.webView != null){var path = AppDomain.CurrentDomain.BaseDirectory + "WebViewCache";var env = await CoreWebView2Environment.CreateAsync(userDataFolder: path,browserExecutableFolder:path,options:new CoreWebView2EnvironmentOptions());await webView.EnsureCoreWebView2Async(env);
在我使用的当前环境下测试发现browserExecutableFolder这个内嵌Chrome内核的方式直接报错,可能是bug,或者是我的使用方式问题(虽然我自认就是按官方教程正确设置的),如果有高手欢迎指正
同时在初始化完成后可以对WebView2进行一些基本的功能设置
if (webView.CoreWebView2 != null){webView.CoreWebView2.Settings.AreDefaultContextMenusEnabled = false;webView.CoreWebView2.Settings.AreDevToolsEnabled = false;webView.CoreWebView2.Settings.IsZoomControlEnabled = false;webView.CoreWebView2.Settings.IsStatusBarEnabled = false;}
AreDefaultContextMenusEnabled :禁用网页右键功能
AreDevToolsEnabled:禁用开发工具,设为true,可通过F12打开开发者调试功能
IsZoomControlEnabled:禁用网页的放大缩小功能
IsStatusBarEnabled:禁用网页上加载页面的进度条功能
注册事件
webView.CoreWebView2.NavigationStarting += WebView_NavigationStarting;
webView.CoreWebView2.NavigationCompleted += WebView_NavigationCompleted;
webView.CoreWebView2.WebMessageReceived += CoreWebView2_WebMessageReceived;
webView.CoreWebView2.NewWindowRequested += CoreWebView2_NewWindowRequested;
...
WebView_NavigationStarting:跳转开始回调
WebView_NavigationCompleted:跳转结束回调
CoreWebView2_WebMessageReceived:收到页面消息回调
CoreWebView2_NewWindowRequested:打开新窗口时回调
下面演示在跳转开始判断当前地址是否是https,如果不是则取消跳转。
private void WebView_NavigationStarting(object sender, CoreWebView2NavigationStartingEventArgs e){String uri = e.Uri;this.txtUrl.Text = uri;if (!uri.StartsWith("https://")){//UriwebView.CoreWebView2.ExecuteScriptAsync($"alert('{uri} is not safe, try an https link')");e.Cancel = true;}}
以上只列出了几个常用的事件,详细可以查看官方文档:CoreWebView
与网页通信
客户端调用网页JS方法
if (webView.CoreWebView2 != null){webView.CoreWebView2.ExecuteScriptAsync($"test('{this.txtUrl.Text}')");}
JS调用客户端方法
这里略复杂一点,需要先注册一下AddHostObjectToScript:
webView.CoreWebView2.AddHostObjectToScript("bridge", new JavaScriptBridge());
在写一个类,专门用来提供给JS调用:JavaScriptBridge
这里需要注意必须得加上[ComVisible(true)]属性
[ComVisible(true)]public class JavaScriptBridge{public string Func(string param){string tmp = param;return tmp + "测试一下呀";}}
在网页端:
const bridge = chrome.webview.hostObjects.bridge;
console.log(await bridge.Func("testing..."));
部署应用
根据开头初始化提到的三种依赖方式,在实际使用中,可能第三种方式比较适合,即通过安装独立的WebView2 Runtime,也就是官方说的常青版程序,这个是将Chrome内核打包成一个程序,安装好就能受到官方的升级更新服务。
在运行程序前先检测一下是否安装了正确的内核程序:
由于安装程序过程并不可控,我这里用了比较笨的方法,就是在程序执行前每隔三秒去检测环境是否安装好。
[STAThread]public static void Main(){if (!CheckWebView()){MessageBox.Show("检测到当前未安装运行环境,正在启动安装程序,请稍后...");InstallWebView();Stopwatch.StartNew();while (!CheckWebView()){Thread.Sleep(3000);}}var application = new App();application.InitializeComponent();application.Run();}private static bool CheckWebView(){try{var str = CoreWebView2Environment.GetAvailableBrowserVersionString();if (!string.IsNullOrWhiteSpace(str)){return true;}}catch (Exception){return false;}return false;}private static void InstallWebView(){var path = AppDomain.CurrentDomain.BaseDirectory + "check";using (Process process = new Process()){process.StartInfo.UseShellExecute = false;process.StartInfo.FileName = path + "\\MicrosoftEdgeWebview2Setup.exe";try{process.Start();}catch (Exception ex){//MessageBox.Show(ex.Message);}} }
通过这个方法,就可以把Cefsharp那一堆内核程序从安装包里删除,大大缩小了软件包
现状
一切都看起来很美好,然而…
我在实际使用过程中,发现WebView2目前对WPF并不友好,直接上图:
发现了吗?所有写在WebView2后面的代码全被覆盖了,我一开始以为是我的使用问题,经过在github上官方反馈,才得知这是一个已知的bug,而且提了有一年多了,并没有解决这个问题,Issue,甚至有外国程序员发贴diss
这个问题目前官方并没有明确的修复日期,希望官方能早日解决吧。
更新于2022年1月25日,这个问题官方在最新预览版本已解决,详细请查看WebView2 终于修复了页面 UI 可见性没有随 WebView2 可见性而更改的 Bug
WebView2 使用及现状相关推荐
- 2022-2028年中国自动驾驶系统行业现状调研分析报告
[报告类型]产业研究 [报告价格]4500起 [出版时间]即时更新(交付时间约3个工作日) [发布机构]智研瞻产业研究院 [报告格式]PDF版 本报告介绍了中国自动驾驶系统行业市场行业相关概述.中国自 ...
- 2022-2028年中国UI设计行业现状调研分析及发展趋势研究报告
[报告类型]产业研究 [报告价格]4500起 [出版时间]即时更新(交付时间约3个工作日) [发布机构]智研瞻产业研究院 [报告格式]PDF版 本报告介绍了中国UI设计行业市场行业相关概述.中国UI设 ...
- 2022-2028年中国碲化镉薄膜太阳能电池行业发展现状分析及投资前景趋势报告
[报告类型]产业研究 [报告价格]4500起 [出版时间]即时更新(交付时间约3个工作日) [发布机构]智研瞻产业研究院 [报告格式]PDF版 本报告介绍了中国碲化镉薄膜太阳能电池行业市场行业相关概述 ...
- 2022-2028年中国钢铁电商产业竞争现状及发展前景预测报告
[报告类型]产业研究 [报告价格]4500起 [出版时间]即时更新(交付时间约3个工作日) [发布机构]智研瞻产业研究院 [报告格式]PDF版 本报告介绍了中国钢铁电商行业市场行业相关概述.中国钢铁电 ...
- 2022-2028年中国钢铁智能制造产业竞争现状及发展趋势分析报告
[报告类型]产业研究 [报告价格]4500起 [出版时间]即时更新(交付时间约3个工作日) [发布机构]智研瞻产业研究院 [报告格式]PDF版 本报告介绍了中国钢铁智能制造行业市场行业相关概述.中国钢 ...
- 2022-2028年中国抗盐粘土行业发展现状调查及前景战略分析报告
[报告类型]产业研究 [报告价格]4500起 [出版时间]即时更新(交付时间约3个工作日) [发布机构]智研瞻产业研究院 [报告格式]PDF版 本报告介绍了中国抗盐粘土行业市场行业相关概述.中国抗盐粘 ...
- 2022-2028年中国煤及褐煤行业发展现状及未来前景分析报告
[报告类型]产业研究 [报告价格]4500起 [出版时间]即时更新(交付时间约3个工作日) [发布机构]智研瞻产业研究院 [报告格式]PDF版 本报告介绍了中国煤及褐煤行业市场行业相关概述.中国煤及褐 ...
- 2021-2027年中国手机壳行业现状研究及发展趋势分析报告
[报告类型]产业研究 [报告价格]4500起 [出版时间]即时更新(交付时间约3个工作日) [发布机构]智研瞻产业研究院 [报告格式]PDF版 本报告介绍了中国手机壳行业市场行业相关概述.中国手机壳行 ...
- 2021-2027全球与中国经颅磁刺激仪(TMS)市场现状及未来发展趋势
[报告类型]产业研究 [报告价格]¥4500起 [出版时间]即时更新(交付时间约3个工作日) [发布机构]智研瞻产业研究院 [报告格式]PDF版 本报告介绍了全球与中国经颅磁刺激仪(TMS)行业市场行 ...
最新文章
- 网络流最大流EK算法板子
- 通过全局路由表的方式实现MPLS ***上互联网
- IOC操作Bean管理XML方式(注入集合类型属性)
- CSS3 -- display:flex
- Go 官方未来会不会支持循环引用?
- 今天升级Xcode 7.0 bata发现网络访问失败。
- glew,glfw实现最新的opengl-学习笔记4实现纹理
- 五大流程成就网络运维管理的基础
- 南海区妇幼保健院HIS数据容灾备份系统项目
- 操作系统ucore lab1
- R 语言 单位根检验
- DNS-域名系统 【应用层】【计算机网络】
- sqlserver日期减一天_第二人立减1000 | 去厦门吃的地道精彩不重样,没有比这更“惠”吃了!...
- 2017男宝宝起名大全来了,快来给你的孩子挑个好名字吧
- php+msyql在线教师备课系统
- vue 点击按钮实现随机颜色
- Proteus ISIS与Keil uVersion开发环境的互连
- Openssl加密库
- 如何打造自己的朋友圈?原来大咖都是这样发圈的
- 唯美网页烟花绽放动画js特效
热门文章
- 10.CM与CDH的卸载
- winscp下载很慢_winscp使用教程 两台电脑间传文件,winscp使用教程 两台电脑间传文件,软件介绍...
- <2021SC@SDUSC>【Overload游戏引擎】OvCore源码模块分析(一)——APIComponent
- 2022煤气考试练习题及在线模拟考试
- POE供电的安全传输距离,网线的选择有哪些建议
- 5G中CRC table的生成
- php设置虚拟域名,如何开发一个虚拟域名系统
- 从汽车之家上市谈电商
- okcc 呼叫中心系统最常见的三种搭建方案
- 如何读取、插入、更新xml文件