跨框架應用程式考量

你可能是從 React Native Windows、Electron、Flutter 或 .NET MAUI 轉到 WinUI 3。 本頁說明特別以 WinUI 3 為目標時可預期的情況,以及如何設定 AI 代理以提高成功率。

關鍵決定是:你想保留跨平台的外殼,還是打造一個以 Windows 為優先的應用程式? 給你的 AI 代理一個明確的界線——哪些商業邏輯要保持共享,哪些 UI 應該改寫成原生 WinUI 3。

適用於 Windows 的 React Native

Windows 版 React Native 在底層使用 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 應用程式是包裹在外殼中的網路技術;WinUI 3 是原生的 Win32。 一個實際的漸進路徑是先用 WebView2 在 WinUI 3 視窗中架設現有的網頁介面,然後隨著時間將功能遷移到原生控制項。

起始提示詞:

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 前,重用模型、服務和 ViewModels。
  • 條件編譯僅作為最後手段使用#if WINDOWS