WPF WebView2 混合开发 Demo

本项目展示了如何使用 WPF 和 Vue 3 (Vite) 构建高性能的桌面混合应用。通过 WebView2 控件实现前后端深度交互，并提供了一套标准化的通信网关。

🚀 核心特性

• 标准化通信网关：基于“请求/响应信封”协议，支持泛型参数解析。
• 动态路由分发：后端使用反射机制自动扫描 [WebApiControl] 和 [WebAction] 特性，无需繁琐的 switch-case。
• 前后端分离开发：Vue 端支持热更新调试，WPF 端支持 Host Object 注入。
• 一键合并发布：提供 PowerShell 脚本，自动编译 Vue 并嵌入 WPF 运行，实现绿色离线运行。

📂 项目结构

WebView2Demo/
├── WebView2Demo/           # WPF 项目 (C#)
│   ├── WebInterop/         # 互操作核心逻辑 (网关、路由、特性)
│   ├── Models/             # 共享的数据模型
│   └── wwwroot/            # 发布时存放 Vue 编译产物的目录
├── web-app/                # Vue 3 前端项目 (Vite)
│   ├── src/
│   │   ├── AppLogic.js     # 抽离的业务逻辑
│   │   └── utils/interop.js # 前端通信工具类
├── publish.ps1             # 一键发布脚本
└── README.md

🛠️ 环境准备

• 后端: .NET 10.0 SDK, Visual Studio 2022 或 Trae IDE
• 前端: Node.js (建议 v18+), npm
• 运行时: 已安装 Microsoft Edge WebView2 Runtime

💻 开发调试指南

1. 启动前端

cd web-app
npm install
npm run dev

默认端口通常为 5173 或 5174，请确认控制台输出。

2. 启动后端 (WPF)

• 确保 MainWindow.xaml.cs 中的 webView.Source 端口与 Vue 运行端口一致。
• 在根目录执行以下命令启动：

dotnet run --project WebView2Demo/WebView2Demo.csproj

• 或者在 IDE 中直接按 F5 启动。

📦 合并发布 (生成分发包)

运行根目录下的 PowerShell 脚本，它会自动清理旧产物、编译前端、同步资源并发布后端：

./publish.ps1

发布完成后，产物将存放在根目录的 Publish 文件夹中。双击 WebView2Demo.exe 即可运行。

🔌 通信示例

前端调用后端

import { InteropHelper } from './utils/interop'

// 调用 C# 业务逻辑
const result = await InteropHelper.callApi('Calculate', { a: 10, b: 20 });

后端定义业务 (C#)

[WebApiControl]
public class MyService {
    [WebAction("Calculate")]
    public int Add(CalculationParams p) => p.A + p.B;
}

📝 调试技巧

• 前端断点：在 WPF 运行窗口中右键点击“检查 (Inspect)”，在弹出的 DevTools 中调试 Vue 代码。
• 强制断点：在 JS 中写入 debugger; 语句可强制触发 DevTools 断点。