MAUI與Blazor共享一套UI，媲美Flutter，實現Windows、macOS、Android、iOS、Web通用UI

Dotnet9個人部落格發表於2022-06-21

1. 前言

距離上次發《MAUI初體驗：爽》一文已經過去2個月了，本計劃是下半年或者明年再研究MAUI的，現在計劃提前啦，因為我覺得MAUI Blazor挺有意思的：在Android、iOS、macOS、Windows之間共享UI，一處UI增加或者修改，就能得到一致的UI體驗。

看看這篇文章《Blazor Hybrid/MAUI 簡介和實戰》對MAUI Blazor的說明：

MAUI

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

Blazor Hybrid 應用和 .NET MAUI

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

今天就分享如何在Blazor Server、Blazor Wasm、MAUI Blazor之間共享UI的實驗，這一步完成，後面開發應用時就方便多了（只針對UI修改）。

2. 先來體驗下各端最終效果

Blazor Server：http://server.dotnet9.com/
Blazor Wasm：http://wasm.dotnet9.com/
MAUI(Android\Windows\macOS)：https://github.com/dotnet9/Dotnet9/tree/develop/src/Dotnet9.MAUI（原始碼自行編譯）

Windows桌面、Blazor Server(線上）、Blazor Wasm(線上）、Android效果

iPad Air、iOS、macOS桌面效果

MAUI各端未做釋出檔案體驗（需要做相應平臺的釋出簽名等操作），大家可以按下面介紹的方法建立專案編譯體驗一下。

iOS和macOS效果感謝青城同學提供的圖片素材，站長mbp安裝了最新的macOS，xCode也是最新的，可能因為預覽版macOS原因，xCode無法開啟，間接影響了maui編譯？

macOS版本和xCode版本

xCode為不可用狀態

VS編譯出錯，後面再解決

用mbp的同學建議不要安裝預覽版作業系統，不要當勇士....

3. 新建專案

關於MAUI的環境搭建可參考這篇文章《在MAUI中使用Masa Blazor》，本文不再介紹環境搭建，直接使用VS 2022最新預覽版專案模板建立專案。

3.1 建立Blazor Server專案：Dotnet9.Server

3.2 建立Blazor WebAssembly專案：Dotnet9.Wasm

3.3 建立MAUI Blazor專案：Dotnet9.MAUI

3.4 查詢共同點

在3個專案的上一層目錄，開啟PowerShell，輸入tree /f檢視詳細的目錄檔案組織結構：

仔細檢視三個模板專案檔案結構，我們找出共同的檔案檢視：

資料夾 PATH 列表
卷序列號為 76F5-AF62
C:.
│  Dotnet9.sln
│
├─Dotnet9.MAUI
【1 這裡省略數個檔案】
│  │
│  ├─Data
│  │      WeatherForecast.cs
│  │      WeatherForecastService.cs
│  │
│  ├─Pages
│  │      Counter.razor
│  │      FetchData.razor
│  │      Index.razor
【2 這裡省略數個檔案】
│  │
│  ├─Shared
│  │      MainLayout.razor
│  │      MainLayout.razor.css
│  │      NavMenu.razor
│  │      NavMenu.razor.css
│  │      SurveyPrompt.razor
【3 這裡省略數個檔案】
│
├─Dotnet9.Server
│  │  App.razor
【4 這裡省略數個檔案】
│  │
│  ├─Data
│  │      WeatherForecast.cs
│  │      WeatherForecastService.cs
│  │
│  ├─Pages
│  │      Counter.razor
│  │      Error.cshtml
│  │      Error.cshtml.cs
│  │      FetchData.razor
│  │      Index.razor
│  │      _Host.cshtml
│  │      _Layout.cshtml
│  │
│  ├─Properties
│  │      launchSettings.json
│  │
│  ├─Shared
│  │      MainLayout.razor
│  │      MainLayout.razor.css
│  │      NavMenu.razor
│  │      NavMenu.razor.css
│  │      SurveyPrompt.razor
【5 這裡省略數個檔案】
│
└─Dotnet9.Wasm
【6 這裡省略數個檔案】
    │
    ├─Pages
    │      Counter.razor
    │      FetchData.razor
    │      Index.razor
    │
    ├─Properties
    │      launchSettings.json
    │
    ├─Shared
    │      MainLayout.razor
    │      MainLayout.razor.css
    │      NavMenu.razor
    │      NavMenu.razor.css
    │      SurveyPrompt.razor
【7 這裡省略數個檔案】

發現都有Data目錄和Pages目錄（其中Wasm專案沒有Data目錄，使用的示例類是直接寫在FetchData.razor檔案@code{}中的），那把這部分檔案直接提取到類庫中就可以了，那就做吧。

4. 提取UI到Razor類庫

建立Razor類庫：Dotnet9.WebApp

下面開始UI的提取

如上圖，將Dotnet9.MAUI專案的Data、Pages、Shared三個目錄外加Main.razor檔案剪下到Dotnet9.WebApp專案中，然後修改剪下後相應檔案的名稱空間Dotnet9.MAUI[xxx]為Dotnet9.WebApp[xxx]，開啟Dotnet9.WebApp專案的_Import.razor檔案，參考Dotnet9.MAUI專案的_Import.razor檔案部分名稱空間，修改如下：

@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using Dotnet9.WebApp
@using Dotnet9.WebApp.Shared

上面部分名稱空間可以刪除（未嘗試），編譯Dotnet9.WebApp專案，檢查是否正確編譯。

5. 各端專案修改

5.1 MAUI專案

新增Dotnet9.WebApp專案引用
Program.cs中using Dotnet9.MAUI.Data;改為using Dotnet9.WebApp.Data
刪除Data、Pages、Shared三個目錄外加Main.razor檔案，上一步是剪下的話這步省略
修改_Imports.razor檔案，主要是新增Dotnet9.WebApp專案名稱空間引用

@using System.Net.Http
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using Dotnet9.MAUI
@using Dotnet9.WebApp
@using Dotnet9.WebApp.Shared

MauiProgram.cs修改引用的名稱空間：using Dotnet9.MAUI.Data; => using Dotnet9.WebApp.Data;
開啟MainPage.xaml，對路由元件名稱空間的引用修改

新增名稱空間xmlns:webApp="clr-namespace:Dotnet9.WebApp;assembly=Dotnet9.WebApp",修改程式碼如下：

修改前：

<RootComponent Selector="#app" ComponentType="{x:Type local:Main}" />

修改後：

<RootComponent Selector="#app" ComponentType="{x:Type webApp:Main}" />

修改完畢，編譯執行Dotnet9.MAUI專案吧，接下來修改Dotnet9.Server專案。

5.2 Blazor Server專案

新增Dotnet9.WebApp專案引用
Program.cs中using Dotnet9.Server.Data;改為using Dotnet9.WebApp.Data;
刪除Data目錄
刪除Pages目錄中的Counter.razor、FetchData.razor、Index.razor三個檔案（包括同名的.cs、.css檔案）
刪除Shared目錄
修改_Imports.razor檔案，主要是新增Dotnet9.WebApp專案名稱空間引用

@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using Dotnet9.Server
@using Dotnet9.WebApp
@using Dotnet9.WebApp.Shared

開啟./Pages/_Host.cshtml檔案，新增名稱空間引用@using Dotnet9.WebApp,修改程式碼如下：

修改前：

<component type="typeof(App)" render-mode="ServerPrerendered" />

修改後：

<component type="typeof(Main)" render-mode="ServerPrerendered" />

修改完畢，編譯執行Dotnet9.Server專案吧，接下來修改Dotnet9.Wasm專案。

5.3 Blazor Wasm專案

新增Dotnet9.WebApp專案引用
刪除Pages、Shared目錄外加App.razor檔案
Program.cs中using Dotnet9.Wasm;改為using Dotnet9.WebApp;，同時修改程式碼

修改前

builder.RootComponents.Add<App>("#app");

修改後

builder.RootComponents.Add<Main>("#app");

修改_Imports.razor檔案，主要是新增Dotnet9.WebApp專案名稱空間引用

@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using Dotnet9.Server
@using Dotnet9.WebApp
@using Dotnet9.WebApp.Shared

修改完畢，編譯執行Dotnet9.Wasm專案，至此三種專案模板已經修改完成，最終解決方案如下圖：

6 總結

總結就是下圖：

Dotnet9.WebApp：blazor元件相關的程式碼、路由元件等放在這個工程，供其他專案引用
Dotnet9.Server：Blazor Server模板專案
Dotnet9.Wasm：Blazor WebAssembly專案
Dotnet9.MAUI：MAUI Blazor專案

一句話：將UI封裝到Razor類庫Dotnet9.WebApp，其他終端工程(Dotnet9.Server、Dotnet9.MAUI、Dotnet9.Wasm)引用此工程即可實現UI共享。

本文程式碼地址：https://github.com/dotnet9/Dotnet9
原文：https://dotnet9.com/2022/06/Share-razor-library-between-maui-and-blazor-server-or-client

參考

android ios UI
2020-04-05
AndroidiOSUI
Android通用UI元件之Dialog
2018-07-30
AndroidUI元件
Android與Flutter混合開發-UI互動
2020-02-14
AndroidFlutterUI
Maui Blazor 使用攝像頭實現
2023-01-12
UIBlazor
[譯]Flutter for Android Developers - Async UI
2018-03-03
FlutterAndroidDeveloperUI
Windows 部署 Stable Diffusion web UI
2024-04-02
WindowsWebUI
Vue + Element UI + Lumen 實現通用表格功能 - 分頁
2019-02-01
VueUI
Flutter UI使用Provide實現主題切換
2019-04-04
FlutterUIIDE
WEB UI
2024-05-13
WebUI
SAP UI5 Web Component的圖示實現
2020-02-21
UIWeb
web ui 框架
2018-10-30
WebUI框架
Flutter 側滑欄及城市選擇UI的實現
2019-07-19
FlutterUI
Flutter UI渲染分析
2020-03-04
FlutterUI
Flutter UI系統
2021-08-11
FlutterUI
PathMeasure的API講解與實戰——Android高階UI
2019-01-05
APIAndroidUI
MAUI Blazor (Windows) App 動態設定視窗標題
2022-12-04
UIBlazorWindowsAPP
Flutter UI 1.0.2落地與優化小結
2019-03-23
FlutterUI優化
Java Web UI框架
2018-08-06
JavaWebUI框架
fish-ui 一套基於vue2的ui元件庫
2019-02-16
UIVue元件
HTML原生UI的實現
2018-07-26
HTMLUI
Flutter UI - button系 Widget
2019-11-06
FlutterUI
iOS UI繪製原理
2019-03-04
iOSUI
2-80. 建立 NPCFunction 和通用 UI 實現對話後開啟商店
2024-04-15
FunctionUI
同時相容iOS、Android、微信小程式的UI引擎
2018-11-28
iOSAndroid微信小程式UI
[翻譯] .NET 官宣跨平臺 UI 框架 MAUI
2020-05-20
UI框架
在MAUI中使用Masa Blazor
2022-04-26
UIBlazor
Flutter實現Android、iOS跨平臺經驗總結
2019-10-21
FlutterAndroidiOS
SAP UI5 Web Component不同React頁面的跳轉實現
2020-02-20
UIWebReact
SAP 電商雲 Spartacus UI 的 Product Category Navigation UI 實現
2022-09-02
UIGoNavigation
放蕩不羈SVG講解與實戰——Android高階UI
2019-04-07
SVGAndroidUI
Blazor Web 應用如何實現Auto模式
2024-08-03
BlazorWeb模式
Flutter知乎App實踐：UI+Json+Utils
2019-01-29
FlutterAPPUIJSON
《初識TCP》iOS、macOS實現socket client與socket server
2018-05-07
TCPiOSMacclientServer
Android效能UI卡頓
2019-03-01
AndroidUI
Android 自定義UI元件
2020-04-05
AndroidUI元件
UI與實體的對映
2021-09-09
UI
阿里Android開發規範：UI 與佈局
2018-03-06
阿里AndroidUI
Vue+Element UI實現CRUD
2024-05-19
VueUI