WebView2使用入门

在WinForms（Windows Forms）应用程序中集成网页浏览功能，可以通过多种方式实现。其中，**Microsoft 的 WebView2 控件** 是目前推荐的现代解决方案.

在WinForms（Windows Forms）应用程序中集成网页浏览功能，可以通过多种方式实现。其中，Microsoft 的 WebView2 控件 是目前推荐的现代解决方案，它基于 Chromium 引擎，提供了更好的性能和兼容性。相比于传统的 WebBrowser 控件，WebView2 提供了更现代的浏览体验和更多的功能。

本文将详细介绍如何在WinForms应用程序中添加和使用WebView2控件，包括必要的准备工作、安装步骤、基本用法以及一些常见的配置和优化技巧。

目录¶

WebView2 简介
准备工作
在WinForms中添加WebView2控件
- 方法一：通过NuGet包管理器安装WebView2
- 方法二：手动安装WebView2控件
基本用法示例
加载网页和导航
处理WebView2事件
配置WebView2控件
常见问题与解决方法
最佳实践
参考资料

1. WebView2 简介¶

WebView2 是 Microsoft 提供的一个基于 Chromium 的浏览器控件，旨在为桌面应用程序提供现代的网页浏览功能。它支持最新的Web标准，提供了比旧的 WebBrowser 控件更好的性能和更高的兼容性。

主要优势：

基于 Chromium：提供现代浏览器的性能和兼容性。
独立于应用程序：与操作系统自带的浏览器渲染引擎（如Internet Explorer）无关。
灵活的安装选项：可以选择独立安装WebView2运行时或将其作为应用程序的一部分打包。
丰富的API：支持JavaScript与应用程序之间的双向通信，丰富的事件处理等。

2. 准备工作¶

在开始之前，开发环境需要满足以下要求：

操作系统：Windows 10 版本 1809 及以上。
Visual Studio：推荐使用 Visual Studio 2019 或更高版本。
.NET Framework：WinForms项目通常基于 .NET Framework 4.6.2 及以上或 .NET Core/5+/6+。

安装WebView2运行时¶

WebView2控件需要安装 WebView2运行时。可以选择以下两种方式之一：

Evergreen Bootstrapper：推荐用于开发和测试环境，自动更新。
- 下载链接
Evergreen Standalone Installer：适用于部署给终端用户。
- 下载链接
固定版本：适用于需要特定版本的场景，确保一致性。
- 下载链接

注意：在开发过程中，确保运行时已正确安装，以避免运行时错误。

3. 在WinForms中添加WebView2控件¶

有两种主要方法可以在WinForms应用程序中添加WebView2控件：

方法一：通过NuGet包管理器安装WebView2¶

这是最简单和推荐的方法，适用于大多数场景。

步骤：¶

打开的WinForms项目：
- 在Visual Studio中，打开要添加WebView2控件的WinForms项目。
打开NuGet包管理器：
- 右键点击解决方案资源管理器中的项目，选择 “管理NuGet程序包…”。
搜索并安装Microsoft.Web.WebView2：
- 在 “浏览” 标签下，搜索 Microsoft.Web.WebView2。
- 选择 Microsoft.Web.WebView2 包，点击 “安装”。
等待安装完成：
- 安装完成后，项目中将引用WebView2控件的必要库。

方法二：手动安装WebView2控件¶

如果无法使用NuGet包管理器，或需要特定版本的WebView2，可以选择手动安装。

步骤：¶

下载WebView2 SDK：
- 前往 Microsoft.Web.WebView2 NuGet页面下载对应版本的SDK。
添加引用：
- 将下载的DLL手动添加到项目中。
- 在解决方案资源管理器中，右键点击 “引用”，选择 “添加引用…”，然后浏览到DLL文件并添加。
添加控件到工具箱（可选）：
- 右键点击 “工具箱”，选择 “选择项…”。
- 浏览到WebView2的DLL文件，勾选 WebView2 控件，然后点击 “确定”。
- 现在，WebView2控件将出现在工具箱中，可以直接拖放到窗体上。

4. 基本用法示例¶

以下是一个简单的示例，展示如何在WinForms应用程序中使用WebView2控件加载和显示网页。

步骤：¶

创建新的WinForms项目：
- 打开Visual Studio，选择 “创建新项目”。
- 选择 “Windows Forms 应用程序 (.NET Framework)” 或 “.NET Core”，点击 “下一步”。
- 配置项目名称和位置，点击 “创建”。
添加WebView2控件到窗体：
- 确保已经通过NuGet安装了 Microsoft.Web.WebView2 包。
- 在 工具箱 中，找到 WebView2 控件（如果未出现，请重新启动Visual Studio或重新加载项目）。
- 将 WebView2 控件拖放到窗体上。
调整控件大小：
- 将WebView2控件调整为适合窗体的大小，例如填满整个窗体。

