WebView2 是微软为 Windows 提供的一种现代网页视图组件，它基于 Microsoft Edge 的 Chromium 浏览器引擎，允许开发者在 Windows 应用程序中嵌入和显示网页内容。通过 WebView2，开发者可以实现丰富的用户界面，并能够使用 HTML、CSS 和 JavaScript 来构建本地页面。
在这篇文章中，我们将介绍如何在使用 WebView2 的应用程序中加载本地页面，并演示相关的代码示例，帮助您更好地理解这个过程。
环境准备
首先，确保您的开发环境中已经安装了 WebView2 SDK。您可以通过 NuGet 包管理器来安装 WebView2 SDK。打开您的项目，右键点击项目名称，选择“管理NuGet程序包”，搜索 Microsoft.Web.WebView2，并安装最新版本。
创建 Windows 应用
接下来，我们可以创建一个简单的 Windows 窗体应用程序。打开 Visual Studio，创建一个新的 Windows Forms App 项目，然后在主窗体上添加一个 WebView2 控件。
加载本地页面
下面是一段加载本地 HTML 页面示例的代码。假设我们要加载的 HTML 文件名为 localPage.html，你需要将这个文件放在项目的根目录下。
using System;
using System.Windows.Forms;
using Microsoft.Web.WebView2.WinForms;
namespace WebView2LocalPageExample
{
public partial class MainForm : Form
{
private WebView2 webView;
public MainForm()
{
InitializeComponent();
InitializeWebView();
}
private async void InitializeWebView()
{
webView = new WebView2
{
Dock = DockStyle.Fill
};
this.Controls.Add(webView);
await webView.EnsureCoreWebView2Async(); // 确保 WebView2 已完成初始化
// 加载本地 HTML 文件
string localPath = "file:///" + System.IO.Path.GetFullPath("localPage.html").Replace("\\", "/");
webView.Navigate(localPath);
}
}
}
代码解释
-
添加 WebView2 控件：在
InitializeWebView方法中，我们创建了一个 WebView2 控件并设置它的填充方式为DockStyle.Fill以确保它覆盖整个窗体。 -
确保 WebView2 初始完成：我们调用
EnsureCoreWebView2Async()方法来确保 WebView2 控件已初始化。这是一个异步的方法，确保在调用后续的方法之前，WebView2 已完全准备就绪。 -
加载本地页面：我们构造一个文件路径，并调用
Navigate方法来加载本地的 HTML 文件。请注意，这里必须使用file:///前缀，并将路径中的反斜杠替换为斜杠。
本地 HTML 文件示例
localPage.html 文件的内容可以为：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>当地页面示例</title>
</head>
<body>
<h1>欢迎使用 WebView2 加载本地页面</h1>
<p>这是一个简单的示例页面。</p>
</body>
</html>
运行应用程序
至此，您可以运行应用程序，WebView2 控件应该会显示您本地的 HTML 页面。
结论
通过以上步骤，您可以轻松地在使用 WebView2 的 Windows 应用中加载本地页面。WebView2 提供了强大的功能，允许开发者将现代网页呈现在桌面应用程序中，为用户提供丰富的交互体验。希望这篇文章能给您带来帮助，助您在开发中顺利使用 WebView2。
