在MAUI中使用Masa Blazor

本文介绍了如何在.NET MAUI中使用Masa Blazor,详细讲述了MAUI的特性、环境准备、创建MAUI应用并引入Masa Blazor的步骤,以及实现了时间轴功能和主题色切换。示例代码和开源地址也已提供。
摘要由CSDN通过智能技术生成

Masa Blazor是什么

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

MAUI是什么

.NET MAUI全称为 .NET Multi-platform App UI ,顾名思义就是.NET多平台应用 UI,是一个跨平台的框架,是 Xamarin.Forms 的演变,其使用C#和XAML创建本机移动和桌面应用,这里的XAML可以替换成RazorView。 使用 .NET MAUI,可以开发可在 Android、iOS、macOS 和 Windows从单个共享代码库运行的应用,一套代码多端运行。

maui.png

MAUI优点:

  • 从 XAML 和 C# 中的单个共享代码库编写跨平台Visual Studio。
  • 跨平台共享 UI 布局和设计。
  • 跨平台共享代码、测试和业务逻辑。
  • 另一个优点是跨框架重用 Razor 组件,它可以实现为 Razor 类库 (RCL) 并与 Blazor Server 和 WebAssembly 共享。这允许最大限度地重用代码并从单个代码库生成移动、桌面和 Web 解决方案。

今天我们重点在实操,就不介绍那么多概念性的东西了。想了解更多关于MAUI的同学可以移步官方文档介绍 什么是 .NET MAUI?,本篇文章会带大家使用MAUI+Masa Blazor做一个移动端常见的时间轴页面,并加一点切换主题色的小功能,效果图如下:

_16505270394387.png

接下来让我们一步步去实现它。首先我们先准备好必备的环境。

注:文章示例演示环境为(Maui 6.0.200-preview.14.5 + Masa.Blazor 0.3.0)

MAUI环境准备

  1. 首先要确保安装了最新版的 Visual Studio,并且安装了Mobile development with .NET工作负载。 vs-workloads.png

  2. 启用硬件加速才能最大化 Android 模拟器性能,我们可以启用Hyper-V或HAXM加速,这里只介绍第一种

    • 在 Windows 搜索框中输入“Windows 功能”,然后在搜索结果中选择“打开或关闭 Windows 功能” 。 在“Windows 功能”对话框中,启用“Hyper-V”和“Windows 虚拟机监控程序平台” :

    windows-features.png

    进行这些更改后,重新启动计算机。

    请确保 在 Android Device Manager 中创建 的虚拟设备是 x86 64 或基于 x86的系统映像。 如果使用基于 Arm 的系统映像,则不会加速虚拟设备,并且运行速度会缓慢。启用 Hyper-v 后,可以运行加速 Android 仿真器。HAXM加速和详细设置可参考:如何使用 Android 仿真程序 & 启用硬件加速

创建MAUI应用并引入Masa Blazor

  1. 创建项目选择.NET MAUI Blazor App。这样的话我们就能使用Blazor View来写UI界面了

  2. 在nuget中安装Masa.Blazor,并在MauiProgram.cs文件中注册相关服务image-20220328145955206.png

    image-20220328152448798
    builder.Services.AddMasaBlazor();
    

    CreateMauiApp()方法简单理解:在启动方法中,调用了RegisterBlazorMauiWebView()构建器对象的扩展方法,然后将 BlazorWebView 本身添加到具有该builder.Services属性的 DI 容器的 Services 集合中。这将执行依赖注入加载特定于平台的视图以呈现输出 HTML,因为每个平台都有自己的 Web 引擎,BlazorWebView(从View继承)控件,它能够在运行时处理 Razor 组件并生成其等效的 HTML。该 HTML 将使用平台的本机 Web 引擎呈现,而无需任何 Web 服务器的参与。

  3. wwwroot/index.html 中引入样式、字体、脚本

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值