加载网页：

双击窗体空白区域，进入代码编辑器，找到窗体的 Load 事件处理程序。
添加以下代码以加载指定的网页：

using System;
using System.Windows.Forms;

namespace WebView2Example
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private async void Form1_Load(object sender, EventArgs e)
        {
            // 确保WebView2运行时已初始化
            await webView21.EnsureCoreWebView2Async(null);
            
            // 设置要加载的URL
            webView21.CoreWebView2.Navigate("https://www.microsoft.com");
        }
    }
}

运行应用程序：
- 按 F5 运行应用程序，应该能在WebView2控件中看到指定的网页。

完整代码示例¶

以下是完整的 Form1.cs 文件示例：

using System;
using System.Windows.Forms;

namespace WebView2Example
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private async void Form1_Load(object sender, EventArgs e)
        {
            try
            {
                // 初始化WebView2
                await webView21.EnsureCoreWebView2Async(null);
                
                // 导航到指定URL
                webView21.CoreWebView2.Navigate("https://www.microsoft.com");
            }
            catch (Exception ex)
            {
                MessageBox.Show($"WebView2初始化失败: {ex.Message}");
            }
        }
    }
}

`Form1.Designer.cs` 部分¶

确保 Form1.Designer.cs 文件包含WebView2控件的初始化代码：

namespace WebView2Example
{
    partial class Form1
    {
        private Microsoft.Web.WebView2.WinForms.WebView2 webView21;

        /// <summary>
        /// 设计器支持所需的方法 - 不要修改
        /// 使用代码编辑器修改此方法的内容。
        /// </summary>
        private void InitializeComponent()
        {
            this.webView21 = new Microsoft.Web.WebView2.WinForms.WebView2();
            ((System.ComponentModel.ISupportInitialize)(this.webView21)).BeginInit();
            this.SuspendLayout();
            // 
            // webView21
            // 
            this.webView21.CreationProperties = null;
            this.webView21.DefaultBackgroundColor = System.Drawing.Color.White;
            this.webView21.Dock = System.Windows.Forms.DockStyle.Fill;
            this.webView21.Location = new System.Drawing.Point(0, 0);
            this.webView21.Name = "webView21";
            this.webView21.Size = new System.Drawing.Size(800, 450);
            this.webView21.TabIndex = 0;
            this.webView21.ZoomFactor = 1D;
            // 
            // Form1
            // 
            this.AutoScaleDimensions = new System.Drawing.SizeF(8F, 16F);
            this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
            this.Controls.Add(this.webView21);
            this.Name = "Form1";
            this.Text = "WebView2 示例";
            this.Load += new System.EventHandler(this.Form1_Load);
            ((System.ComponentModel.ISupportInitialize)(this.webView21)).EndInit();
            this.ResumeLayout(false);
        }
    }
}

5. 加载网页和导航¶

WebView2控件提供了多种方法来加载和导航网页，包括：

Navigate(string url)：导航到指定的URL。
NavigateToString(string html)：直接加载HTML字符串内容。
Reload()：重新加载当前页面。
GoBack() 和 GoForward()：浏览历史记录。

示例：加载HTML字符串¶

private async void Form1_Load(object sender, EventArgs e)
{
    await webView21.EnsureCoreWebView2Async(null);
    string htmlContent = "<html><body><h1>你好，WebView2!</h1></body></html>";
    webView21.CoreWebView2.NavigateToString(htmlContent);
}

示例：使用按钮导航¶

在窗体上添加一个按钮，命名为 btnNavigate，文本设置为“导航”。
双击按钮，添加点击事件处理程序，并添加以下代码：

private void btnNavigate_Click(object sender, EventArgs e)
{
    string url = "https://www.github.com";
    webView21.CoreWebView2.Navigate(url);
}

6. 处理WebView2事件¶

WebView2控件提供了丰富的事件，可以用于监控和控制网页加载过程。

常用事件：¶

NavigationStarting：导航开始时触发。
NavigationCompleted：导航完成时触发。
SourceChanged：导航的源URL发生变化时触发。
WebMessageReceived：从网页接收到消息时触发。

示例：处理导航事件¶

