C# WebView2 應(yīng)用的處理模型

當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流 →『技術(shù)文檔交流』

admin

2025年4月2日 22:16 本文熱度 151

WebView2 是 Microsoft 提供的一個(gè)控件，允許開發(fā)者在其應(yīng)用程序中嵌入 Web 內(nèi)容。它基于 Microsoft Edge (Chromium) 引擎，提供了現(xiàn)代 Web 技術(shù)的支持。WebView2 的處理模型是理解其如何與主機(jī)應(yīng)用程序交互的關(guān)鍵。

處理模型概述

WebView2 的處理模型主要包括以下幾個(gè)方面：

進(jìn)程模型
：

WebView2 使用多進(jìn)程架構(gòu)，主機(jī)應(yīng)用程序和 Web 內(nèi)容在不同的進(jìn)程中運(yùn)行。這種設(shè)計(jì)提高了安全性和穩(wěn)定性，因?yàn)?Web 內(nèi)容的崩潰不會(huì)影響主機(jī)應(yīng)用程序。
WebView2 創(chuàng)建了一個(gè)或多個(gè)渲染進(jìn)程來處理 Web 內(nèi)容，這些進(jìn)程與主機(jī)進(jìn)程通過 IPC（進(jìn)程間通信）進(jìn)行通信。

主機(jī)進(jìn)程
：

主機(jī)進(jìn)程是運(yùn)行 WebView2 控件的應(yīng)用程序。它負(fù)責(zé)管理 WebView2 控件的生命周期、處理用戶輸入和與 Web 內(nèi)容的交互。

渲染進(jìn)程
：

渲染進(jìn)程負(fù)責(zé)呈現(xiàn) Web 內(nèi)容。每個(gè) WebView2 控件可以有一個(gè)或多個(gè)渲染進(jìn)程，這取決于應(yīng)用程序的需求和配置。

通信機(jī)制
：

主機(jī)進(jìn)程和渲染進(jìn)程之間的通信通過 `PostMessage` 和 `ExecuteScriptAsync` 等方法實(shí)現(xiàn)。這使得主機(jī)應(yīng)用程序能夠向 Web 內(nèi)容發(fā)送消息，并接收來自 Web 內(nèi)容的響應(yīng)。

示例代碼

以下是一個(gè)簡(jiǎn)單的 C# 示例，展示如何在 WinForms 應(yīng)用程序中使用 WebView2 控件，并實(shí)現(xiàn)基本的進(jìn)程間通信。

安裝 WebView2 SDK

首先，確保在項(xiàng)目中安裝了 WebView2 SDK?？梢酝ㄟ^ NuGet 包管理器安裝：

Install-Package Microsoft.Web.WebView2

創(chuàng)建 WinForms 應(yīng)用程序

創(chuàng)建一個(gè)新的 WinForms 應(yīng)用程序，并在主窗體中添加 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 內(nèi)容的消息
            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 內(nèi)容發(fā)送消息
            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 內(nèi)容監(jiān)聽主機(jī)消息
        window.chrome.webview.addEventListener('message', (event) => {
            console.log('Received message:', event.data);
            document.getElementById("divMsg").innerHTML = event.data;
        });

    </script>
</body>
</html>