MAUI+Blazor混合应用开发示例

MAUI+Blazor混合应用开发示例已关闭评论
184 次浏览

A+

所属分类：.NET技术

摘要

笔者之前在公司搭建过一套生产管理系统，该系统要求能和硬件进行串口通信，同时又要提供后台信息查询。笔者给出的解决方案就是：MAUI + Blazor，这样只需要提供一套UI，就能满足桌面端、移动端和Web端三种不同应用场景。今天要介绍的就是桌面端的开发实现。

便宜好用的国外VPS推荐

前言

笔者之前在公司搭建过一套生产管理系统，该系统要求能和硬件进行串口通信，同时又要提供后台信息查询。笔者给出的解决方案就是：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).

MAUI+Blazor混合应用开发示例

开发详细

一、创建项目

首先，通过VS创建一个 .NET MAUI Blazor 应用，取名 “MauiBlazorDemo”。如果未找到此模板，则需要先安装工作负载 “ .NET Multi-platform App UI 开发 ”。

MAUI+Blazor混合应用开发示例

在Windows机器上启动调试，界面运行如下：

MAUI+Blazor混合应用开发示例

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

MAUI+Blazor混合应用开发示例

接着，我们再创建一个 Ant Design Pro Blazor 模板应用，叫 “MyAntDesignApp” (名字任意) ，所有选项默认即可。如果你未找到此模板，可通过命令 dotnet new install AntDesign.Templates 来安装。

MAUI+Blazor混合应用开发示例

创建之后，将 MyAntDesignApp 项目的以下文件拷贝到 MauiBlazorDemo 项目中。

MAUI+Blazor混合应用开发示例

为了能够读取 appsetings.json 的配置信息，我们将它从 wwwroot 目录移至根目录，并将文件属性的 “生成操作” 改为 MauiAsset。最终 MauiBlazorDemo 项目的文件结构如下：

MAUI+Blazor混合应用开发示例

程序启动执行顺序：

MAUI+Blazor混合应用开发示例

接下来，我们需要对 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+Blazor混合应用开发示例