private async void Form1_Load(object sender, EventArgs e)
{
    await webView21.EnsureCoreWebView2Async(null);
    webView21.CoreWebView2.NavigationStarting += CoreWebView2_NavigationStarting;
    webView21.CoreWebView2.NavigationCompleted += CoreWebView2_NavigationCompleted;
    webView21.CoreWebView2.Navigate("https://www.microsoft.com");
}

private void CoreWebView2_NavigationStarting(object sender, Microsoft.Web.WebView2.Core.CoreWebView2NavigationStartingEventArgs e)
{
    Console.WriteLine($"导航开始: {e.Uri}");
}

private void CoreWebView2_NavigationCompleted(object sender, Microsoft.Web.WebView2.Core.CoreWebView2NavigationCompletedEventArgs e)
{
    if (e.IsSuccess)
    {
        Console.WriteLine("导航完成，加载成功。");
    }
    else
    {
        Console.WriteLine($"导航失败，错误代码: {e.WebErrorStatus}");
    }
}

示例：与网页进行双向通信¶

在网页中发送消息到应用程序：

<!DOCTYPE html>
<html>
<head>
    <title>WebView2 通信示例</title>
    <script>
        function sendMessage() {
            window.chrome.webview.postMessage("你好，应用程序！");
        }
    </script>
</head>
<body>
    <h1>WebView2 通信示例</h1>
    <button onclick="sendMessage()">发送消息到应用程序</button>
</body>
</html>

在WinForms应用程序中接收消息：

