WebView2UI - 在WPF之中使用WebView2的一些经验总结

项目地址：https://gitee.com/skyw18/WebView2UI

项目地址：https://github.com/skyw18/WebView2UI

webview简介与生命周期：WPF 应用中的 WebView2 入门 - Microsoft Edge Developer documentation | Microsoft Learn

具体代码可以参考微软官方示例文档 WPF 示例应用 - Microsoft Edge Developer documentation | Microsoft Learn

使用方法：

使用nuget添加Microsoft.Web.WebView2，将Resource目录下的app子目录复制到生成的可执行文件同一目录，xaml之中插入 xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"

如果需要使用webview2 prerelease版，需要在NuGet管理界面进入项目网页，然后在下面的Package Manager之中复制命令行到程序包管理控制台，在上面的下拉菜单之中选择要安装的项目，然后运行命令即可。

初始化Webview2和几种加载html的方式

public MainWindow()
{
    InitializeComponent();
    InitializeAsync();
}

async void InitializeAsync()
{
    //加载之前需等待webview2 initialized完成。
    await webView.EnsureCoreWebView2Async(null);

    //webview2加载资源的几种方式，也可以在XAML里设定source，可以使用1,2两种方法
    //1. 直接通过URL加载网络页面
    //webView.Source = new Uri("https://localhost:44380");

    //2. 通过路径加载本地页面
    webView.Source = new Uri("file:///" + System.Environment.CurrentDirectory + "\\app\\index.html");

    //3. 将本地路径设为虚拟域名，通过虚拟域名加载本地页面
    //请注意，SetVirtualHostNameToFolderMapping这个方法需等待webview初始化完成，否则会因webview为空而崩溃，
    //所以不能放在MainWindow之中同步执行，会卡死，也不能放在wvMain.CoreWebView2InitializationCompleted和NavigationCompleted之中执行，
    //因为这两个方法都是加载完页面之后才会触发，如果xaml之中source为空，则永不会被执行，所以需在MainWindow异步执行并通过EnsureCoreWebView2Async方法等待：
    //webView.CoreWebView2.SetVirtualHostNameToFolderMapping("appassets.example", "app", CoreWebView2HostResourceAccessKind.Allow);
    //webView.Source = new Uri("https://appassets.example/hello.html");

    //4. 直接加载html字符串  加载的字符串大小不能大于2m 
    //html之中资源的链接必须通过虚拟域名，资源放在跟执行程序同一个目录下也无法直接调用
    //string htmlContent = @"<img src='http://appassets.example/bg0.jpg'>";
    //string htmlContent = @"<h1>hello, world!</h1>";
    //webView.NavigateToString(htmlContent);         
}

开发混合应用时用到的一些功能

async void InitializeAsync()
{
    //..... 初始化代码，省略，参考上面
    
    //webview2控件设定透明度        
    //webView.DefaultBackgroundColor = System.Drawing.Color.Transparent;

    //下面这行语句可以禁用f5等快捷键 以阻止用户误触f5刷新页面
    webView.CoreWebView2.Settings.AreBrowserAcceleratorKeysEnabled = false;
    //禁止缩放界面比例
    webView.CoreWebView2.Settings.IsZoomControlEnabled = false;

    webView.NavigationCompleted += webView_NavigationCompleted;
    //webView.CoreWebView2InitializationCompleted += webView_InitializationCompleted;
    //webView.NavigationStarting += EnsureHttps;
    //webView.NavigationCompleted += CancelRightButton;
    webView.WebMessageReceived += WebView_WebMessageReceived; 
}

async void webView_NavigationCompleted(object sender, CoreWebView2NavigationCompletedEventArgs args)
{
    //一些使用js实现的功能
    //禁止鼠标右键菜单
    await webView.CoreWebView2.ExecuteScriptAsync("window.addEventListener('contextmenu', window => {window.preventDefault();});");
    //禁止鼠标左键拖动选择
    await webView.CoreWebView2.ExecuteScriptAsync("window.addEventListener('selectstart', window => {window.preventDefault();});");
    //禁止拖动文件到窗口
    await webView.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync(
           "window.addEventListener('dragover',function(e){e.preventDefault();},false);" +
           "window.addEventListener('drop',function(e){" +
              "e.preventDefault();" +
              "console.log(e.dataTransfer);" +
              "console.log(e.dataTransfer.files[0])" +
           "}, false);");
    //await webView.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync("window.chrome.webview.postMessage(window.document.URL);");
    //await webView.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync("window.chrome.webview.addEventListener(\'message\', event => alert(event.data));");
    //await webView.CoreWebView2.ExecuteScriptAsync($"alert('alertt');document.getElementById('hello').innerHTML='hello;");
}

C#在html之中插入脚本

await wView.CoreWebView2.ExecuteScriptAsync("some_func();");  //执行JS
var result = await webView.CoreWebView2.ExecuteScriptWithResultAsync("get_json();"); //执行带返回值的JS
string scriptResult = await _webViewFrames[iframeNumber].ExecuteScriptAsync(dialog.Input.Text);  //插入 iFrame

若html内容如下：

var user_id = 120; //数字
var user_name = "hello"; //字符串
var user_info = {name: "hello",age: 12}; //json串
function get_user_name() {return user_name;}
function get_user_id() {return user_id;}
function get_user_info() {return user_info;}

使用SimpleJSON对返回数据进行处理：

var result_user_id = await webView.CoreWebView2.ExecuteScriptWithResultAsync("user_id");
//等效于 var result_user_id = await webView.CoreWebView2.ExecuteScriptWithResultAsync("get_user_id()");
long user_id = JSON.Parse(result_user_id.ResultAsJson).AsLong;//处理数值
//如果数值过大则会自动加双引号此时需long.TryParse(result.ResultAsJson.Replace("\"", ""), out t);

//处理字符串
var result_user_name = await webView.CoreWebView2.ExecuteScriptWithResultAsync("get_user_name();");
string user_name = JSON.Parse(result_user_name.ResultAsJson).Value;

//处理json串
var result_user_info = await webView.CoreWebView2.ExecuteScriptWithResultAsync("get_user_info();");
var json = JSON.Parse(result_user_info.ResultAsJson);//通过json["user_name"].Value 获取值 

C#发送数据，html接收

C#发送：

webView.CoreWebView2.PostWebMessageAsJson(reply);
webView.CoreWebView2.PostWebMessageAsString(dialog.Input.Text);

html接收数据：

window.chrome.webview.addEventListener('message', arg => {
   if ("WindowBounds" in arg.data) {
       document.getElementById("window-bounds").value = arg.data.WindowBounds;
   }
   if ("SetColor" in arg.data) {
       document.getElementById("colorable").style.color = arg.data.SetColor;
   }
});  

html发送数据，C#接收

html发送：

window.chrome.webview.postMessage("GetWindowBounds");

C#接收：

wvMain.WebMessageReceived += wvMain_WebMessageReceived;

C#增加和删除js脚本

Enter the JavaScript code to run as the initialization script that runs before any script in the HTML document.

在任何js脚本之前运行

string scriptId = await webView.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync(dialog.Input.Text);
webView.CoreWebView2.RemoveScriptToExecuteOnDocumentCreated(scriptId);