【WebView2】（三）Web 与 WinForm 应用程序双向通信

小渣渣

需求：WebView2 将 Web 资源渲染和展示出来提供用户操作，如何让 Web 界面与 WinForm 应用程序互相通信呢？例如：Web 通过应用程序读取硬件的信息，应用程序主动刷新 Web 页面内容等。

回顾：

【WebView2】（一）初识 Microsoft Edge WebView2 技术
https://www.itsvse.com/thread-10361-1-1.html

【WebView2】（二）WinForm 引入 WebView2 显示 Web 内容
https://www.itsvse.com/thread-10362-1-1.html

首先，先看 web 和 winform 应用程序通信的效果图，web 向应用程序发送消息，调用打开 Windows 系统的计算器功能，同时，应用程序给 web 端发送消息也能接收成功，如下图：



主机和 Web 内容之间的通信

主机和 Web 内容可用于 postMessage 相互通信，如下所示：

• WebView2 控件中的 Web 内容可用于 window.chrome.webview.postMessage 向主机发布消息。 主机使用在主机上注册 WebMessageReceived 的任何消息来处理消息。
• 主机使用或CoreWebView2.PostWebMessageAsJSON将消息发布到 WebView2 控件CoreWebView2.PostWebMessageAsString中的 Web 内容。 这些消息是由添加到的处理程序捕获的 window.chrome.webview.addEventListener。
  

新建 Angular SPA 项目

本文使用 Angular 8.2.14 新建一个 Web 项目来演示Web 与 WinForm 应用程序互相通信，项目新建完成后，通过如下命令新建一个 service 服务：

登录可见。

代码如下：

登录可见。

同时，修改 app.component.html 和 app.component.ts 文件，实现发送消息和接收消息功能。

app.component.html 代码如下：

登录可见。

app.component.ts 代码如下：

登录可见。

运行项目，如下图：



WinForm 应用程序

主机应用程序需要修改代码如下：

登录可见。

修改 webview2 控件的 source 属性为：http://localhost:4200/，启动应用程序，如下图：



最后，尝试 Web 与 WinForm 应用程序互相发送消息，可以看到双方都可以成功接收到消息，如下图：



（完）

Zmoli775

必须依赖edg这个头疼

小渣渣

Zmoli775 发表于 2022-9-28 08:55
必须依赖edg这个头疼

不需要，但是需要安装 webview2 runtime

飞鱼

学习学习

落月天涯

win7好像不能用吧，我看微软的文档说不支持？

小渣渣

同一进程中.NET 与 JavaScript 之间的高级互操作性。

https://github.com/microsoft/node-api-dotnet