翼度科技»论坛 编程开发 .net 查看内容

MAUI+Blazor混合应用开发示例

7

主题

7

帖子

21

积分

新手上路

Rank: 1

积分
21
前言

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

.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包:
  1.   <ItemGroup>
  2.     <PackageReference Include="AntDesign.Charts" Version="0.3.1" />
  3.     <PackageReference Include="AntDesign.ProLayout" Version="0.14.4" />
  4.     <PackageReference Include="Microsoft.Extensions.Options.ConfigurationExtensions" Version="6.0.0" />
  5.   </ItemGroup>
复制代码
2. 修改 MauiProgram.cs 代码如下:
  1. public static class MauiProgram{    public static MauiApp CreateMauiApp()    {        var builder = MauiApp.CreateBuilder();        builder            .UseMauiApp()            .ConfigureFonts(fonts =>            {  <ItemGroup>
  2.     <PackageReference Include="AntDesign.Charts" Version="0.3.1" />
  3.     <PackageReference Include="AntDesign.ProLayout" Version="0.14.4" />
  4.     <PackageReference Include="Microsoft.Extensions.Options.ConfigurationExtensions" Version="6.0.0" />
  5.   </ItemGroup>fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");            });        var stream = FileSystem.OpenAppPackageFileAsync("appsettings.json").Result;        builder.Configuration.AddJsonStream(stream);        builder.Services.Configure(builder.Configuration.GetSection("ProSettings"));        builder.Services.AddMauiBlazorWebView();        builder.Services.AddAntDesign();#if DEBUG        builder.Services.AddBlazorWebViewDeveloperTools();#endif        return builder.Build();    }}
复制代码
 3. 修改 Main.razor 代码如下: 
  1. @using MainLayout = MauiBlazorDemo.Layouts.BasicLayout;
  2.   <ItemGroup>
  3.     <PackageReference Include="AntDesign.Charts" Version="0.3.1" />
  4.     <PackageReference Include="AntDesign.ProLayout" Version="0.14.4" />
  5.     <PackageReference Include="Microsoft.Extensions.Options.ConfigurationExtensions" Version="6.0.0" />
  6.   </ItemGroup>  <ItemGroup>
  7.     <PackageReference Include="AntDesign.Charts" Version="0.3.1" />
  8.     <PackageReference Include="AntDesign.ProLayout" Version="0.14.4" />
  9.     <PackageReference Include="Microsoft.Extensions.Options.ConfigurationExtensions" Version="6.0.0" />
  10.   </ItemGroup>  <ItemGroup>
  11.     <PackageReference Include="AntDesign.Charts" Version="0.3.1" />
  12.     <PackageReference Include="AntDesign.ProLayout" Version="0.14.4" />
  13.     <PackageReference Include="Microsoft.Extensions.Options.ConfigurationExtensions" Version="6.0.0" />
  14.   </ItemGroup>Sorry, there's nothing at this address.
  15.               @*添加AntContainer组件*@
复制代码
注:此文件等同 MyAntDesignApp 中的 App.razor 文件,名字不同而已。
4. 修改 _Imports.razor 代码如下:
  1. @using System.Net.Http
  2. @using Microsoft.AspNetCore.Components.Forms
  3. @using Microsoft.AspNetCore.Components.Routing
  4. @using Microsoft.AspNetCore.Components.Web
  5. @using Microsoft.AspNetCore.Components.Web.Virtualization
  6. @using Microsoft.JSInterop
  7. @using MauiBlazorDemo
  8. @using MauiBlazorDemo.Layouts
  9. @using AntDesign
  10. @using AntDesign.Charts
  11. @using AntDesign.ProLayout
复制代码
5. 最后对 Index.html 文件进行修改,将  和 <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
    出处:https://www.cnblogs.com/fengjq/p/17647612.html(转载请注明)    如果此文对你有帮助的话,请点一下右下角的【推荐】,欢迎评论区留言。本文已同步至作者微信公众号:玩转DotNet,感谢关注!
来源:https://www.cnblogs.com/fengjq/archive/2023/08/24/17647612.html
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x

举报 回复 使用道具