1. 前言

距離上次發(fā)《MAUI初體驗：爽》一文已經(jīng)過去2個月了恃疯，本計劃是下半年或者明年再研究MAUI的漏设，現(xiàn)在計劃提前啦，因為我覺得MAUI Blazor挺有意思的：在Android今妄、iOS郑口、macOS、Windows之間共享UI盾鳞，一處UI增加或者修改犬性，就能得到一致的UI體驗。

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

MAUI

.NET 多平臺應(yīng)用程序 UI (.NET MAUI) 是一個跨平臺框架腾仅，用于使用 C# 和 XAML 創(chuàng)建本機移動和桌面應(yīng)用程序乒裆， 使用 .net MAUI，可以開發(fā)可在 Android推励、iOS鹤耍、macOS 上運行的應(yīng)用肉迫，Windows 以及從單個共享代碼庫運行的應(yīng)用。

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

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

今天就分享如何在Blazor Server陵珍、Blazor Wasm寝杖、MAUI Blazor之間共享UI的實驗，這一步完成互纯，后面開發(fā)應(yīng)用時就方便多了（只針對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效果

1301.gif

iPad Air、iOS愤兵、macOS桌面效果

1309.png

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

iOS和macOS效果感謝青城同學(xué)提供的圖片素材秆乳，站長mbp安裝了最新的macOS懦鼠，xCode也是最新的，可能因為預(yù)覽版macOS原因屹堰，xCode無法打開肛冶，間接影響了maui編譯？

macOS版本和xCode版本

1306.png

xCode為不可用狀態(tài)

1312.jpg

VS編譯出錯扯键，后面再解決

1313.jpg

用mbp的同學(xué)建議不要安裝預(yù)覽版操作系統(tǒng)睦袖，不要當勇士....

3. 新建項目

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

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

1302.png

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

1303.png

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

1304.png

3.4 查找共同點

在3個項目的上一層目錄，打開PowerShell厉亏，輸入tree /f查看詳細的目錄文件組織結(jié)構(gòu)：

1305.gif

仔細查看三個模板項目文件結(jié)構(gòu)董习，我們找出共同的文件查看：

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

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

4. 提取UI到Razor類庫

創(chuàng)建Razor類庫：Dotnet9.WebApp

1307.png

下面開始UI的提取

1308.png

如上圖，將Dotnet9.MAUI項目的Data窝趣、Pages蔗喂、Shared三個目錄外加Main.razor文件剪切到Dotnet9.WebApp項目中，然后修改剪切后相應(yīng)文件的命名空間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項目

1. 添加Dotnet9.WebApp項目引用
2. Program.cs中using Dotnet9.MAUI.Data;改為using Dotnet9.WebApp.Data
3. 刪除Data预麸、Pages、Shared三個目錄外加Main.razor文件儒将，上一步是剪切的話這步省略
4. 修改_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

4. MauiProgram.cs修改引用的命名空間：using Dotnet9.MAUI.Data; => using Dotnet9.WebApp.Data;
5. 打開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項目

1. 添加Dotnet9.WebApp項目引用
2. Program.cs中using Dotnet9.Server.Data;改為using Dotnet9.WebApp.Data;
3. 刪除Data目錄
4. 刪除Pages目錄中的Counter.razor砰逻、FetchData.razor鸣驱、Index.razor三個文件（包括同名的.cs、.css文件）
5. 刪除Shared目錄
6. 修改_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

5. 打開./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項目

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

修改前

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

修改后

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

5. 修改_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項目鉴逞，至此三種項目模板已經(jīng)修改完成遗菠，最終解決方案如下圖：

1311.png

6 總結(jié)

總結(jié)就是下圖：

1310.png

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

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

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

參考

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