Vue 打包项目在 WebView2 中接收 C# 数据失败：如何排查和解决？

如何排查和解决 vue 打包项目在 webview2 中接收 c# 数据失败的问题

在 webview2 中集成 vue 打包项目时，常会出现无法接收 c# 发送数据的现象。以下将分析可能的原因和提供相应的解决方法。

问题描述

在您的案例中，当使用 test.html 时，您可以正常接收 c# 发送的数据。但是在使用 vue 打包项目的 index.html 时，却无法收到数据。您推测可能是 vue 项目的打开有延迟导致 webview2 提前发送消息，错过了监听事件。

解决方案

经过分析，确实存在 vue 项目打开延迟的问题。c# 需要在 vue 项目完全加载并监听 message 事件后才能发送消息。因此，需要增加以下代码：

// 增加了这句就可以了    
window.chrome.webview.postMessage("successload");

//  接收C#消息：
window.chrome.webview.addEventListener("message", function (event) {//...})

在这段代码中，在 vue 项目完全加载后，会向 c# 发送一条带有 "successload" 消息的消息。c# 接收到此消息后，便知道 vue 项目已加载完毕，并可以开始发送数据。添加这段代码后，问题应得到解决。

以上就是Vue 打包项目在 WebView2 中接收 C# 数据失败：如何排查和解决？的详细内容，更多请关注硕下网其它相关文章！