MAUI Blazor 项目实战 - 从0到1轻松构建多平台应用UI

前言

最近在项目中尝鲜了MAUI，总体感受下来还是挺不错的，优缺点并存，但是瑕不掩瑜，目前随着.Net版本的迭代升级对它的支持也越来越友好，相信未来可期！感兴趣的朋友欢迎关注。文章中如有不妥的地方，也请多多指教。

项目效果图

什么是.NET MAUI？

网上关于MAUI介绍相关的内容也挺多的了，这里只做简单介绍。了解更多

什么是Blazor Hybrid？

Blazor Hybrid 应用与MAUI

项目准备

• .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 文件：（相关知识点参考）

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

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