前言

最近在項目中嘗鮮了MAUI，總體感受下來還是挺不錯的，優(yōu)缺點并存，但是瑕不掩瑜，目前隨著.Net版本的迭代升級對它的支持也越來越友好，相信未來可期！感興趣的朋友歡迎關(guān)注。文章中如有不妥的地方，也請多多指教。

項目效果圖

什么是.NET MAUI？

網(wǎng)上關(guān)于MAUI介紹相關(guān)的內(nèi)容也挺多的了，這里只做簡單介紹。了解更多

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

什么是Blazor Hybrid？

Blazor Hybrid(混合)，可以通過它在 ASP.NET Core 應(yīng)用中使用 .NET 生成交互式客戶端 Web UI。
使用 Blazor Hybrid 將桌面和移動本機客戶端框架與 .NET 和 Blazor 結(jié)合使用。
在 Blazor Hybrid 應(yīng)用中，Razor 組件在設(shè)備上本機運行。 組件通過本地互操作通道呈現(xiàn)到嵌入式 Web View 控件。 組件不在瀏覽器中運行，并且不涉及 WebAssembly。 Razor 組件可快速加載和執(zhí)行代碼，組件可通過 .NET 平臺完全訪問設(shè)備的本機功能。

Blazor Hybrid 應(yīng)用與MAUI

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

項目準備

• .Net 7
• Visual Studio 2022

項目搭建

MultiPlatform.Blazor

MultiPlatform.Maui

MultiPlatform.Server

整個項目結(jié)構(gòu)如下：

項目整體思路就是將Blazor UI樣式抽離至 MultiPlatform.Blazor（Razor類庫）項目中，MultiPlatform.Maui（安卓、IOS等）項目用來構(gòu)建多端應(yīng)用，MultiPlatform.Server 則用來跑Web，可以方便我們調(diào)整樣式。

1.抽離 MultiPlatform.Maui UI 至 MultiPlatform.Blazor

1. 添加 MultiPlatform.Blazor 項目引用
2. 文件抽離過去后注意調(diào)整命名空間，直接調(diào)整 MultiPlatform.Blazor 項目的 _Imports.razor即可。

@using Microsoft.AspNetCore.Components.Web
@using MultiPlatform.Blazor.Shared
@using Microsoft.AspNetCore.Components.Routing
@using MultiPlatform.Blazor.Data

3. 因為我們將Main.razor文件抽離到了 MultiPlatform.Blazor，所以我們還需要調(diào)整 MultiPlatform.Maui項目中的 MainPage.xaml 文件：（相關(guān)知識點參考）

BlazorWebView 項目模板創(chuàng)建的 在 MainPage.xaml 中定義，并指向 Blazor 應(yīng)用的根：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:MultiPlatform.Maui"
             x:Class="MultiPlatform.Maui.MainPage"
             BackgroundColor="{DynamicResource PageBackgroundColor}">

    <BlazorWebView x:Name="blazorWebView" HostPage="wwwroot/index.html">
        <BlazorWebView.RootComponents>
            <RootComponent Selector="#app" ComponentType="{x:Type local:Main}" />
        </BlazorWebView.RootComponents>
    </BlazorWebView>

</ContentPage>

應(yīng)用的根 Razor 組件 位于 Main.razor 中，Razor 將其編譯為應(yīng)用程序根命名空間中名為 Main 的類型。 其余 Razor 組件位于頁面和共享項目文件夾中，與默認 Blazor Web 模板中使用的組件相同。 應(yīng)用的靜態(tài) Web 資產(chǎn)位于 wwwroot 文件夾中。

MainPage.xaml：

2.調(diào)整 MultiPlatform.Server項目

1.移除 MultiPlatform.Server的 MainLayout 文件
2.更改App.razor 文件，使用 AdditionalAssemblies 加載 MultiPlatform.Blazor 程序集
3.添加 MultiPlatform.Blazor 項目引用

最后項目結(jié)構(gòu)調(diào)整如下：

到此，比較基礎(chǔ)的多端應(yīng)用就搭建完成了。
下面我們再試試應(yīng)用一個Blazor框架到我們的項目中。

MASA Blazor MAUI

了解MASA Blazor

1.MultiPlatform.Blazor 項目安裝 MASA Blazor Nuget包

Server 項目Program.cs文件與Maui項目的MauiProgram.cs文件中注冊相關(guān)服務(wù)

builder.Services.AddMasaBlazor();

2.MultiPlatform.Server 項目 _Host.cshtml 文件與MultiPlatform.Maui 項目的wwwroot/index.html引入樣式、字體、腳本