private async void Form1_Load(object sender, EventArgs e)
{
    await webView21.EnsureCoreWebView2Async(null);
    webView21.CoreWebView2.WebMessageReceived += CoreWebView2_WebMessageReceived;
    webView21.CoreWebView2.NavigateToString(@"
        <!DOCTYPE html>
        <html>
        <head>
            <title>WebView2 通信示例</title>
            <script>
                function sendMessage() {
                    window.chrome.webview.postMessage('你好，应用程序！');
                }
            </script>
        </head>
        <body>
            <h1>WebView2 通信示例</h1>
            <button onclick='sendMessage()'>发送消息到应用程序</button>
        </body>
        </html>
    ");
}

private void CoreWebView2_WebMessageReceived(object sender, Microsoft.Web.WebView2.Core.CoreWebView2WebMessageReceivedEventArgs e)
{
    string message = e.TryGetWebMessageAsString();
    MessageBox.Show($"收到来自网页的消息: {message}");
}

7. 配置WebView2控件¶

WebView2控件提供了许多配置选项，可以根据需要进行调整和优化。

1. 设置默认URL¶

在控件初始化时，可以设置默认导航的URL。

webView21.CoreWebView2.Navigate("https://www.example.com");

2. 禁用脚本或JavaScript¶

有时，为了安全或性能考虑，可能需要禁用JavaScript。

webView21.CoreWebView2.Settings.IsScriptEnabled = false;

3. 设置用户代理（User-Agent）¶

可以通过CDP命令设置自定义的User-Agent。

await webView21.EnsureCoreWebView2Async(null);
webView21.CoreWebView2.Settings.UserAgent = "CustomUserAgent/1.0";

4. 启用或禁用浏览器功能¶

例如，禁用图片加载以提高加载速度。

webView21.CoreWebView2.Settings.IsImageLoadingEnabled = false;

5. 处理弹出窗口¶

WebView2提供了事件来处理新窗口的创建，可以控制如何处理弹出窗口。

webView21.CoreWebView2.NewWindowRequested += CoreWebView2_NewWindowRequested;

private void CoreWebView2_NewWindowRequested(object sender, Microsoft.Web.WebView2.Core.CoreWebView2NewWindowRequestedEventArgs e)
{
    // 取消新窗口创建
    e.Handled = true;

    // 在当前WebView2中导航到请求的URL
    webView21.CoreWebView2.Navigate(e.Uri);
}

8. 常见问题与解决方法¶

问题 1：WebView2控件无法初始化¶

解决方法：

检查WebView2运行时：确保已正确安装WebView2运行时。
更新WebView2 SDK：确保使用最新版本的WebView2 SDK和浏览器驱动。
检查浏览器兼容性：WebView2基于Chromium，需要支持的Windows版本。

问题 2：中文字符在WebView2中不显示¶

解决方法：

确保系统安装了支持中文的字体。
检查网页的编码：确保网页使用UTF-8编码。

设置正确的Accept-Language头：

webView21.CoreWebView2.Navigate("https://www.example.com");
webView21.CoreWebView2.Settings.Language = "zh-CN";

问题 3：加载网页时出现空白或错误页面¶

解决方法：

检查网络连接：确保网络连接正常。
检查URL是否正确。
查看WebView2日志：通过开发者工具或日志查看详细错误信息。

问题 4：无法与网页进行双向通信¶

解决方法：

确保正确设置WebMessageReceived事件。
检查网页中的JavaScript代码是否正确调用 window.chrome.webview.postMessage。

确保WebView2已初始化：

await webView21.EnsureCoreWebView2Async(null);

问题 5：WebView2控件占用过多内存或资源¶

解决方法：

优化网页内容：减少不必要的资源加载。
使用无头模式：如果不需要显示界面，可以使用无头模式减少资源消耗。
```
chromeOptions.AddArgument("--headless");
```

问题 6：WebView2无法显示特定的网页元素或样式¶

解决方法：

检查网页的CSS和JavaScript错误。
尝试在普通浏览器中加载网页，检查是否存在相同问题。
更新WebView2和浏览器驱动。

9. 最佳实践¶

1. 使用最新版本的WebView2¶

始终使用最新版本的WebView2 SDK和运行时，以获取最新的功能和安全更新。

2. 合理管理资源¶

释放资源：确保在关闭应用程序时正确释放WebView2控件。

protected override void OnFormClosing(FormClosingEventArgs e)
{
    webView21.Dispose();
    base.OnFormClosing(e);
}

优化加载：避免同时加载多个重资源的网页，减少内存占用。

3. 处理导航和加载状态¶

使用事件如 NavigationStarting 和 NavigationCompleted 来管理导航过程，提升用户体验。

4. 安全性考虑¶

限制网页内容：仅加载可信的网页，避免加载不受信任的内容，防止潜在的安全风险。
使用HTTPS：尽量加载使用HTTPS协议的网页，确保数据传输的安全性。

5. 调试和日志记录¶

启用开发者工具：在调试过程中，可以启用WebView2的开发者工具，类似于Chrome的DevTools。
```
webView21.CoreWebView2.OpenDevToolsWindow();
```
记录关键事件和错误：通过日志记录，便于后续问题的排查和解决。

6. 用户体验优化¶

添加进度条：在网页加载时显示进度条，提升用户体验。
处理错误页面：自定义错误页面或提示，告知用户加载失败的原因。

7. 与JavaScript交互¶

利用WebView2提供的API，实现与网页中的JavaScript代码进行双向通信，增强应用的互动性。

10. 参考资料¶

总结¶

准备工作：安装WebView2运行时和必要的开发工具。
添加控件：通过NuGet包管理器或手动安装，将WebView2控件添加到WinForms项目中。
基本使用：加载和显示网页内容，处理导航事件。
高级配置：设置自定义HTTP头、管理Cookies、与JavaScript交互等。
故障排除：解决常见的问题，确保控件稳定运行。

本文籍由我们多年业内实际经验，在AI工具辅助下完成。
如果您需要深入了解相关信息，或者您有任何其他意见建议，请给我们留言，我们将尽快与您联系。

目录¶

1. WebView2 简介¶

2. 准备工作¶

安装WebView2运行时¶

3. 在WinForms中添加WebView2控件¶

方法一：通过NuGet包管理器安装WebView2¶

步骤：¶

方法二：手动安装WebView2控件¶

步骤：¶

4. 基本用法示例¶

步骤：¶

完整代码示例¶

Form1.Designer.cs 部分¶

5. 加载网页和导航¶

示例：加载HTML字符串¶

示例：使用按钮导航¶

6. 处理WebView2事件¶

常用事件：¶

示例：处理导航事件¶

示例：与网页进行双向通信¶

7. 配置WebView2控件¶

1. 设置默认URL¶

2. 禁用脚本或JavaScript¶

3. 设置用户代理（User-Agent）¶

4. 启用或禁用浏览器功能¶

5. 处理弹出窗口¶

6. 设置Cookie¶

添加Cookie：¶

获取所有Cookie：¶

删除Cookie：¶

8. 常见问题与解决方法¶

问题 1：WebView2控件无法初始化¶

问题 2：中文字符在WebView2中不显示¶

问题 3：加载网页时出现空白或错误页面¶

问题 4：无法与网页进行双向通信¶

问题 5：WebView2控件占用过多内存或资源¶

问题 6：WebView2无法显示特定的网页元素或样式¶

9. 最佳实践¶

1. 使用最新版本的WebView2¶

2. 合理管理资源¶

3. 处理导航和加载状态¶

4. 安全性考虑¶

5. 调试和日志记录¶

6. 用户体验优化¶

7. 与JavaScript交互¶

10. 参考资料¶

总结¶

`Form1.Designer.cs` 部分¶