WebView2 中 Vue 项目无法接收 C# 消息：如何解决 Vue 项目加载延迟导致消息接收失败的问题？

webview2 中 vue 项目无法接收 c# 消息的排查

在 vue 打包项目与 webview2 集成时，你遇到了 vue 项目无法接收来自 c# 发送的数据的问题。让我们深入分析这个问题并提供解决方案。

c# 代码中，你使用的 corewebview2.webmessagereceived 事件监听器可以检测来自 webview 的消息，而在前端 vue 项目中，window.chrome.webview.addeventlistener("message") 监听器用于接收来自 c# 的消息。

然而，当使用 vue 打包好的 index.html 时，出现了消息无法接收的现象。你猜测这是由于 index.html 页面加载延迟导致 c# 发送的消息未被 vue 监听器捕获。

为了解决这个问题，需要在 vue 项目中添加以下代码：

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

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

这行代码会向 webview 发送一条 "successload" 消息，表明 vue 项目已加载。当 c# 接收此消息后，它可以推迟发送设备列表数据，确保 vue 项目的监听器已准备就绪。这样就能保证 c# 发送的数据能够成功被 vue 项目接收。

以上就是WebView2 中 Vue 项目无法接收 C# 消息：如何解决 Vue 项目加载延迟导致消息接收失败的问题？的详细内容，更多请关注硕下网其它相关文章！