webview2与vue项目数据交互难题：c#数据无法被前端接收的解决方案

本文分析了在使用WebView2嵌入Vue项目时，C#端数据无法被前端接收的常见问题。具体场景：一个Windows C#程序通过WebView2加载Vue打包后的项目，C#需要向Vue项目发送设备列表数据，但只有加载简单的HTML文件才能成功接收数据，而加载Vue打包后的index.html则失败。

问题根源在于Vue项目加载存在延迟，导致C#发送的消息在前端addEventListener("message")监听器注册前就已经发送。

C#端使用webView21.CoreWebView2.WebMessageReceived += GetDrawInfo;发送消息，Vue项目使用window.chrome.webview.addEventListener("message", function (event) { ... });监听消息。测试表明，单独的test.html文件可以正常接收，但Vue打包后的index.html却不行，这证实了加载时机不同步的问题。

蓝湖代码转vue2.0+element-ui

将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.

下载

解决方案：在Vue项目加载完成后，主动向C#发送确认消息。通过在Vue项目中添加window.chrome.webview.postMessage("successload");，在index.html加载完成后主动通知C#前端已准备好接收数据。 这确保了C#发送数据时，前端监听器已注册完毕，从而避免数据丢失。此方法有效解决了C#发送数据与前端加载完成时机不匹配的问题。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！