WebView2集成Vue，C#与JS通信问题解决方案

本文针对WebView2集成Vue应用时，C#与JavaScript通信失败的问题提供了解决方案。由于Vue打包后的index.html加载存在延迟，导致C#发送消息时，Vue端的事件监听器尚未注册，从而造成消息接收失败。解决方案是在Vue应用的`mounted`生命周期钩子函数中，添加`window.chrome.webview.postMessage("successload");`，主动向C#发送加载完成确认消息。C#端根据此确认消息再发送数据，确保消息可靠接收，有效解决C#与Vue通信延迟问题。

WebView2集成Vue应用：C#与JavaScript通信失败的解决方案

本文探讨在Windows C#项目中使用WebView2嵌入Vue打包项目时，C#向Vue应用发送数据失败的问题。 当Vue应用为打包后的index.html时，C#端无法接收数据，原因在于Vue应用加载完成与C#发送消息存在时间差。

开发者使用webView2.CoreWebView2.WebMessageReceived监听C#端消息，Vue端使用window.chrome.webview.addEventListener("message", ...)接收消息。测试发现，简单的test.html可以正常接收，但打包后的index.html却不行。问题在于Vue应用加载延迟，导致addEventListener注册前，C#已发送消息。

解决方案： 确保C#发送消息时，Vue应用已完成初始化并注册消息监听器。 Vue应用加载完成后，主动向C#发送确认消息，例如window.chrome.webview.postMessage("successload");。 这行代码应放在Vue应用mounted生命周期钩子函数中，或所有必要组件加载完成后执行。 C#端根据确认消息判断Vue应用是否准备好接收数据，避免消息丢失。

只需在Vue端代码中添加window.chrome.webview.postMessage("successload");，即可解决问题，避免C#过早发送消息。

今天关于《WebView2集成Vue，C#与JS通信问题解决方案》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！