C# WebView2 应用的处理模型
|
admin
2025年4月2日 22:16
本文热度 1780
|
WebView2 是 Microsoft 提供的一个控件，允许开发者在其应用程序中嵌入 Web 内容。它基于 Microsoft Edge (Chromium) 引擎，提供了现代 Web 技术的支持。WebView2 的处理模型是理解其如何与主机应用程序交互的关键。
处理模型概述
WebView2 的处理模型主要包括以下几个方面：
- 进程模型
- WebView2 使用多进程架构，主机应用程序和 Web 内容在不同的进程中运行。这种设计提高了安全性和稳定性，因为 Web 内容的崩溃不会影响主机应用程序。
- WebView2 创建了一个或多个渲染进程来处理 Web 内容，这些进程与主机进程通过 IPC（进程间通信）进行通信。
- 主机进程
- 主机进程是运行 WebView2 控件的应用程序。它负责管理 WebView2 控件的生命周期、处理用户输入和与 Web 内容的交互。
- 渲染进程
- 渲染进程负责呈现 Web 内容。每个 WebView2 控件可以有一个或多个渲染进程，这取决于应用程序的需求和配置。
- 通信机制
- 主机进程和渲染进程之间的通信通过 `PostMessage` 和 `ExecuteScriptAsync` 等方法实现。这使得主机应用程序能够向 Web 内容发送消息，并接收来自 Web 内容的响应。
示例代码
以下是一个简单的 C# 示例，展示如何在 WinForms 应用程序中使用 WebView2 控件，并实现基本的进程间通信。
安装 WebView2 SDK
首先，确保在项目中安装了 WebView2 SDK。可以通过 NuGet 包管理器安装：
Install-Package Microsoft.Web.WebView2
创建 WinForms 应用程序
创建一个新的 WinForms 应用程序，并在主窗体中添加 WebView2 控件。
示例代码
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
using Microsoft.Web.WebView2.WinForms;
namespace AppWebView2
{
public partial class Form6 : Form
{
private WebView2 webView;
public Form6()
{
InitializeComponent();
InitializeWebView();
}
private async void InitializeWebView()
{
webView = new WebView2
{
Dock = DockStyle.Fill
};
this.panel1.Controls.Add(webView);
// 初始化 WebView2 控件
await webView.EnsureCoreWebView2Async(null);
string htmlPath = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "test.html");
webView.Source = new Uri("file://" + htmlPath);
// 处理来自 Web 内容的消息
webView.CoreWebView2.WebMessageReceived += CoreWebView2_WebMessageReceived;
}
private void CoreWebView2_WebMessageReceived(object sender, Microsoft.Web.WebView2.Core.CoreWebView2WebMessageReceivedEventArgs e)
{
string message = e.TryGetWebMessageAsString();
MessageBox.Show($"Received message from web: {message}");
}
private void btnSendToWeb_Click(object sender, EventArgs e)
{
// 向 Web 内容发送消息
webView.CoreWebView2.PostWebMessageAsString("Hello from the host application!");
}
}
}
test.html
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="divMsg"></div>
<input type="button" value="Send Message" onclick="sendMessage()"/>
<script>
function sendMessage() {
window.chrome.webview.postMessage('Hello from web content');
}
// Web 内容监听主机消息
window.chrome.webview.addEventListener('message', (event) => {
console.log('Received message:', event.data);
document.getElementById("divMsg").innerHTML = event.data;
});
</script>
</body>
</html>
运行示例
在运行应用程序后，WebView2 控件将加载指定的 URL。您可以通过调用 SendMessageToWeb 方法向 Web 内容发送消息，并在 Web 内容中使用 JavaScript 代码接收该消息。
结论
WebView2 的处理模型为开发者提供了强大的功能，使得在桌面应用程序中嵌入 Web 内容变得简单而高效。通过理解其进程和通信机制，开发者可以创建更安全、更稳定的应用程序。
阅读原文：原文链接
该文章在 2025/4/3 18:23:07 编辑过
400 186 1886
