Webページに埋め込まれたChromiumカーネルを実装する. Net WebView2プロジェクト

WebView2プロジェクトはユニークで、MicrosoftオペレーティングシステムWin 10とWin11の恩恵を受けています。少なくとも、生成されたプロジェクトファイルは非常に小さく、私の側は3.6 Mで、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

インストール後、デフォルトでWin From UIフレームワークを使用しています。

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

新規プロジェクト参考文献としてwinfrom

WebView2がない場合は、プロジェクトを再起動できます。

また、わかりやすくするために、DockプロパティをFill Full Fill 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);
    }
}

このページは自由にストレッチでき、非常に便利です。

この行はローカルキャッシュに追加されます。この時点で、アカウントにログインして再起動すると、データがローカルキャッシュに保存されているため、アカウントはまだ存在します。

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