Blazor Hybrid / MAUI 簡介和實戰

2022 年 5 月 7 日
筆記
.NET6, Blazor, Blazor Hybrid, Blazor Webassembly, Blazor組件, BootstrapBlazor, Freesql ORM, MAUI/Xamarin/多平台, WinForm, WPF

原文鏈接: //www.cnblogs.com/densen2014/p/16240966.html

1. Blazor

Blazor 是一個使用 .NET 生成互動式客戶端 Web UI 的框架：

使用 C# 代替 JavaScript 來創建資訊豐富的互動式 UI。共享使用 .NET 編寫的伺服器端和客戶端應用邏輯。將 UI 呈現為 HTML 和 CSS，以支援眾多瀏覽器，其中包括移動瀏覽器。與新式託管平台（如 Docker）集成。使用 .NET 進行客戶端 Web 開發可提供以下優勢：

使用 C# 代替 JavaScript 來編寫程式碼。利用現有的 .NET 庫生態系統。在伺服器和客戶端之間共享應用邏輯。受益於 .NET 的性能、可靠性和安全性。在 Windows、Linux 和 macOS 上使用 Visual Studio 保持高效工作。以一組穩定、功能豐富且易用的通用語言、框架和工具為基礎來進行生成

2. MAUI

.NET 多平台應用程式 UI (.NET MAUI) 是一個跨平台框架，用於使用 C# 和 XAML 創建本機移動和桌面應用程式，使用 .net MAUI，可以開發可在 Android、iOS、macOS 上運行的應用，Windows 以及從單個共享程式碼庫運行的應用。

3. Blazor Hybrid

Blazor Hybrid(混合)，可以通過它在 ASP.NET Core 應用中使用 .NET 生成互動式客戶端 Web UI。
使用 Blazor Hybrid 將桌面和移動本機客戶端框架與 .NET 和 Blazor 結合使用。
在 Blazor Hybrid 應用中，Razor 組件在設備上本機運行。組件通過本地互操作通道呈現到嵌入式 Web View 控制項。組件不在瀏覽器中運行，並且不涉及 WebAssembly。 Razor 組件可快速載入和執行程式碼，組件可通過 .NET 平台完全訪問設備的本機功能。

4. Blazor Hybrid 應用和 .NET MAUI

Blazor Hybrid 支援內置於 .NET 多平台應用 UI (.NET MAUI) 框架。 .NET MAUI 包含 BlazorWebView 控制項，該控制項運行將 Razor 組件呈現到嵌入式 Web View 中。通過結合使用 .NET MAUI 和 Blazor，可以跨移動設備、桌面設備和 Web 重複使用一組 Web UI 組件。

5. 具有 WPF 和 Windows 窗體的 Blazor Hybrid 應用

Blazor Hybrid 應用可以使用 Windows Presentation Foundation (WPF) 和 Windows 窗體構建。 Blazor 為這兩個框架提供 BlazorWebView 控制項。 Razor 組件在 Windows 桌面本機運行並呈現到嵌入式 Web View。通過在 WPF 和 Windows 窗體中使用 Blazor，可以將新的 UI 添加到現有的 Windows 桌面應用，這些應用可以跨具有 .NET MAUI 的平台或在 Web 上重複使用。

5. 歸納總結

大概意思就是, 可以使用 C# 建立一套用 Blazor 技術的單個共享程式碼庫, HTML 和 CSS的互動式 UI, 可以直接生成多端應用程式 APP

類型	技術	平台	特點	特點
瀏覽器	SSR	Windows/Linux/macOS/iPhone/Android	注(1)
瀏覽器	PWA	Windows/Linux/macOS/iPhone/Android	注(2)
Blazor MAUI	BlazorWebView	Windows(UWP)、Android、iOS、macOS	注(3)	跨平台框架，用於使用 C# 和 XAML 創建本機移動應用和桌面應用
Blazor WPF	BlazorWebView	Windows	注(3)	與解析度無關的 UI 框架，使用基於矢量的呈現引擎，構建用於利用現代圖形硬體
BlazorWinForms	BlazorWebView	Windows	注(3)	可創建適用於 Windows 的豐富桌面客戶端應用的 UI 框架。 Windows 窗體開發平台支援廣泛的應用開發功能，包括控制項、圖形、數據綁定和用戶輸入

(1) Blazor Server在 ASP.NET Core 應用中支援在伺服器上託管 Razor 組件。可通過 SignalR 連接處理 UI 更新 ,組件在客戶端交互後，用戶交互和應用事件將觸發 UI 更新。發生更新時，將重新呈現組件圖，並計算 UI diff（差異）。此差異是更新客戶端上的 UI 所需的最小一組 DOM 編輯。差異以二進位格式發送到客戶端，並由瀏覽器應用。
用戶退出組件之後，組件會被丟棄。
(2) 在 Web 瀏覽器內運行 .NET 程式碼。 Blazor WebAssembly 運行時使用 JavaScript 互操作來處理 DOM 操作和瀏覽器 API 調用。
(3) 混合應用混合使用本機和 Web 技術。 Blazor Hybrid 應用在本機客戶端應用中使用 Blazor。 Razor 組件在 .NET 進程中本機運行，並使用本地互操作通道將 Web UI 呈現到嵌入式 Web View 控制項。 WebAssembly 不用於混合應用

6. 測試工程

項目地址

//github.com/densen2014/BlazorMaui

//gitee.com/densen2014/BlazorMaui

項目結構