技术路线图
C++ 业务逻辑 + HTML/CSS UI 是现代桌面应用主流架构（如 VS Code、Discord、Figma）。核心是嵌入 Web 渲染引擎，通过 IPC/桥接实现 C++↔JS 双向通信。
主流方案对比
| 方案 | 引擎 | 语言绑定 | 包体大小 | 性能 | 生态成熟度 | 典型应用 |
|---|
| WebView2 | Edge (Chromium) | C++/WinRT, .NET | 共享系统运行时 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | Office, Teams, VS |
| CEF | Chromium | C/C++ | ~100MB | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | Steam, Spotify, Discord |
| Electron | Chromium + Node.js | JS/TS (主进程 C++ 扩展) | ~150MB | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | VS Code, Slack, Figma |
| Tauri | WebView2/WebKit | Rust + JS | ~3MB | ⭐⭐⭐⭐ | ⭐⭐⭐ | 新兴轻量级应用 |
| Qt WebEngine | Chromium | C++ (Qt) | ~80MB | ⭐⭐⭐⭐ | ⭐⭐⭐⭐ | Qt 生态应用 |
| HtmlLayout | 自研轻量 | C++ (单 DLL) | ~2MB | ⭐⭐ | ⭐⭐ | 简单工业界面 |
选型决策树
需要 Node.js 生态？ → Electron
追求极致轻量/安全？ → Tauri (Rust 门槛较高)
Windows 专属/企业级？ → WebView2 (最佳原生集成)
跨平台 C++ 老项目？ → CEF / Qt WebEngine
简单只需 HTML 布局？ → HtmlLayout / Sciter
WebView2 快速上手 (C++)
// 1. 安装 NuGet: Microsoft.Web.WebView2
// 2. 初始化
#include <WebView2.h>
using namespace Microsoft::WRL;
ComPtr<ICoreWebView2Controller> controller;
ComPtr<ICoreWebView2> webview;
CreateCoreWebView2ControllerWithOptions(hwnd, options, Callback<ICoreWebView2CreateCoreWebView2ControllerCompletedHandler>(
[&](HRESULT result, ICoreWebView2Controller* ctrl) {
controller = ctrl;
controller->get_CoreWebView2(&webview);
webview->Navigate(L"https://local-ui/index.html");
}
).Get());
// 3. C++ 调用 JS
webview->ExecuteScript(L"updateUI('data')", nullptr);
// 4. JS 调用 C++ (需注册宿主对象)
webview->AddHostObjectToScript(L"native", nativeObject.Get());
通信机制对比
| 机制 | WebView2 | CEF | Electron |
|---|
| C++→JS | ExecuteScript | ExecuteJavaScript | webContents.executeJavaScript |
| JS→C++ | AddHostObjectToScript (COM) | CefV8Handler | ipcMain / contextBridge |
| 共享内存 | 支持 | 支持 | 支持 |
避坑指南
- 分发体积：WebView2 依赖系统 Edge 运行时，需打包 Evergreen Bootstrapper
- 调试：
webview->OpenDevToolsWindow() 或 Edge DevTools 附加进程
- 安全：配置
CoreWebView2Settings 禁用不必要权限
