# WPF WebView2 混合开发 Demo

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

## 🚀 核心特性

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

## 📂 项目结构

```text
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. 启动前端
```bash
cd web-app
npm install
npm run dev
```
*默认端口通常为 5173 或 5174，请确认控制台输出。*

### 2. 启动后端 (WPF)
- 确保 [MainWindow.xaml.cs](file:///d:/Codes/Learning/WPF/WebView2Demo/WebView2Demo/MainWindow.xaml.cs) 中的 `webView.Source` 端口与 Vue 运行端口一致。
- 在根目录执行以下命令启动：
```bash
dotnet run --project WebView2Demo/WebView2Demo.csproj
```
- 或者在 IDE 中直接按 `F5` 启动。

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

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

```powershell
./publish.ps1
```

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

## 🔌 通信示例

### 前端调用后端
```javascript
import { InteropHelper } from './utils/interop'

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

### 后端定义业务 (C#)
```csharp
[WebApiControl]
public class MyService {
    [WebAction("Calculate")]
    public int Add(CalculationParams p) => p.A + p.B;
}
```

## 📝 调试技巧

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