MAUI+Blazor混合应用开发示例-6ren

MAUI+Blazor混合应用开发示例

转载作者：我是一只小鸟更新时间：2023-08-24 14:31:59

前言

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

开发详细

1、创建项目

首先，通过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 项目的文件内容进行修改，确保功能可以正常运行.

2、修改项目

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 /> 语句替换如下:

3、运行项目

至此，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 。

最后此篇关于MAUI+Blazor混合应用开发示例的文章就讲到这里了,如果你想了解更多关于MAUI+Blazor混合应用开发示例的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！。

文章推荐：《深入理解Java虚拟机》读书笔记：方法调用

文章推荐： java与es8实战之二：实战前的准备工作

文章推荐： WPF入门笔记-08-动画

文章推荐： ReactRouter6快速上手

blazor - Blazor 中的缓存破坏
Blazor 中的缓存破坏有什么解决方案吗？我在 Blazor WebAssembly 中转换了我的 asp.net 核心应用程序，我在 razor 页面中使用 asp-append-version=
blazor - Blazor 中是否有导航堆栈？
使用 NavigationManager.NavigateTo() 在页面之间移动非常简单，但我想知道是否有一种导航到页面的方法，这样我就可以在不丢失状态的情况下导航回去第一页。我正在寻找类似 Na
blazor - 基本组件布局继承 blazor
假设我的大部分组件都有一个标题。我想创建一个具有 header 变量的基本组件，并使所有其他组件从该组件继承并设置 header 。所以我有基础组件 @inherits LayoutComponen
blazor - Blazor 中的片段是什么？
引用https://learn.microsoft.com/en-us/aspnet/core/blazor/components?view=aspnetcore-3.0#razor-template
blazor - Blazor 中的片段是什么？
引用https://learn.microsoft.com/en-us/aspnet/core/blazor/components?view=aspnetcore-3.0#razor-template
blazor - Blazor 中的不同方法调用
我现在正在试验 Blazor 一段时间，我正试图找到关于两者之间差异的解释 Something 和 methodCall()">Something 为什么 @ expected before onc
blazor - 仅允许特定文件类型在 blazor 中上传
我正在使用 BlazorInputFile 包在 Blazor 中上传文件。问题此代码无效。如何限制用户只能在 Blazor 中上传 jpeg 或 png？如果需要更多的东西来支持这个问题，请
blazor - 是否有一些方法可以在不使用 Blazor 中的地址栏的情况下导航到页面并传递参数？
这存在于许多现代 SPA 库/框架中...... 我将提供一个使用 React 的示例(但它可以是 Angular 或 Vue)，您可以执行类似... this.props.router.push({
blazor - 如何在 Blazor 服务器端模拟延迟？
我有一个 Blazor 服务器端应用程序，我将托管在离我的主要用户将使用的地方不远的服务器上，我想模拟某些功能是否可用但有一些延迟，或者延迟是否会真正影响它。但我无法在开发时测试延迟，而且我不想每次
blazor - 如何将 Blazor 组件移动到不同的程序集
我有一个 Blazor 服务器项目，我想将一些共享组件移动到不同的程序集中，看看它是否会在编译时间上产生差异(让我知道这是否可行的奖励......) ，但这并不是那么顺利。在 VS2019 中，组件
blazor - 具有自定义子组件的自定义 Blazor 组件
我最近开始使用 Blazor，发现它是一项非常有前途的技术。我正准备制作自定义嵌套 Blazor 组件，但我似乎没有让它按我想要的方式工作。目标是拥有一个具有“ContentHeader”和“Co
blazor - Mapster 和 Blazor
我想在我的 Blazor 项目中插入和使用 Mapster。我找不到关于如何注册映射并将它们注入(inject)我的应用程序的不同层的好引用。有人知道我该如何实现吗？谢谢最佳答案原来很简单。
blazor - PostSharp 和 Blazor
我正在考虑在 Blazor 服务器项目上使用 PostSharp，想知道此 Postsharp 博客 (https://blog.postsharp.net/post/blazor-support-6
blazor - Blazor RenderTreeBuilder 中的事件
我在使用 RenderTreeBuilder 的 Blazor 组件上使用事件绑定(bind)时遇到问题。我了解如何使用编写 HTML 并将事件附加到组件的直接方法来触发事件。但是，我现在需要使用 R
blazor - 如何在 Blazor 中切换主布局？
当用户按下包含登录的左上链接的登录链接时，我试图将其存档: 但相反，我收到了这个: 换句话说:我想转到一个没有主布局导航栏的页面。如何存档？ MainLayout.razor inherits Lay
blazor - MAUI blazor 发生未处理的错误
如果程序中有错误，我会收到“发生未处理的错误”。使用 Blazor Web 程序集，我可以在浏览器中打开开发者工具以获取所发生事件的详细信息。这在 Blazor MAUI 中是不可能的。那么如何在
blazor - 属性如何导致 Blazor 中的页面更新？
我刚刚在 Blazor WebAssembly 中完成了我的第一个重要测试应用程序。 Blazor 是令人印象深刻的东西，但我发现很难推断属性更改如何导致 DOM 更新 - 例如，在 Razor 组件
blazor - 示例应用程序在代码更改和浏览器刷新后未更新？构建挂起 Blazor
很高兴了解 Blazor。这个框架有很多潜力! VS 2017 build 15.8.9 和 Blazor v 15.5.9 的 VS 扩展好的，所以在使用 asp.net 核心(托管)模板开始新项目
blazor - 如何在 Blazor 中的单击事件中获取目标元素
我想要在 ASP.NET Core blazor 中触发 click 事件的确切目标。这是可以实现的吗？最佳答案您可以使用@ref 获取对 DOM 对象的引用，然后将其作为参数传递给您的处理程序函
blazor - 如何使用 Blazor 服务器端判断用户何时离开站点
Blazor 服务器端基于 Signalr，因此我假设它知道用户何时离开网站(关闭连接)。是否有任何事件可用于记录此事件？或者其他任何方式! 最佳答案我认为这项服务可以帮助您... public c

我是一只小鸟

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城