MAUI+Blazor混合应用开发示例

这篇具有很好参考价值的文章主要介绍了MAUI+Blazor混合应用开发示例。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

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

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混合应用开发示例

三、运行项目

至此,Maui通过 WebView 嵌入AntBlazor的功能已基本告成 。文字稍作修改后,界面运行效果如下:

MAUI+Blazor混合应用开发示例

参考资料

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.toymoban.com/news/detail-667700.html

到了这里,关于MAUI+Blazor混合应用开发示例的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 应用实战|微信小程序开发示例--多人聊天互动空间

    “超能力”数据库 ~拿来即用,应用开发人员再也不用为撰写API而发愁。MemFire Cloud 为开发者提供了简单易用的云数据库(表编辑器、自动生成API、SQL编辑器、备份恢复、托管运维),很大地降低开发者的使用门槛。 本示例是一个可以实现多人互动的角色扮演聊天室的微信小

    2024年02月09日
    浏览(59)
  • 当前主流开发语言有哪些:了解其特性、应用与示例

    随着技术飞速发展,编程语言的丰富多样性为开发者提供了广泛的选择。每种语言都有其适用的场景和独特的特性。本文将综合探讨目前市场上最流行、最多人使用的几种主流开发语言,包括它们的特点、典型应用场景以及简单示例代码。 特点 Python 因其简洁明了的语法和强

    2024年02月22日
    浏览(37)
  • 【Android 应用开发】Android 无障碍开发简介 ( Android 无障碍开发辅助技术 | 启用 TalkBack 无障碍功能 | TalkBack 无障碍开发 示例 )

    官方文档 : Android 无障碍功能概览 Android 无障碍开发 的作用是 为 残障人士 提供 更好的移动设备使用体验 ; 借助 无障碍开发 可以 降低 访问设备应用程序 的难度 ; Android 为 无障碍开发 提供了 多种辅助技术 , 如 : TalkBack : 该技术 帮助 盲人 和 视力障碍者 更容易地使用 Andro

    2024年02月14日
    浏览(40)
  • 在MAUI中使用Masa Blazor

    在此之前我们已经介绍过什么是 Masa Blazor ,以及如何使用 Masa Blazor ,如果还有不了解 Masa Blazor 的同学可以看我上篇文章【初识Masa Blazor】。那么今天就带大家探索一下如何在 MAUI 中使用 Masa Blazor ,那么我们先来了解一下什么是MAUI? .NET MAUI全称为 .NET Multi-platform App UI ,顾名思

    2024年02月09日
    浏览(34)
  • MAUI+Blazor:windows 打包踩坑

    最近打算研究一下MAUI+Blazor,争取在今年年底之前彻底搞懂MAUI+Blazor的安装模式, Windows 4种安装程序格式MSI,EXE、AppX和MSIX优缺点对比以及后缀为 .msixbundle的文件怎么安装? 我们windows一般用exe文件进行安装,exe是最普遍的安装文件格式,原因是exe对于开发者具有最高的自定义

    2024年02月13日
    浏览(27)
  • 第十篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:涉及到的相关基础知识介绍和示例

    第一篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:从helloworld开始 第二篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:天气应用 第三篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:健身追踪 第四篇【传奇开心果系列】Ant Design Mobile of React 开发移

    2024年01月20日
    浏览(50)
  • bh002- Blazor hybrid / Maui 保存设置快速教程

    1. 建立工程 bh002_ORM 源码 2. 添加 nuget 包 3. 添加命名空间引用 _Imports.razor @using BootstrapBlazor.Components 4. 添加服务 MauiProgram.cs 在 return builder.Build(); 之前加入这句 5. 添加代码后置文件 Pages/Index.razor.cs Index.razor.cs 6. 添加 UI Index.razor 7. 执行效果 8. 添加清除按钮 Index.razor Index.razor.c

    2024年02月11日
    浏览(36)
  • bh003- Blazor hybrid / Maui 使用蓝牙BLE快速教程

    源码 https://github.com/densen2014/BlazorHybrid/tree/master/bh100days/bh003_ble?WT.mc_id=DT-MVP-5005078 BlazorHybrid.Maui.Permissions 因为源码比较长,主要是一些检查和申请权限,BLE权限相关代码,就不占用篇幅列出,感兴趣的同学直接打开源码参考 顺便打开可空 Nullableenable/Nullable 安卓 AndroidManifest.xml iOS I

    2024年02月11日
    浏览(44)
  • Maui Blazor windows程序无法通过双击 bin 文件夹中的 exe打开程序的解决办法

    ​ 使用Visual Studio创建了一个.NET Maui Blazor 应用,通过Visual Studio调试Windows应用时,需要打开开发者模式 打开开发者模式,调试一切正常,但如果直接运行bin文件夹下对应目录的exe时,没有任何反应,事件查看器中,会有这样的提示: Exception Info: System.DllNotFoundException: Unable

    2024年02月04日
    浏览(45)
  • CoreDX DDS应用开发指南(2)安装和应用开发

    2.1.1 支持的CPU架构和操作系统     2.1.2 支持的语言和编译器

    2024年02月07日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包