C#中WebView2调用与交互实现
创始人
2024-11-15 20:04:15
0

简要说明:

此控件实际上是 [WebView2 COM API] (https://aka.ms/webview2) 的包装器。
 可以通过访问 Microsoft.Web.WebView2.Wpf.WebView2.CoreWebView2 属性来直接访问基础 ICoreWebView2 接口及其所有功能。
一些最常见的 COM 功能也可以通过控件上的包装器方法/属性/事件直接访问。创建时,控件的 Microsoft.Web.WebView2.Wpf.WebView2.CoreWebView2 属性将为 null。
  这是因为创建 Microsoft.Web.WebView2.Wpf.WebView2.CoreWebView2 是一项成本高昂的操作,涉及启动 Edge 浏览器进程等操作。
  有两种方法可以导致创建

注意:这里使用的是WPF的框架,版本是.NET Framework 4.6

一、效果展示

1、传递数据

2、调用弹窗

3、回传信息

二、实现代码

1、包引用

2、界面添加

3、事件关联与初始化

    private async void RecvMsg_Loaded(object sender, RoutedEventArgs e)     {         InitializeComponent();         await webView.EnsureCoreWebView2Async(null);          webView.Source = new Uri(AppDomain.CurrentDomain.BaseDirectory + "ChartFile\\ContourLineChart.html");         webView.CoreWebView2.WebMessageReceived += WebView_WebMessageReceived;     }      private void WebView_WebMessageReceived(object sender, Microsoft.Web.WebView2.Core.CoreWebView2WebMessageReceivedEventArgs e)     {         Console.WriteLine("WebView_WebMessageReceived:"+e.WebMessageAsJson);      //  var p= JsonConvert.DeserializeObject(e.WebMessageAsJson);     }

需要注意,消息接收事件注册需要在控件初始化完成后,不然对象为空,会报错。JavaScript传递参数时,会默认序列化对象,对于传递对象数据时,C#层面接收后可以直接进行反序列化成对象,这样后序操作更加友好。当然怎么设计传递参数和怎么使用,需要使用者结合实际情况进行合理设计。

4、数据传递调用

1)、序列方式数据

   para = "jsUpdateROIData(true,0,33937.536,true,0,33937.536," +        "true,[0.0,0.0,0.0,0.0],true,[0.0,0.0,0.0,0.0]," +        "false,0,0,0,0,false,0,0,0,0,true)";      webView.ExecuteScriptAsync(para);

2)、单个数据方式

 public void ExeCall2(int num1, int num2)  {      string para = $"calAdd({num1},{num2})";      webView.Dispatcher.Invoke(Process);       void Process()      {          var r = webView.ExecuteScriptAsync(para);          r.ContinueWith(t =>          {              Console.WriteLine("执行结果2:" + t.Result);          });      }  }

5、后台Html文件

1)、数据显示函数

 function jsUpdateROIData(isShowRoi1, dValueRoi1, zValueRoi1, isShowRoi2, dValueRoi2, zValueRoi2,             flagroi1, Param1, flagroi2, Param2,             isShowLine1, Line1x1, Line1y1, Line1x2, Line1y2, isShowLine2, Line2x1, Line2y1, Line2x2, Line2y2, isShowMarkArea) {              option.series[1].data = null;             option.series[2].data = null;              ShowRoi1ResultPoint(isShowRoi1, dValueRoi1, zValueRoi1);             ShowRoi2ResultPoint(isShowRoi2, dValueRoi2, zValueRoi2);             SetROiPoint(flagroi1, Param1, flagroi2, Param2);             ShowRoi1ResultLine(isShowLine1, Line1x1, Line1y1, Line1x2, Line1y2);             ShowRoi2ResultLine(isShowLine2, Line2x1, Line2y1, Line2x2, Line2y2);             ShowMarkArea(isShowMarkArea);          }

2)、交互函数

function calAdd(num1, num2) {             var result = num1 + num2;             alert("传入参数 num1=" + num1 + ",num2=" + num2 + " num1+num2= " + result);             return result;         }

3)、消息发送函数

function SendMessage(msg) {              window.chrome.webview.postMessage(msg);         }

相关内容

热门资讯

此事迅速冲上热搜!新九游辅助器... 此事迅速冲上热搜!新九游辅助器软件激活码(辅助)都是有辅助平台(有挂解惑)-哔哩哔哩暗藏猫腻,小编详...
第五分钟了解!闲逸游戏插件,多... 第五分钟了解!闲逸游戏插件,多乐跑如何增加胜率吧,绝活教程(有挂总结)-哔哩哔哩1、多乐跑如何增加胜...
现有关情况通报如下!斗棋联盟辅... 现有关情况通报如下!斗棋联盟辅助(辅助)其实是有辅助插件(有挂方式)-哔哩哔哩一、斗棋联盟辅助可以开...
第五分钟了解!赣牌圈的好牌几率... 第五分钟了解!赣牌圈的好牌几率,微信九游大厅辅助,攻略教程(有挂讲解)-哔哩哔哩;1、每一步都需要思...
随着!哈灵脚本辅助(辅助)一贯... 随着!哈灵脚本辅助(辅助)一贯存在有辅助修改器(有挂讲解)-哔哩哔哩一、哈灵脚本辅助游戏安装教程牌型...
9分钟了解!大菠萝免费辅助,雀... 9分钟了解!大菠萝免费辅助,雀姬手游辅助,手段教程(证实有挂)-哔哩哔哩1、许多玩家不知道大菠萝免费...
据统计!微信小程序边锋干橙眼辅... 据统计!微信小程序边锋干橙眼辅助(辅助)一贯真的有辅助平台(有挂透视)-哔哩哔哩1、金币登录送、破产...
一分钟了解!仙神互娱辅助,钱塘... 一分钟了解!仙神互娱辅助,钱塘十三水怎么开挂辅助,模块教程(有挂助手)-哔哩哔哩1、进入到钱塘十三水...
截至目前!雀友会潮汕麻将开挂辅... 截至目前!雀友会潮汕麻将开挂辅助(辅助)原来存在有辅助平台(有挂规律)-哔哩哔哩1、金币登录送、破产...
第7分钟了解!悠闲川南辅助器,... 第7分钟了解!悠闲川南辅助器,新海贝之城游戏攻略,烘培教程(证实有挂)-哔哩哔哩1、新海贝之城游戏攻...