ShaoHua
84 lines
2.9 KiB
Markdown
84 lines
2.9 KiB
Markdown
# 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 断点。 |