MAUI Blazor 項目實戰 - 從0到1輕松建構多平台應用UI

前言

最近在項目中嘗鮮了MAUI，總體感受下來還是挺不錯的，優缺點并存，但是瑕不掩瑜，目前随着.Net版本的疊代更新對它的支援也越來越友好，相信未來可期！感興趣的朋友歡迎關注。文章中如有不妥的地方，也請多多指教。

項目效果圖

什麼是.NET MAUI？

網上關于MAUI介紹相關的内容也挺多的了，這裡隻做簡單介紹。了解更多

.NET 多平台應用 UI (.NET MAUI) 是一個跨平台架構，用于使用 C# 和 XAML 建立本機移動和桌面應用。

使用 .NET MAUI，可從單個共享代碼庫開發可在 Android、iOS、macOS 和 Windows 上運作的應用。

什麼是Blazor Hybrid？

Blazor Hybrid(混合)，可以通過它在 ASP.NET Core 應用中使用 .NET 生成互動式用戶端 Web UI。

使用 Blazor Hybrid 将桌面和移動本機用戶端架構與 .NET 和 Blazor 結合使用。

在 Blazor Hybrid 應用中，Razor 元件在裝置上本機運作。 元件通過本地互操作通道呈現到嵌入式 Web View 控件。 元件不在浏覽器中運作，并且不涉及 WebAssembly。 Razor 元件可快速加載和執行代碼，元件可通過 .NET 平台完全通路裝置的本機功能。

Blazor Hybrid 應用與MAUI

Blazor Hybrid 支援内置于 MAUI 架構 。.NET MAUI 包含 BlazorWebView 控件，該控件運作将 Razor 元件 呈現到嵌入式 Web View 中。 通過結合使用 .NET MAUI 和 Blazor，可以跨移動裝置、桌面裝置和 Web 重複使用一組 Web UI 元件。

項目準備

• .Net 7
• Visual Studio 2022

項目搭建

MultiPlatform.Blazor

MultiPlatform.Maui

MultiPlatform.Server

整個項目結構如下：

項目整體思路就是将Blazor UI樣式抽離至 MultiPlatform.Blazor（Razor類庫）項目中，MultiPlatform.Maui（安卓、IOS等）項目用來建構多端應用，MultiPlatform.Server 則用來跑Web，可以友善我們調整樣式。

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

1. 添加 MultiPlatform.Blazor 項目引用
2. 檔案抽離過去後注意調整命名空間，直接調整 MultiPlatform.Blazor 項目的 _Imports.razor即可。

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

1. 因為我們将Main.razor檔案抽離到了 MultiPlatform.Blazor，是以我們還需要調整 MultiPlatform.Maui項目中的 MainPage.xaml 檔案：（相關知識點參考）

BlazorWebView 項目模闆建立的 在 MainPage.xaml 中定義，并指向 Blazor 應用的根：

<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>
           

應用的根 Razor 元件 位于 Main.razor 中，Razor 将其編譯為應用程式根命名空間中名為 Main 的類型。 其餘 Razor 元件位于頁面和共享項目檔案夾中，與預設 Blazor Web 模闆中使用的元件相同。 應用的靜态 Web 資産位于 wwwroot 檔案夾中。

MainPage.xaml：

2.調整 MultiPlatform.Server項目

1.移除 MultiPlatform.Server的 MainLayout 檔案

2.更改App.razor 檔案，使用 AdditionalAssemblies 加載 MultiPlatform.Blazor 程式集

3.添加 MultiPlatform.Blazor 項目引用

最後項目結構調整如下：

到此，比較基礎的多端應用就搭建完成了。

下面我們再試試應用一個Blazor架構到我們的項目中。

MASA Blazor MAUI

了解MASA Blazor

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

Server 項目Program.cs檔案與Maui項目的MauiProgram.cs檔案中注冊相關服務

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/[email protected]/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還沒發正式版，是以是Masa.Template::1.0.0-rc.1，但不影響使用）
dotnet new install Masa.Template::1.0.0-rc.1

//建立masablazor-maui 模闆
dotnet new masablazor-maui -o MauiApp
           

3.替換 MultiPlatform.Blazor 項目的Shared/MainLayout檔案代碼

這裡使用MASA Blazor架構中的 App bars（應用欄）元件與 Navigation drawers（導航抽屜）元件替換了原來的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 服務的 Pages/Index.razor 檔案代碼

增加 Bottom navigation (底部導航欄) 元件

@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;
}
           

看看效果：

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

結尾

文章中的示例比較基礎，基本上直接cv過去就可以用，還是比較适合新手朋友上手的。

最後由于文章篇幅有限，對MAUI與Blazor感興趣的朋友可自行深入研究。

後續系列文章都會基于這個Demo項目進行分享，歡迎關注。

源碼位址

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