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快速上手

linux -/开发/端口与/开发/内存
我需要一些说明。我可以直接写入 /dev/port 以直接访问并行端口并且它工作正常(我可以打开插入端口连接器的 LED)。但是，我想我可以用 /dev/mem 做同样的事情？ (http://tld
c# iPhone 开发 vs objective c iPhone 开发
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
c# - 用 C++ 开发 Win32 应用程序比用 C# 开发 .NET 应用程序有什么优势？
我使用 Visual C++ 和 Win32 API 学习了 Windows 编程。如今，似乎大多数应用程序都是使用 C# 在 .NET 中开发的。我知道大多数时候 native 代码和托管代码之间没
Java终端-开发
请耐心等待。我正在制作一个 java 控制台，类似于此处找到的 DragonConsole https://code.google.com/p/dragonconsole/ 。一切都按计划进行，但我想
Mac上的c++开发
关闭。这个问题需要更多 focused .它目前不接受答案。想要改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭5年前。 Improve this que
Django 开发。服务器拒绝退出
Django 的开发服务器表现得很奇怪。访问它的浏览器在加载时卡住，任何退出它的尝试都不起作用。当我点击 control c看似相当，但实际上仍在运行。让它退出的唯一方法是重新启动我的电脑，这很令人沮
Flash 开发 - 发布
我正在使用 Flash Develop，并且创建了一个 ActionScript 3.0 项目。它启动并读取一个 xml 文件，其中包含图像的 url。我已将 url 保留在与 swf 相同的文件夹中
embedded - AUTOSAR 开发
是否可以根据其 website 上提供的规范开发 AUTOSAR BSW 堆栈(例如用于 CAN 通信)？不购买任何昂贵的供应商工具？可以遵循哪些步骤？我被要求探索这种可能性。最佳答案是和否。工具
iPhone 开发 - 如何用音频文件的内容覆盖麦克风
有人知道如何用音频文件的内容覆盖 iPhone 麦克风吗？想象一个场景，您正在通话，并且想要播放一些简短的音频让其他人听到。因此，有必要将麦克风(硬件)置于保持状态，并使用委托(delegate)
iPhone 开发 - 当我更改方向时我的应用程序崩溃
我遇到了这个问题，我的应用程序出现 EXC_BAD_ACCESS 错误并卡住/停止。我使用模拟器的“向左旋转”和“向右旋转”选项来模拟方向变化行为。导致此错误的可能原因有哪些？由于我没有获得有关错误的
在许多机器上进行 iPhone 开发
我有超过 1 台 Mac，我想在所有这些 Mac 上进行开发。我知道我需要在每台机器上同步我的手机，但这是我遇到的最小的问题。看起来我无法在手机上运行应用程序，除了在其中之一上开发的应用程序。是否有
iPhone 开发 - 在哪里可以获得应用程序接收到的所有信号及其含义的列表
在手机上测试时，我的应用程序在特定点崩溃。控制台显示此消息 Tue Jan 27 15:47:14 unknown SpringBoard[22] : Application com.myprof.
iPhone 开发 - 限制用户与应用程序的交互并显示进度指示器
我有一个案例，我从服务器获取信息。我的应用程序有一个选项卡栏和导航按钮。我希望应用程序显示进度指示器并禁用所有其他控件，以便用户在从服务器提取数据时无法跳转。我怎样才能实现这个目标？我想到的一种方法
iPhone 开发 - 编译器警告!
有时，当我尝试“构建”/编译下载的源代码时，我会收到以下警告: ld: warning: directory '/Volumes/Skiiing2/CD/ViewBased/Unknown Path/
iPhone 开发 - 开发和分发配置之间有什么区别？
我无法在 Apple 文档中找到关于开发和分发配置之间差异的明确解释。我目前正在使用开发配置在我的 iPhone 上进行开发和测试。我打算将该应用程序分发到我的 Beta 测试中，我想知道: 我需要使
SharePoint 开发/生产环境
我在使用 SharePoint 时遇到的最大挑战之一是它不能很好地适应典型的项目环境，其中至少包含开发和生产环境。我遇到的最多的问题是内容和列表是如此紧密地耦合在一起，以至于如果不在生产环境中执行内容
Eclipse ARM 开发
我失败了fist step让 Eclipse(对我来说是全新的)为 ARM 开发做好准备。我在 Windows 10 中安装了 Eclipse。我想我应该安装 xpm，但我不知道在哪里输入此命令:
c++ - 如何在可视代码中生成调试器以进行c++开发？
首先，我告诉你-我是编码新手我正在使用vs代码来学习c++，它不会产生像dev c++或codeblocks这样的调试器。我看了一些视频，其中我们必须编辑json文件，这对于初学者来说非常复杂。有人
Eclipse ARM 开发
我失败了fist step让 Eclipse(对我来说是全新的)为 ARM 开发做好准备。我在 Windows 10 中安装了 Eclipse。我想我应该安装 xpm，但我不知道在哪里输入此命令:
iOS 开发 - 没有设备的配置文件
我开发了一个 Ionic 应用程序(iOS 和 Android 的混合)。我有 Xcode 8.3.3 并购买了一年的 Apple Developer Program 订阅。我不想测试我的应用并将其

我是一只小鸟

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城