<link href="_content/Masa.Blazor/css/masa-blazor.css" rel="stylesheet">
<link href="_content/Masa.Blazor/css/masa-extend-blazor.css" rel="stylesheet">
<link href="https://cdn.masastack.com/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.masastack.com/npm/materialicons/materialicons.css" rel="stylesheet">
<link href="https://cdn.masastack.com/npm/fontawesome/v5.0.13/css/all.css" rel="stylesheet">

<script src="_content/BlazorComponent/js/blazor-component.js"></script>

示例：

注：如果這里嫌麻煩也可以選用模板安裝
模板使用示例，具體請移步 [開始使用MASA Blazor]
(
https://docs.masastack.com/blazor/getting-started/installation#section-81ea52a85b8988c5)

//安裝 Masa.Template 模板（目前1.0還沒發(fā)正式版，所以是Masa.Template::1.0.0-rc.1，但不影響使用）
dotnet new install Masa.Template::1.0.0-rc.1

//創(chuàng)建masablazor-maui 模板
dotnet new masablazor-maui -o MauiApp

3.替換 MultiPlatform.Blazor 項目的Shared/MainLayout文件代碼

這里使用MASA Blazor框架中的 App bars（應(yīng)用欄）組件與 Navigation drawers（導(dǎo)航抽屜）組件替換了原來的bootstrap樣式

@inherits LayoutComponentBase
<MApp>
    <MAppBar App Elevation="2">
        <MAppBarNavIcon @onclick="() => _drawer = !_drawer"></MAppBarNavIcon>
        <MToolbarTitle>CrossPlatformApp</MToolbarTitle>
        <MSpacer></MSpacer>
        <MButton Text Color="primary" Target="_blank" Href="https://docs.masastack.com/blazor/introduction/why-masa-blazor">About</MButton>
    </MAppBar>

    <MNavigationDrawer App @bind-Value="_drawer">
        <MList Nav Routable>
            <MListItem Href="/" ActiveClass="primary--text">
                <MListItemIcon>
                    <MIcon>mdi-home</MIcon>
                </MListItemIcon>
                <MListItemContent>
                    <MListItemTitle>Home</MListItemTitle>
                </MListItemContent>
            </MListItem>
            <MListItem Href="/counter" ActiveClass="primary--text">
                <MListItemIcon>
                    <MIcon>mdi-plus</MIcon>
                </MListItemIcon>
                <MListItemContent>
                    <MListItemTitle>Counter</MListItemTitle>
                </MListItemContent>
            </MListItem>
            <MListItem Href="/fetchdata" ActiveClass="primary--text">
                <MListItemIcon>
                    <MIcon>mdi-list-box</MIcon>
                </MListItemIcon>
                <MListItemContent>
                    <MListItemTitle>Fetch data</MListItemTitle>
                </MListItemContent>
            </MListItem>
        </MList>
    </MNavigationDrawer>
    <MMain>
        <MContainer Fluid>
            <MErrorHandler>
                @Body
            </MErrorHandler>
        </MContainer>
    </MMain>
</MApp>

@code {
    private bool _drawer;
}

4.更改 MultiPlatform.Blazor 服務(wù)的 Pages/Index.razor 文件代碼

增加 Bottom navigation (底部導(dǎo)航欄) 組件

@page "/"

<Container>
    <MRow>
        <h1>Hello, world!</h1>

        Welcome to your new app.

        <SurveyPrompt Title="How is Blazor working for you?" />

        <MBottomNavigation @bind-Value="value"
                           Color="teal"
                                  Fixed
                           Style="display:flex"
                                  Grow>
            <MButton>
                <span>Recents</span>
                <MIcon>mdi-history</MIcon>
            </MButton>

            <MButton>
                <span>Favorites</span>
                <MIcon>mdi-heart</MIcon>
            </MButton>

            <MButton>
                <span>Nearby</span>
                <MIcon>mdi-map-marker</MIcon>
            </MButton>
        </MBottomNavigation>
    </MRow>

</Container>

@code {
    StringNumber value = 1;
}

看看效果：

到此，基本上大功告成了。

結(jié)尾

文章中的示例比較基礎(chǔ)，基本上直接cv過去就可以用，還是比較適合新手朋友上手的。
最后由于文章篇幅有限，對MAUI與Blazor感興趣的朋友可自行深入研究。
后續(xù)系列文章都會基于這個Demo項目進行分享，歡迎關(guān)注。

源碼地址

https://github.com/fengzhonghao8-24/MultiPlatformApp