MAUI+Blazor混合應用開發示例

前言

筆者之前在公司搭建過一套生產管理系統，該系統要求能和硬體進行串口通信，同時又要提供後臺信息查詢。筆者給出的解決方案就是：MAUI + Blazor，這樣只需要提供一套UI，就能滿足桌面端、移動端和Web端三種不同應用場景。今天要介紹的就是桌面端的開發實現。

開發技術

.NET 6 + MAUI  + Blazor WebAssembly + Ant Desgin of Blazor(v3.4.0)

知識預覽

什麼是MAUI

MAUI 是.NET的一個多平臺應用UI框架，用於使用C#和XAML創建本機移動和桌面。使用MAUI，可從單個共用代碼庫開發在Android、iOS、macOS和Windows上運行的應用。.MAUI是開源的，是Xamarin.Forms的演變，從移動方案擴展到桌面方案，UI控制項從頭開始重新生成，以確保性能和擴展性。

什麼是WebAssembly

WebAssembly 是一種新的編碼方式，可以在現代的網路瀏覽器中運行。它是一種低級的類彙編語言，具有緊湊的二進位格式，可以接近原生的性能運行，併為諸如C/C++，C# 和Rust等語言提供一個編譯目標，以便它們可以在Web上運行。 它也被設計為可以與JavaScript一起工作。

什麼是Blazor

Blazor 是一個基於.NET和Razor構建的UI框架。Blazor應用程式可以作為ASP.NET應用程式的一部分在伺服器上運行，也可以部署在用戶電腦上的瀏覽器中運行，類似於單頁應用程式(SPA).

開發詳細

一、創建項目

首先，通過VS創建一個 .NET MAUI Blazor 應用，取名 “MauiBlazorDemo”。如果未找到此模板，則需要先安裝工作負載 “ .NET Multi-platform App UI 開發 ”。

在Windows機器上啟動調試，界面運行如下：

因為在項目中要使用 Ant Design of Blazor 框架，所以等把模板自帶的一些文件刪除。做法如下：

接著，我們再創建一個 Ant Design Pro Blazor 模板應用，叫 “MyAntDesignApp” (名字任意) ，所有選項預設即可。如果你未找到此模板，可通過命令 dotnet new install AntDesign.Templates 來安裝。

創建之後，將 MyAntDesignApp 項目的以下文件拷貝到 MauiBlazorDemo 項目中。

為了能夠讀取 appsetings.json 的配置信息，我們將它從 wwwroot 目錄移至根目錄，並將文件屬性的 “生成操作” 改為 MauiAsset。最終 MauiBlazorDemo 項目的文件結構如下：

程式啟動執行順序：

接下來，我們需要對 MauiBlazorDemo 項目的文件內容進行修改，確保功能可以正常運行。

二、修改項目

1. 為 MauiBlazorDemo 項目添加第三方Nuget包：

  <ItemGroup>
    <PackageReference Include="AntDesign.Charts" Version="0.3.1" />
    <PackageReference Include="AntDesign.ProLayout" Version="0.14.4" />
    <PackageReference Include="Microsoft.Extensions.Options.ConfigurationExtensions" Version="6.0.0" />
  </ItemGroup>

2. 修改 MauiProgram.cs 代碼如下：

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            });
        var stream = FileSystem.OpenAppPackageFileAsync("appsettings.json").Result;
        builder.Configuration.AddJsonStream(stream);
        builder.Services.Configure<ProSettings>(builder.Configuration.GetSection("ProSettings"));
        builder.Services.AddMauiBlazorWebView();
        builder.Services.AddAntDesign();
#if DEBUG
        builder.Services.AddBlazorWebViewDeveloperTools();
#endif
        return builder.Build();
    }
}

 3. 修改 Main.razor 代碼如下： 

@using MainLayout = MauiBlazorDemo.Layouts.BasicLayout;
<Router AppAssembly="@typeof(Main).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
    <NotFound>
        <LayoutView Layout="@typeof(MainLayout)">
            <p role="alert">Sorry, there's nothing at this address.</p>
        </LayoutView>
    </NotFound>
</Router>
<AntContainer />  @*添加AntContainer組件*@

註：此文件等同 MyAntDesignApp 中的 App.razor 文件，名字不同而已。

4. 修改 _Imports.razor 代碼如下：

@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 MauiBlazorDemo
@using MauiBlazorDemo.Layouts
@using AntDesign
@using AntDesign.Charts
@using AntDesign.ProLayout

5. 最後對 Index.html 文件進行修改，將 <link /> 和 <script /> 語句替換如下：

三、運行項目

至此，Maui通過 WebView 嵌入AntBlazor的功能已基本告成 。文字稍作修改後，界面運行效果如下：

參考資料

WebAssembly | MDN (mozilla.org)

什麼是 .NET MAUI？ - .NET MAUI | Microsoft Learn

快速上手 - Ant Design of Blazor (antblazor.com)

使用 BlazorWebView 在 .NET MAUI 應用中托管 Blazor Web 應用 - .NET MAUI | Microsoft Learn