MAUI與Blazor共享一套UI，實(shí)現(xiàn)Windows、macOS、Android、iOS、Web通用UI
1. 前言
距離上次發(fā)《MAUI初體驗(yàn)：爽》一文已經(jīng)過去2個(gè)月了，本計(jì)劃是下半年或者明年再研究MAUI的，現(xiàn)在計(jì)劃提前啦，因?yàn)槲矣X得MAUI Blazor挺有意思的：在Android、iOS、macOS、Windows之間共享UI，一處UI增加或者修改，就能得到一致的UI體驗(yàn)。
看看這篇文章《Blazor Hybrid/MAUI 簡(jiǎn)介和實(shí)戰(zhàn)》對(duì)MAUI Blazor的說明：
MAUI
.NET 多平臺(tái)應(yīng)用程序 UI (.NET MAUI) 是一個(gè)跨平臺(tái)框架，用于使用 C# 和 XAML 創(chuàng)建本機(jī)移動(dòng)和桌面應(yīng)用程序， 使用 .net MAUI，可以開發(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 中。 通過結(jié)合使用 .NET MAUI 和 Blazor，可以跨移動(dòng)設(shè)備、桌面設(shè)備和 Web 重復(fù)使用一組 Web UI 組件。
今天就分享如何在Blazor Server、Blazor Wasm、MAUI Blazor之間共享UI的實(shí)驗(yàn)，這一步完成，后面開發(fā)應(yīng)用時(shí)就方便多了（只針對(duì)UI修改）。
2. 先來體驗(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效果
iPad Air、iOS、macOS桌面效果
MAUI各端未做發(fā)布文件體驗(yàn)（需要做相應(yīng)平臺(tái)的發(fā)布簽名等操作），大家可以按下面介紹的方法創(chuàng)建項(xiàng)目編譯體驗(yàn)一下。
iOS和macOS效果感謝青城同學(xué)提供的圖片素材，站長(zhǎng)mbp安裝了最新的macOS，xCode也是最新的，可能因?yàn)轭A(yù)覽版macOS原因，xCode無法打開，間接影響了maui編譯？
macOS版本和xCode版本
xCode為不可用狀態(tài)
VS編譯出錯(cuò)，后面再解決
用mbp的同學(xué)建議不要安裝預(yù)覽版操作系統(tǒng)，不要當(dāng)勇士....
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)目的上一層目錄，打開PowerShell，輸入查看詳細(xì)的目錄文件組織結(jié)構(gòu)：
仔細(xì)查看三個(gè)模板項(xiàng)目文件結(jié)構(gòu)，我們找出共同的文件查看：
發(fā)現(xiàn)都有目錄和目錄（其中Wasm項(xiàng)目沒有Data目錄，使用的示例類是直接寫在文件中的），那把這部分文件直接提取到類庫(kù)中就可以了，那就做吧。
4. 提取UI到Razor類庫(kù)
創(chuàng)建Razor類庫(kù)：Dotnet9.Webapp
下面開始UI的提取
如上圖，將項(xiàng)目的、、三個(gè)目錄外加文件剪切到項(xiàng)目中，然后修改剪切后相應(yīng)文件的命名空間為，打開項(xiàng)目的文件，參考項(xiàng)目的文件部分命名空間，修改如下：
上面部分命名空間可以刪除（未嘗試），編譯項(xiàng)目，檢查是否正確編譯。
5. 各端項(xiàng)目修改
5.1 MAUI項(xiàng)目
添加
項(xiàng)目引用中改為刪除
、、三個(gè)目錄外加文件，上一步是剪切的話這步省略修改
文件，主要是添加項(xiàng)目命名空間引用
修改引用的命名空間：=>打開
，對(duì)路由組件命名空間的引用修改
添加命名空間,修改代碼如下：
修改前：
修改后：
修改完畢，編譯運(yùn)行項(xiàng)目吧，接下來修改項(xiàng)目。
5.2 Blazor Server項(xiàng)目
添加
項(xiàng)目引用中改為刪除
目錄刪除
目錄中的、、三個(gè)文件（包括同名的、文件）刪除
目錄修改
文件，主要是添加項(xiàng)目命名空間引用
打開
文件，添加命名空間引用,修改代碼如下：
修改前：
修改后：
修改完畢，編譯運(yùn)行項(xiàng)目吧，接下來修改項(xiàng)目。
5.3 Blazor Wasm項(xiàng)目
添加
項(xiàng)目引用刪除
、目錄外加文件中改為，同時(shí)修改代碼
修改前
修改后
修改
文件，主要是添加項(xiàng)目命名空間引用
修改完畢，編譯運(yùn)行項(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)目
一句話：將UI封裝到Razor類庫(kù)，其他終端工程(、、)引用此工程即可實(shí)現(xiàn)UI共享。
本文代碼地址：https://github.com/dotnet9/Dotnet9
原文：https://dotnet9.com/2022/06/Share-razor-library-between-maui-and-blazor-server-or-client
參考
ASP.NET Community Standup - Native client apps with Blazor Hybrid
Blazor一份代碼在Blazor WebAssembly和Blazor Server之間任意切換
微軟MAUI文檔
微軟Blazor文檔
學(xué)Blazor
