
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应用是否准备好接收数据,避免消息丢失。
立即学习“Java免费学习笔记(深入)”;
只需在Vue端代码中添加window.chrome.webview.postMessage("successload");,即可解决问题,避免C#过早发送消息。










