MAUI與Blazor共享一套UI，媲美Flutter，實(shí)現(xiàn)Windows、macOS、Android、iOS、Web通用UI

1. 前言

距離上次發(fā)《MAUI初體驗(yàn)：爽》一文已經(jīng)過(guò)去2個(gè)月了，本計(jì)劃是下半年或者明年再研究MAUI的，現(xiàn)在計(jì)劃提前啦，因?yàn)槲矣X(jué)得MAUI Blazor挺有意思的：在Android、iOS、macOS、Windows之間共享UI，一處UI增加或者修改，就能得到一致的UI體驗(yàn)。

看看這篇文章《Blazor Hybrid/MAUI 簡(jiǎn)介和實(shí)戰(zhàn)^[1]》對(duì)MAUI Blazor的說(shuō)明：

MAUI

.NET 多平臺(tái)應(yīng)用程序 UI (.NET MAUI) 是一個(gè)跨平臺(tái)框架，用于使用 C# 和 XAML 創(chuàng)建本機(jī)移動(dòng)和桌面應(yīng)用程序， 使用 .net MAUI，可以開(kāi)發(fā)可在 Android、iOS、macOS 上運(yùn)行的應(yīng)用，Windows 以及從單個(gè)共享代碼庫(kù)運(yùn)行的應(yīng)用。

Blazor Hybrid 應(yīng)用和 .NET MAUI

Blazor Hybrid 支持內(nèi)置于 .NET 多平臺(tái)應(yīng)用 UI (.NET MAUI) 框架。.NET MAUI 包含 BlazorWebView 控件，該控件運(yùn)行將 Razor 組件呈現(xiàn)到嵌入式 Web View 中。通過(guò)結(jié)合使用 .NET MAUI 和 Blazor，可以跨移動(dòng)設(shè)備、桌面設(shè)備和 Web 重復(fù)使用一組 Web UI 組件。

今天就分享如何在Blazor Server、Blazor Wasm、MAUI Blazor之間共享UI的實(shí)驗(yàn)，這一步完成，后面開(kāi)發(fā)應(yīng)用時(shí)就方便多了（只針對(duì)UI修改）。

2. 先來(lái)體驗(yàn)下各端最終效果

• 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效果

iOS、macOS桌面效果

MAUI各端未做發(fā)布文件體驗(yàn)（需要做相應(yīng)平臺(tái)的發(fā)布簽名等操作），大家可以按下面介紹的方法創(chuàng)建項(xiàng)目編譯體驗(yàn)一下。

iOS和macOS效果感謝青城同學(xué)^[2]提供的圖片素材，站長(zhǎng)mbp安裝了最新的macOS，xCode也是最新的，可能因?yàn)轭A(yù)覽版macOS原因，xCode無(wú)法打開(kāi)，間接影響了maui編譯？

3. 新建項(xiàng)目

關(guān)于MAUI的環(huán)境搭建可參考這篇文章《在MAUI中使用Masa Blazor》，本文不再介紹環(huán)境搭建，直接使用VS 2022最新預(yù)覽版項(xiàng)目模板創(chuàng)建項(xiàng)目。

3.1 創(chuàng)建Blazor Server項(xiàng)目：Dotnet9.Server

3.2 創(chuàng)建Blazor WebAssembly項(xiàng)目：Dotnet9.Wasm

3.3 創(chuàng)建MAUI Blazor項(xiàng)目：Dotnet9.MAUI

3.4 查找共同點(diǎn)

在3個(gè)項(xiàng)目的上一層目錄，打開(kāi)PowerShell，輸入tree /f查看詳細(xì)的目錄文件組織結(jié)構(gòu)：

仔細(xì)查看三個(gè)模板項(xiàng)目文件結(jié)構(gòu)，我們找出共同的文件查看：

文件夾 PATH 列表
卷序列號(hào)為 76F5-AF62
C:.
│  Dotnet9.sln
│
├─Dotnet9.MAUI
【1 這里省略數(shù)個(gè)文件】
│  │
│  ├─Data
│  │      WeatherForecast.cs
│  │      WeatherForecastService.cs
│  │
│  ├─Pages
│  │      Counter.razor
│  │      FetchData.razor
│  │      Index.razor
【2 這里省略數(shù)個(gè)文件】
│  │
│  ├─Shared
│  │      MainLayout.razor
│  │      MainLayout.razor.css
│  │      NavMenu.razor
│  │      NavMenu.razor.css
│  │      SurveyPrompt.razor
【3 這里省略數(shù)個(gè)文件】
│
├─Dotnet9.Server
│  │  App.razor
【4 這里省略數(shù)個(gè)文件】
│  │
│  ├─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 這里省略數(shù)個(gè)文件】
│
└─Dotnet9.Wasm
【6 這里省略數(shù)個(gè)文件】
    │
    ├─Pages
    │      Counter.razor
    │      FetchData.razor
    │      Index.razor
    │
    ├─Properties
    │      launchSettings.json
    │
    ├─Shared
    │      MainLayout.razor
    │      MainLayout.razor.css
    │      NavMenu.razor
    │      NavMenu.razor.css
    │      SurveyPrompt.razor
