【WebView2】(二)WinForm 引入 WebView2 显示 Web 内容

发布时间 2023-05-31 13:49:28作者: yinghualeihenmei

https://www.itsvse.com/thread-10362-1-1.html

需求:使用 VS 2022 新建一个 .NET Framework 4.7.2 的 WinForm 项目,引用 Microsoft.Web.WebView2 SDK 包,使用 WebView2 控件显示和渲染 Web 应用。Microsoft Edge WebView2 控件允许在本机应用中嵌入 web 技术(HTML、CSS 以及 JavaScript)。 WebView2 控件使用 Microsoft Edge 作为绘制引擎,以在本机应用中显示 web 内容。

回顾:

【WebView2】(一)初识 Microsoft Edge WebView2 技术
https://www.itsvse.com/thread-10361-1-1.html


WebView2 运行时

如果您的 Windows 系统没有安装 WebView2 运行时(Windows 11 系统默认已经安装),第一次需要手动下载,地址:https://developer.microsoft.com/zh-cn/microsoft-edge/webview2/

新建 WinForm 项目

打开 VS 2022 新建一个 .NET Framework 4.7.2 的 WinForm 项目,创建后需要引用 Microsoft.Web.WebView2 包,nuget 命令如下:

作者加班熬夜写的,代码回复可见。


在工具箱中,找到 WebView2 Windows Forms Control 下的 WebView2 控件拖动到 Form1 窗体,如下图:

<ignore_js_op>

提示:默认情况下,在 Visual Studio 2017 中, WebView2 不会显示在工具箱中。 若要使 WebView2 在工具箱中显示,请选择 “工具 > 选项 > 常规 ”>并将 自动填充工具箱设置设置为 True。

设置 webView21 控件 Dock: Fill,Source:https://www.itsvse.com/,如下图:

<ignore_js_op>

启动项目,可以看到 WinForm 应用程序成功加载和显示 Web 内容,如下图:

<ignore_js_op>

WinForm 应用程序大小

大家最关心的其中一个问题就是应用程序的大小,新建一个 WinForm 应用程序引用 WebView2 SDK 后,几乎没写任何代码后的程序大小为:1.36M,如下图:


<ignore_js_op>

显示 WebView2 运行时版本

如何通过 .NET 程序获取系统是否安装 WebView2 运行时或者 WebView2 运行时的版本呢?代码如下:

作者加班熬夜写的,代码回复可见。


<ignore_js_op>

调用 GetAvailableBrowserVersionString() 方法异常,就代表没有安装 WebView2 运行时


关于分发应用和 WebView2 运行时,参考:https://learn.microsoft.com/zh-cn/microsoft-edge/webview2/concepts/distribution

启用开发者工具

通过需要将 Web 应用和 WinForm 进行联调的过程中,有时候需要看 dom 元素或者网络资源请求,如何启用开发者工具呢?

可以启动后在 webview2 控件使用 F12 方法打开 DevTools 开发者工具,或者使用如下代码打开:

作者加班熬夜写的,代码回复可见。

如下图:

<ignore_js_op>

禁用右击菜单和开发者工具

在实际的生产环境中,我们将应用程序客户端部署到客户机器上面的时候,不希望用户能够右击(刷新、查看网页源代码等操作),并且禁用开发者工具和网页缩放控制,代码如下:
<ignore_js_op>

作者加班熬夜写的,代码回复可见。

Microsoft.Web.WebView2.Core API 文档:https://learn.microsoft.com/zh-cn/dotnet/api/microsoft.web.webview2.core?view=webview2-dotnet-1.0.1343.22
Microsoft.Web.WebView2.WinForms API 文档:https://learn.microsoft.com/zh-cn/dotnet/api/microsoft.web.webview2.winforms?view=webview2-dotnet-1.0.1343.22