跨框架应用注意事项

你可能会从 React Native Windows、Electron、Flutter 或 .NET MAUI 来到 WinUI 3。 本页介绍专门针对 WinUI 3 时的预期内容,以及如何为成功设置 AI 代理。

关键决策:是否要保留跨平台 shell,还是构建Windows优先应用? 为 AI 代理提供明确的边界- 哪些业务逻辑保持共享,哪些 UI 应重写为本机 WinUI 3。

React Native for Windows

React Native for Windows 在底层使用 WinUI 渲染层。 可以通过 <WindowsXamlView> 或 NativeModules 集成原生 Windows 控件。

为了获得完全本机Windows体验,直接移植到 WinUI 3 可提供更好的性能和完全Windows API 访问权限。 保留业务逻辑和服务,但将 UI 组件重写为 XAML 和 C# 。

初学者提示:

I have a React Native for Windows component. Rewrite it as a WinUI 3 UserControl using C# and XAML.

电子

Electron 应用程序是封装在外壳中的 Web 技术;WinUI 3 是原生 Win32。 实际的增量路径是使用 WebView2 在 WinUI 3 窗口中托管现有 Web UI,然后随着时间的推移将功能迁移到本机控件。

初学者提示:

I have an Electron app. Create a WinUI 3 shell that hosts a WebView2, and show me how to call native Windows APIs from the web layer using window.chrome.webview.postMessage.

.NET MAUI

.NET MAUI 已经通过 WinUI 3 以 Windows 为目标平台。 如果你想获得纯 Windows 体验,并完全访问 WinUI 3 的全部功能,请移除 MAUI,直接以 WinUI 3 为目标。

  • ViewModels 和服务可顺利迁移
  • MAUI XAML (Microsoft.Maui.Controls.*) 需要重写到 WinUI 3 XAML(Microsoft.UI.Xaml.*
  • 保持共享的 .NET 类库不变

初学者提示:

I have a .NET MAUI ViewModel and service layer. Reuse them in a WinUI 3 project targeting Windows only. Keep the ViewModel unchanged and update only the View.

Flutter

Flutter for Windows使用自己的渲染引擎,而不是 WinUI 3。 平台通道允许 Flutter 调用原生 Win32 或 WinRT API,但完整移植会用原生 XAML 替代 Flutter 的渲染。

初学者提示:

I have a Flutter screen with a list and a detail view. Rewrite it as a WinUI 3 page using NavigationView and a master/detail layout.

跨平台共享代码

  • 将业务逻辑保存在单独的.NET类库中 - 它与平台无关
  • 在 WinUI 3、MAUI、Blazor 或任何其他.NET目标之间共享该库
  • 在重写 UI 之前重用模型、服务和 ViewModel
  • 仅使用 #if WINDOWS 条件编译作为最后手段