【7 這里省略數(shù)個(gè)文件】

發(fā)現(xiàn)都有Data目錄和Pages目錄（其中Wasm項(xiàng)目沒(méi)有Data目錄，使用的示例類(lèi)是直接寫(xiě)在FetchData.razor文件@code{}中的），那把這部分文件直接提取到類(lèi)庫(kù)中就可以了，那就做吧。

4. 提取UI到Razor類(lèi)庫(kù)

創(chuàng)建Razor類(lèi)庫(kù)：Dotnet9.WebApp

下面開(kāi)始UI的提取

如上圖，將Dotnet9.MAUI項(xiàng)目的Data、Pages、Shared三個(gè)目錄外加Main.razor文件剪切到Dotnet9.WebApp項(xiàng)目中，然后修改剪切后相應(yīng)文件的命名空間Dotnet9.MAUI[xxx]為Dotnet9.WebApp[xxx]，打開(kāi)Dotnet9.WebApp項(xiàng)目的_Import.razor文件，參考Dotnet9.MAUI項(xiàng)目的_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項(xiàng)目，檢查是否正確編譯。

5. 各端項(xiàng)目修改

5.1 MAUI項(xiàng)目

1. 添加Dotnet9.WebApp項(xiàng)目引用
2. Program.cs中using Dotnet9.MAUI.Data;改為using Dotnet9.WebApp.Data
3. 刪除Data、Pages、Shared三個(gè)目錄外加Main.razor文件，上一步是剪切的話(huà)這步省略
4. 修改_Imports.razor文件，主要是添加Dotnet9.WebApp項(xiàng)目命名空間引用

@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

4. MauiProgram.cs修改引用的命名空間：using Dotnet9.MAUI.Data; => using Dotnet9.WebApp.Data;
5. 打開(kāi)MainPage.xaml，對(duì)路由組件命名空間的引用修改

添加命名空間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}" />

修改完畢，編譯運(yùn)行Dotnet9.MAUI項(xiàng)目吧，接下來(lái)修改Dotnet9.Server項(xiàng)目。

5.2 Blazor Server項(xiàng)目

1. 添加Dotnet9.WebApp項(xiàng)目引用
2. Program.cs中using Dotnet9.Server.Data;改為using Dotnet9.WebApp.Data;
3. 刪除Data目錄
4. 刪除Pages目錄中的Counter.razor、FetchData.razor、Index.razor三個(gè)文件（包括同名的.cs、.css文件）
5. 刪除Shared目錄
6. 修改_Imports.razor文件，主要是添加Dotnet9.WebApp項(xiàng)目命名空間引用

@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

5. 打開(kāi)./Pages/_Host.cshtml文件，添加命名空間引用@using Dotnet9.WebApp,修改代碼如下：

修改前：

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

修改后：

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

修改完畢，編譯運(yùn)行Dotnet9.Server項(xiàng)目吧，接下來(lái)修改Dotnet9.Wasm項(xiàng)目。

5.3 Blazor Wasm項(xiàng)目

1. 添加Dotnet9.WebApp項(xiàng)目引用
2. 刪除Pages、Shared目錄外加App.razor文件
3. Program.cs中using Dotnet9.Wasm;改為using Dotnet9.WebApp;，同時(shí)修改代碼

修改前

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

修改后

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

5. 修改_Imports.razor文件，主要是添加Dotnet9.WebApp項(xiàng)目命名空間引用

@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

修改完畢，編譯運(yùn)行Dotnet9.Wasm項(xiàng)目，至此三種項(xiàng)目模板已經(jīng)修改完成，最終解決方案如下圖：

6 總結(jié)

總結(jié)就是下圖：

• Dotnet9.WebApp：blazor組件相關(guān)的代碼、路由組件等放在這個(gè)工程，供其他項(xiàng)目引用
• Dotnet9.Server：Blazor Server模板項(xiàng)目
• Dotnet9.Wasm：Blazor WebAssembly項(xiàng)目
• Dotnet9.MAUI：MAUI Blazor項(xiàng)目

一句話(huà)：將UI封裝到Razor類(lèi)庫(kù)Dotnet9.WebApp，其他終端工程(Dotnet9.Server、Dotnet9.MAUI、Dotnet9.Wasm)引用此工程即可實(shí)現(xiàn)UI共享。

• 本文代碼地址：https://github.com/dotnet9/Dotnet9^[3]
• 原文：https://dotnet9.com/2022/06/Share-razor-library-between-maui-and-blazor-server-or-client^[4]

參考

1. ASP.NET Community Standup - Native client apps with Blazor Hybrid^[5]
2. Blazor一份代碼在Blazor WebAssembly和Blazor Server之間任意切換^[6]
3. 微軟MAUI文檔^[7]
4. 微軟Blazor文檔^[8]
5. 學(xué)Blazor^[9]

參考資料