.Net WebView2 專案，實現嵌入 WEB 頁面 Chromium 核心

WebView2 專案得天獨厚，有微軟作業系統 Win10 以及 Win11 的加持，最起碼，產生的專案檔案是很小的，我這邊是 3.6M，相對於 CefSharp 專案動輒 100M 的大小來講，大大降低發佈的大小，所以還是值得深入研究一下的。

開發需要的條件

1. 執行階段

• WebView2 - Microsoft Edge Developer：https://developer.microsoft.com/en-us/microsoft-edge/webview2/#download-section

透過控制台，我們也能看到已經安裝了這個執行階段了。

沒有的話，需要上邊的那個地址下載安裝。

具體地址: https://go.microsoft.com/fwlink/p/?LinkId=2124703

2. NuGet 套件

需要引入以下 NuGet 套件

Microsoft.Web.WebView2

安裝好之後，我這裡預設是使用 WinForm UI 框架。

• 案例參考: https://github.com/MicrosoftEdge/WebView2Samples

新增專案 (WinForm 作為參考)

如果沒有出現 WebView2 可以重新啟動一下專案就會有了

同時，為了方便看，我們把 Dock 屬性選為 Fill 全填滿就好了

這個時候，我們加入一下的基礎環境程式碼，就可以讓頁面啟動了。

public partial class Form1 : Form
{
    public Form1()
    {
        InitializeComponent();
        Resize += new EventHandler(Form_Resize);
        webView21.CoreWebView2InitializationCompleted += WebView21_CoreWebView2InitializationCompleted;
        Initialize();
    }
        /// <summary>
        /// 實現自適應頁面縮放
        /// </summary>
    private void Form_Resize(object sender, EventArgs e)
    {
        webView21.Size = ClientSize - new Size(webView21.Location);
    }
    /// <summary>
    /// webview 載入完畢
    /// </summary>
    private void WebView21_CoreWebView2InitializationCompleted(object sender, CoreWebView2InitializationCompletedEventArgs e)
    {
        webView21.CoreWebView2.Navigate("https://www.baidu.com/");
    }
    /// <summary>
    /// WebView2初始化
    /// </summary>
    async void Initialize()
    {
        var result = await CoreWebView2Environment.CreateAsync(null, Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "cache"), null);
        await webView21.EnsureCoreWebView2Async(result);
    }
}

這個頁面可以自由的拉伸，十分地方便。

其中這一行，在本機 Cache 增加了，這個時候，如果你登入了帳號，你重新啟動，帳號還是存在的，因為資料存到本機快取了。

var result = await CoreWebView2Environment.CreateAsync(null, Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "cache"), null);

webView21.CoreWebView2.OpenDevToolsWindow();

開啟開發者工具 (可以透過右鍵，檢查頁面實現開啟開發者工具)

然後，我們要執行 JS 腳本了，準備輸入一個內容，然後，點選搜尋。

實現這個功能，需要新增一個按鈕

加入以下腳本即可

/// <summary>
/// 點選按鈕
/// </summary>
private async void button1_Click(object sender, EventArgs e)
{
    //開啟開發者工具 (可以透過右鍵，檢查頁面實現開啟開發者工具)
    // webView21.CoreWebView2.OpenDevToolsWindow();

    //填充搜尋內容
    await webView21.CoreWebView2.ExecuteScriptAsync("document.querySelector('#kw').value='1234'");
    //啟動搜尋
    await webView21.CoreWebView2.ExecuteScriptAsync("document.querySelector('#su').click();");
}

這個是實現的效果

至此，我們已經實現了一個完整的 WebView2 的專案案例。

底下是相應的程式碼地址:

• GitHub：https://github.com/kesshei/WebView2Demo
• Gitee：https://gitee.com/kesshei/web-view2-demo