如何在C++ Win32风格Windows桌面应用中使用Fluent UI React？

核心思路 #

Office这类Win32应用集成React/Fluent UI的本质，是用WebView2控件承载React前端，通过C++原生代码与WebView2双向通信——既保留Win32应用的原生系统能力，又能借助Fluent UI React快速构建现代视觉风格的UI。

步骤1：创建基础C++ Win32项目 #

• 用Visual Studio创建Win32桌面应用程序，可选择带基础窗口的模板或空项目
• 确保项目配置支持C++17及以上，且已安装最新稳定版Windows SDK

步骤2：集成WebView2控件 #

WebView2是连接C++原生层和React前端的核心桥梁，需先完成依赖引入和控件初始化：

• 通过NuGet安装Microsoft.Web.WebView2包（Visual Studio中打开「管理NuGet程序包」搜索安装），或手动引入WebView2头文件与库文件（默认路径C:\Program Files (x86)\Microsoft Edge WebView2\Build）
• 在Win32窗口中初始化WebView2的核心代码示例：

  #include <windows.h>
  #include <WebView2.h>
  
  ICoreWebView2* m_webView = nullptr;
  
  HRESULT CALLBACK OnCreateWebView2Completed(HRESULT result, ICoreWebView2* webView) {
      if (SUCCEEDED(result)) {
          m_webView = webView;
          // 开发阶段加载本地React dev server，发布阶段替换为静态文件路径
          m_webView->Navigate(L"http://localhost:3000");
          
          // 注册前端消息接收回调，实现原生与React交互
          m_webView->AddWebMessageReceivedEventHandler(
              Callback<ICoreWebView2WebMessageReceivedEventHandler>(
                  [](ICoreWebView2* sender, ICoreWebView2WebMessageReceivedEventArgs* args) -> HRESULT {
                      PWSTR message;
                      args->TryGetWebMessageAsString(&message);
                      MessageBox(nullptr, message, L"原生收到消息", MB_OK);
                      CoTaskMemFree(message);
                      return S_OK;
                  }
              ).Get()
          );
      }
      return S_OK;
  }
  
  void InitializeWebView2(HWND hwnd) {
      CreateCoreWebView2EnvironmentWithOptions(nullptr, nullptr, nullptr,
          Callback<ICoreWebView2CreateCoreWebView2EnvironmentCompletedHandler>(
              [hwnd](HRESULT result, ICoreWebView2Environment* env) -> HRESULT {
                  if (SUCCEEDED(result)) {
                      env->CreateCoreWebView2Controller(hwnd,
                          Callback<ICoreWebView2CreateCoreWebView2ControllerCompletedHandler>(
                              [hwnd](HRESULT result, ICoreWebView2Controller* controller) -> HRESULT {
                                  if (SUCCEEDED(result)) {
                                      ICoreWebView2* webView;
                                      controller->get_CoreWebView2(&webView);
                                      // 让WebView2填充整个窗口
                                      RECT rect;
                                      GetClientRect(hwnd, &rect);
                                      controller->put_Bounds(rect);
                                      OnCreateWebView2Completed(result, webView);
                                      webView->Release();
                                  }
                                  return S_OK;
                              }
                          ).Get()
                      );
                  }
                  return S_OK;
              }
          ).Get()
      );
  }
  

步骤3：构建Fluent UI React V8前端 #

• 初始化React项目并安装Fluent UI V8：

  npx create-react-app fluent-ui-frontend
  cd fluent-ui-frontend
  npm install @fluentui/react@8
  

• 编写Fluent风格UI组件，示例替换App.js：

  import { Button, ThemeProvider, createTheme } from '@fluentui/react';
  import { useEffect } from 'react';
  
  // 配置匹配Office的Fluent主题
  const theme = createTheme({
    palette: { themePrimary: '#0078d4' }
  });
  
  function App() {
    // 接收原生C++发送的消息
    useEffect(() => {
      const handleMessage = (event) => {
        alert(`收到原生消息：${event.data}`);
      };
      window.chrome.webview.addEventListener('message', handleMessage);
      return () => window.chrome.webview.removeEventListener('message', handleMessage);
    }, []);
  
    // 向原生C++发送消息
    const sendToNative = () => {
      window.chrome.webview.postMessage('来自Fluent UI的消息');
    };
  
    return (
      <ThemeProvider theme={theme}>
        <div style={{ width: '100%', height: '100vh', margin: 0, padding: '20px', boxSizing: 'border-box' }}>
          <h1>Fluent UI React 嵌入Win32应用</h1>
          <Button variant="primary" onClick={sendToNative} styles={{ root: { marginTop: '20px' } }}>
            发送消息给原生代码
          </Button>
        </div>
      </ThemeProvider>
    );
  }
  
  export default App;
  

• 开发阶段执行npm start启动本地服务器，让WebView2加载该地址；发布阶段执行npm run build生成静态文件，将WebView2的导航路径替换为本地静态文件路径（如file:///C:/path/to/build/index.html）

步骤4：双向通信扩展 #

• 原生C++向React发送消息：

  m_webView->PostWebMessageAsString(L"Win32原生主动发送消息");
  

• React向原生传递复杂数据时，可使用JSON格式（前端转字符串发送，原生解析后处理）

关键注意事项 #

• 确保用户机器安装WebView2运行时：可在应用安装包中集成WebView2引导程序，或让应用自动检测并提示用户下载
• 性能优化：发布React项目时启用生产构建以压缩包体积；原生代码中合理管理WebView2生命周期，避免内存泄漏
• 样式适配：设置React页面的html和body样式为width: 100%; height: 100%; margin: 0;，让Fluent UI组件无缝填满WebView2控件

内容的提问来源于stack exchange，提问作者Harshith