WebView在WPF中的应用

开发环境

运行环境 .net 6

1.安装WebView2

//通过Nuget控制台来安装，安装命令如下，或者通过Nuget包管理器安装
Install-Package Microsoft.Web.WebView2

1.在窗体中引用命名空间：

xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"

2.使用webView2的控件

<wv2:WebView2 Name="webView"/>

2.使用WebView2

默认情况下，如果控件中没有设置Source属性，CoreWebView2是没有初始化的，此时需要我们手动初始化CoreWebView2，CoreWebView2初始化有以下两种方式：第一种是上述的一种不直接使用Source属性，这样更灵活一些。
第一种：

//初始化WebView的新实例
await webView.EnsureCoreWebView2Async(null);

第二种：

webView.Source = new Url("https://www.baidu.com");

3.如何使用js来调用C#

1.C# 中的写法

public class TestWebView{
 public void Test()
 {
 	MessageBox.Show("test");
 }
}


webView.CoreWebView2.AddHostObjectToScript("TestWebView", new TestWebView());

2.js中的写法

const test = chrome.webview.hostObjects.TestWebView;
await test .Test("Test...");

这样就可以在js中执行C#中的方法或者说宿主的方法了。

4.使用C#来调用js

//其中 message() 是在js中定义的方法
string result = await webView.ExecuteScriptAsync("message()");

5.js与C#之间的通信 (也可用作方法之间的调用)

相较于上述所提的通过JS实现WebView2宿主程序和前端页面进行通信的方法，在WebView2中，更加通用而高效的方式是WebMessage，它是一个异步的消息通信，并且支持双向通信。

WebView2 控件中的 Web 内容可以使用 window.chrome.webview.postMessage 向宿主程序发布消息。宿主程序使用任何注册到 WebMessageReceived 委托方法处理消息。
主程序使用 CoreWebView2.PostWebMessageAsString 或 CoreWebView2.PostWebMessageAsJSON 将消息发布到 WebView2 控件中的 Web 内容。这些消息由添加到 window.chrome.webview.addEventListener 的处理程序捕获。

1.js发送消息到C#

在webView2中定义事件来处理接收到的消息：

webView.CoreWebView2.WebMessageReceived += UpdateAddressBar;

void UpdateAddressBar(object sender, CoreWebView2WebMessageReceivedEventArgs args)
        {
            //String uri = args.TryGetWebMessageAsString();
            //webView.CoreWebView2.PostWebMessageAsString(uri);
            //接收到的字符串
            string msg = args.TryGetWebMessageAsString();
            //接收到的json
            string msgJson = args.WebMessageAsJson;

        }

在js中发送消息：

var args = "msg ，from webView2";
window.chrome.webview.postMessage(args);

2.C#发送消息到js

在js中注册消息的处理函数：

chrome.webview.addEventListener('message', event => alert(event.data));

在C#中发送消息：

//两种方式都可以
webView.CoreWebView2.PostWebMessageAsString("hello world");
webView.CoreWebView2.PostWebMessageAsJson("hello world");

到这里基本使用就完成了 ，希望可以帮助到更多的朋友，之前使用WebBrowser在es6的语法下尤其是使用ie内核的浏览器会有很多兼容的问题 后面发现了WebView2,整体来说很好用，兼容性也不错，研究了一天的成果希望可以帮助到大家。