From be9b042a052c4029c1bfcc38414416296345c14d Mon Sep 17 00:00:00 2001
From: ShaoHua <345265198@qqcom>
Date: Wed, 11 Mar 2026 21:54:04 +0800
Subject: [PATCH] =?UTF-8?q?=E5=89=8D=E5=90=8E=E6=AE=B5=E6=94=AF=E6=8C=81?=
=?UTF-8?q?=E4=BA=92=E5=8F=91=E6=B6=88=E6=81=AF=E5=B9=B6=E6=94=AF=E6=8C=81?=
=?UTF-8?q?=E8=B0=83=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.vscode/launch.json | 16 +
WebView2Demo/MainWindow.xaml | 13 +-
WebView2Demo/MainWindow.xaml.cs | 50 +-
web-app/.gitignore | 24 +
web-app/.vscode/extensions.json | 3 +
web-app/README.md | 5 +
web-app/index.html | 13 +
web-app/package-lock.json | 1109 +++++++++++++++++++++++++
web-app/package.json | 21 +
web-app/public/vite.svg | 1 +
web-app/src/App.vue | 84 ++
web-app/src/assets/vue.svg | 1 +
web-app/src/components/HelloWorld.vue | 43 +
web-app/src/main.js | 16 +
web-app/src/style.css | 79 ++
web-app/vite.config.js | 7 +
16 files changed, 1480 insertions(+), 5 deletions(-)
create mode 100644 .vscode/launch.json
create mode 100644 web-app/.gitignore
create mode 100644 web-app/.vscode/extensions.json
create mode 100644 web-app/README.md
create mode 100644 web-app/index.html
create mode 100644 web-app/package-lock.json
create mode 100644 web-app/package.json
create mode 100644 web-app/public/vite.svg
create mode 100644 web-app/src/App.vue
create mode 100644 web-app/src/assets/vue.svg
create mode 100644 web-app/src/components/HelloWorld.vue
create mode 100644 web-app/src/main.js
create mode 100644 web-app/src/style.css
create mode 100644 web-app/vite.config.js
diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000..98a9cce
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,16 @@
+{
+ // 使用 IntelliSense 了解相关属性。
+ // 悬停以查看现有属性的描述。
+ // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
+ "version": "0.2.0",
+ "configurations": [
+
+ {
+ "type": "msedge",
+ "request": "launch",
+ "name": "Launch Edge against localhost",
+ "url": "http://localhost:8080",
+ "webRoot": "${workspaceFolder}"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/WebView2Demo/MainWindow.xaml b/WebView2Demo/MainWindow.xaml
index c4e3e3f..1dd330f 100644
--- a/WebView2Demo/MainWindow.xaml
+++ b/WebView2Demo/MainWindow.xaml
@@ -1,4 +1,4 @@
-
-
-
-
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/WebView2Demo/MainWindow.xaml.cs b/WebView2Demo/MainWindow.xaml.cs
index bba31f7..f9ac14d 100644
--- a/WebView2Demo/MainWindow.xaml.cs
+++ b/WebView2Demo/MainWindow.xaml.cs
@@ -1,4 +1,4 @@
-using System.Text;
+using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
@@ -8,6 +8,7 @@ using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
+using Microsoft.Web.WebView2.Core;
namespace WebView2Demo
{
@@ -19,6 +20,53 @@ namespace WebView2Demo
public MainWindow()
{
InitializeComponent();
+ InitializeWebView();
+ }
+
+ private async void InitializeWebView()
+ {
+ try
+ {
+ // 1. 显式初始化
+ await webView.EnsureCoreWebView2Async(null);
+
+ // 2. 注入调试开启指令 (可选)
+ webView.CoreWebView2.Settings.AreDevToolsEnabled = true;
+
+ // 3. 监听消息
+ webView.WebMessageReceived += WebView_WebMessageReceived;
+
+ // 4. 初始化完成后再导航，确保 window.chrome.webview 注入成功
+ webView.Source = new Uri("http://localhost:5173");
+ }
+ catch (Exception ex)
+ {
+ MessageBox.Show($"WebView2 初始化失败: {ex.Message}");
+ }
+ }
+
+ private void WebView_WebMessageReceived(object? sender, CoreWebView2WebMessageReceivedEventArgs e)
+ {
+ // 获取来自前端的消息
+ string message = e.TryGetWebMessageAsString();
+ MessageBox.Show($"来自 Vue 的消息: {message}", "WPF 消息中心");
+ }
+
+ private void SendMessage_Click(object sender, RoutedEventArgs e)
+ {
+ if (webView.CoreWebView2 != null)
+ {
+ string text = msgInput.Text;
+ if (!string.IsNullOrWhiteSpace(text))
+ {
+ // 向前端发送消息
+ webView.CoreWebView2.PostWebMessageAsString(text);
+ }
+ }
+ else
+ {
+ MessageBox.Show("WebView2 尚未就绪，请稍后...");
+ }
}
}
}
\ No newline at end of file
diff --git a/web-app/.gitignore b/web-app/.gitignore
new file mode 100644
index 0000000..a547bf3
--- /dev/null
+++ b/web-app/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/web-app/.vscode/extensions.json b/web-app/.vscode/extensions.json
new file mode 100644
index 0000000..a7cea0b
--- /dev/null
+++ b/web-app/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+ "recommendations": ["Vue.volar"]
+}
diff --git a/web-app/README.md b/web-app/README.md
new file mode 100644
index 0000000..1511959
--- /dev/null
+++ b/web-app/README.md
@@ -0,0 +1,5 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `
+
+