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

安裝好之後，我這裡默認是使用的 winfrom ui 框架。

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

新建項目 (winfrom 作為參考)

如果沒有出現 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