您现在的位置是：网站首页> .NET Core
微软新技术Blazor框架
- .NET Core
- 2025-09-08
- 1399人已阅读
微软新技术Blazor框架
Blazor实现Windows、macOS、Android、iOS、Web共用一套UI
Blazor Server、Blazor WebAssembly、Blazor Hybrid区别及代码的运行端
Maui Blazor windows程序无法通过双击 bin 文件夹中的 exe打开程序的解决办法
Blazor介绍
Blazor是一个使用 .NET框架和C#编程语言Razor语法构建Web应用程序的UI框架，它可以用于构建单页应用（SPA）和 Web服务，它使用编译的C#来操纵HTML DOM来替代JavaScript。Blazor 的目标是让开发人员使用C#编程语言来编写 Web 应用程序，使得C#程序员可以在一个熟悉的编程语言中完成整个应用程序的开发。这样既可以提高开发效率，也可以减少学习成本。
Blazor的核心技术基于WebAssembly，它允许在浏览器中运行编译后的本地代码，从而使得.NET运行时可以在浏览器中运行。在Blazor 中，开发人员可以使用Razor模板语法或者C#语言来编写Web应用程序的逻辑和界面代码。Blazor 应用程序可以直接在浏览器中运行，也可以作为服务端应用程序在服务器端运行，并通过 SignalR 实时通信。
Blazor提供了一些常见的UI组件和布局控件，使得开发人员可以快速搭建 Web 应用程序的前端界面。此外，Blazor 还支持依赖注入、路由和可重用组件等功能，增强了应用程序的灵活性和可重用性。
Blazor的优势和特点
Blazor是一个基于.NET框架和 C#编程语言构建 Web 应用程序的 UI 框架，它具有以下几个优势和特点：
简化开发流程：在Blazor中，前端和后端都可以使用C#进行编程，使得C#程序员可以在一个熟悉的编程语言中完成整个应用程序的开发，避免了学习多种语言和框架的麻烦。
高效的性能：Blazor应用程序可以直接在浏览器中运行，也可以在服务端运行，并通过SignalR实时通信，从而可以减少网络延迟和带宽消耗，提高应用程序的性能。
安全性强：Blazor 应用程序不需要在客户端上运行任何JavaScript代码，相对于传统的Web应用程序，可以大幅度降低应用程序受到跨站点脚本攻击（XSS）的风险。
易于测试和调试：由于Blazor应用程序的代码都是使用C#编写的，因此可以使用Visual Studio和其他C#开发工具对其进行测试和调试，简化了开发人员的工作和提高Bug查找效率。
可以重用现有代码：由于Blazor使用.NET框架和C#编程语言，因此可以重用现有的.NET库和组件，简化了开发过程并提高了代码的复用性。
单语言全栈开发：在 Blazor 中，开发人员可以使用同一种编程语言（C#）来构建 Web 应用程序的服务器端和客户端代码，从而实现一种全栈开发的方式（如果是一个小项目并且需要一个人同时撸前后端代码，用Blazor效率会更高）。
Blazor的劣势
框架生态相对较弱：相比于Vue、React、Angular等前端框架，Blazor的生态尚不完全，社区资源和开源项目相对较少，这可能会增加开发人员的学习和解决问题的难度。
目前仅支持最新版本的浏览器：虽然 Blazor 支持各种主流浏览器，但由于涉及到 WebAssembly 和其他新技术，一些旧版浏览器可能无法完全支持 Blazor 应用程序。
学习曲线较陡峭：Blazor是一种全新的Web开发技术，可能对一些非.NET后端开发人员来说存在较大的学习曲线，需要付出更多的时间和精力来学习和掌握。
Blazor三种托管模型
1、Blazor Server
简介：
Blazor Server 应用程序在服务器上运行，可享受完整的 .NET Core 运行时支持。所有处理都在服务器上完成，UI/DOM 更改通过 SignalR 连接回传给客户端。这种双向 SignalR 连接是在用户第一次从浏览器中加载应用程序时建立的。 由于 .NET 代码已经在服务器上运行，因此您无需为前端创建 API。您可以直接访问服务、数据库等，并在传统的服务端技术上做任何您想做的事情。在客户端上，Blazor 脚本 (blazor.server.js) 与服务器建立 SignalR 连接。 脚本由 ASP.NET Core 共享框架中的嵌入资源提供给客户端应用。 客户端应用负责根据需要保持和还原应用状态。
Blazor Server 托管模型具有以下优点：
下载项大小明显小于 Blazor WebAssembly 应用，且应用加载速度快得多。
应用可以充分利用服务器功能，包括对 .NET Core API 的使用。
服务器上的 .NET Core 用于运行应用，因此调试等现有 .NET 工具可按预期正常工作。
支持瘦客户端。 例如，Blazor Server 应用适用于不支持 WebAssembly 的浏览器以及资源受限的设备。
应用的 .NET/C# 代码库（其中包括应用的组件代码）不适用于客户端。
Blazor Server 托管模型具有以下局限性：
通常延迟较高。 每次用户交互都涉及到网络跃点。
不支持脱机工作。 如果客户端连接失败，应用会停止工作。
若要缩放具有许多用户的应用，需要使用服务器资源处理多个客户端连接和客户端状态。
需要 http://ASP.NET Core 服务器为应用提供服务。 无服务器部署方案不可行，例如通过内容分发网络 (CDN) 为应用提供服务的方案。
2、Blazor WebAssembly
简介：
Blazor WebAssembly（WASM）应用程序在浏览器中基于WebAssembly的.NET运行时运行客户端。Blazor应用程序及其依赖项和.NET运行时被下载到浏览器中。该应用程序直接在浏览器的UI线程上执行。UI更新和事件处理在同一进程中进行。应用程序的资产被作为静态文件部署到能够为客户提供静态内容的网络服务器或服务上。当Blazor WebAssembly应用被创建用于部署，而没有后端http://ASP.NET Core应用为其提供文件时，该应用被称为独立的Blazor WebAssembly应用。当应用程序被创建用于部署，并有一个后端应用程序为其提供文件时，该应用程序被称为托管的Blazor WebAssembly应用程序。
Blazor WebAssembly 托管模型具有以下优点：
从服务器下载应用后，没有 .NET 服务器端依赖项，因此，如果服务器脱机，应用将保持正常运行。
可充分利用客户端资源和功能。
工作可从服务器转移到客户端。
无需 http://ASP.NET Core Web 服务器即可托管应用。 无服务器部署方案可行，例如通过内容分发网络 (CDN) 为应用提供服务的方案。
Blazor WebAssembly 托管模型具有以下局限性：
应用仅可使用浏览器功能。
需要可用的客户端硬件和软件（例如 WebAssembly 支持）。
下载项大小较大，应用加载耗时较长。
Blazor WebAssembly 支持预先 (AOT) 编译，你可以直接将 .NET 代码编译到 WebAssembly 中。 AOT 编译会提高运行时性能，代价是应用大小增加。
3、Blazor Hybrid
简介：
Blazor 还可用于使用混合方法生成本机客户端应用。 混合应用是利用 Web 技术实现其功能的本机应用。 在 Blazor Hybrid 应用中，Razor 组件与任何其他 .NET 代码一起直接在本机应用中（而不在 WebAssembly 上）运行，并通过本地互操作通道基于 HTML 和 CSS 将 Web UI 呈现到嵌入式 Web View 控件。
可以使用不同的 .NET 本机应用框架（包括 .NET MAUI、WPF 和 Windows 窗体）生成 Blazor Hybrid 应用。 Blazor 提供 BlazorWebView 控件，将 Razor 组件添加到使用这些框架生成的应用。 通过结合使用 Blazor 和 .NET MAUI，可以便捷地生成适用于移动和桌面的跨平台 Blazor Hybrid 应用，而将 Blazor 与 WPF 和 Windows 窗体集成可以更好地实现现有应用的现代化。
由于 Blazor Hybrid 应用是本机应用，它们可以支持只有 Web 平台所没有的功能。 通过正常的 .NET API，Blazor Hybrid 应用对本机平台功能具有完全访问权限。 Blazor Hybrid 应用还可以与现有 Blazor Server 或 Blazor WebAssembly 应用共享和重复使用组件。 Blazor Hybrid 应用结合了 Web、本机应用和 .NET 平台的优点。
Blazor Hybrid 托管模型具有以下优点：
重复使用可在移动、桌面和 Web 之间共享的现有组件。
利用 Web 开发技能、体验和资源。
应用对设备的本机功能具有完全访问权限。
Blazor Hybrid 托管模型具有以下局限性：
必须为每个目标平台生成、部署和维护单独的本机客户端应用。
与在浏览器中访问 Web 应用相比，查找、下载和安装本机客户端应用通常需要更长的时间。
如何选择要使用的托管模型？
根据应用的功能要求选择 Blazor 托管模型。 下表显示了选择托管模型的主要注意事项。
Blazor Hybrid 应用包括 .NET MAUI、WPF 和 Windows 窗体框架应用。
Razor语法简述
Blazor 是一种基于 .NET 平台的 Web 开发框架，它使用 C# 语言和 Razor 语法来编写前端代码。
什么是Razor？
Razor 是一种标记语法，用于将基于 .NET 的代码嵌入网页中。 Razor 语法由 Razor 标记、C# 和 HTML 组成。 包含 Razor 的文件通常具有 .cshtml 文件扩展名。 Razor 也可在 Razor 组件 文件 (.razor) 中找到。 Razor 语法类似于各种 JavaScript 单页应用程序 (SPA) 框架（如 Angular、React、VueJs 和 Svelte）的模板化引擎。更多请查看ASP.NET Core 的 Razor 语法 。
Razor 操作符
Razor 操作符是用于将 Razor 代码与 HTML 元素相互关联的语法。例如：
@ 符号：用于将 C# 代码嵌入到 HTML 中。
@: 符号：用于输出 HTML 编码的文本。
@@ 符号：用于在 Razor 模板中编写 @ 符号。
@() 符号：用于在 Razor 表达式中调用 C# 方法。
Razor代码块
<p>@UserName</p> @code { private string UserName = "追逐时光者"; }
隐式 Razor 表达式
隐式 Razor 表达式以 @ 开头，后跟 C# 代码：
<p>@DateTime.Now</p> <p>@DateTime.IsLeapYear(2023)</p>
显式 Razor 表达式
显式 Razor 表达式由 @ 符号和平衡圆括号组成。 若要呈现上一周的时间，可使用以下 Razor 标记：
<p>Last week this time: @(DateTime.Now - TimeSpan.FromDays(7))</p>
表达式编码
计算结果为字符串的 C# 表达式采用 HTML 编码。 计算结果为 IHtmlContent 的 C# 表达式直接通过 IHtmlContent.WriteTo 呈现。 计算结果不为 IHtmlContent 的 C# 表达式通过 ToString 转换为字符串，并在呈现前进行编码。
@("<span>Hello World</span>") 输出： HTML 在浏览器中显示为纯文本： <span>Hello World</span>
条件判断 @if, else if, else, and @switch
@if 控制何时运行代码：
@if (value % 2 == 0) { <p>The value was even.</p> }
else 和 else if 不需要 @ 符号：
@if (value % 2 == 0) { <p>The value was even.</p> } else if (value >= 1337) { <p>The value is large.</p> } else { <p>The value is odd and small.</p> }
以下标记展示如何使用 switch 语句：
@switch (value) { case 1: <p>The value is 1!</p> break; case 1337: <p>Your number is 1337!</p> break; default: <p>Your number wasn't 1 or 1337.</p> break; }
语句循环 @for, @foreach, @while, and @do while
可以使用循环控制语句呈现模板化 HTML。 若要呈现一组人员：
@{ var people = new Person[] { new Person("Weston", 33), new Person("Johnathon", 41), ... }; }
支持以下循环语句：
@for
@for (var i = 0; i < people.Length; i++) { var person = people[i]; <p>Name: @person.Name</p> <p>Age: @person.Age</p> }
@foreach
@foreach (var person in people) { <p>Name: @person.Name</p> <p>Age: @person.Age</p> }
@while
@{ var i = 0; } @while (i < people.Length) { var person = people[i]; <p>Name: @person.Name</p> <p>Age: @person.Age</p> i++; }
@do while
@{ var i = 0; } @do { var person = people[i]; <p>Name: @person.Name</p> <p>Age: @person.Age</p> i++; } while (i < people.Length);
复合语句 @using
在 C# 中，using 语句用于确保释放对象。 在 Razor 中，可使用相同的机制来创建包含附加内容的 HTML 帮助程序。 在下面的代码中，HTML 帮助程序使用 @using 语句呈现 <form> 标记：
@using (Html.BeginForm()) { <div> Email: <input type="email" id="Email" value=""> <button>Register</button> </div> }
@try, catch, finally
异常处理与 C# 类似：
@try { throw new InvalidOperationException("You did something invalid."); } catch (Exception ex) { <p>The exception message: @ex.Message</p> } finally { <p>The finally statement.</p> }
新建ZeroBlazor空白解决方案
1、启动 Visual Studio 2022选择创建新项目
2、搜索“空白解决方案“并创建
使用VS 2022快速创建Blazor Server应用
1、在ZeroBlazor解决方案中添加新项目
2、添加新项目中搜索“Blazor Server 应用”进行创建
3、框架选择“.NET 7.0 (标准期限支持)”，然后单击“创建”按钮
4、应用程序文件夹和文件介绍
Program.cs 是启动服务器以及在其中配置应用服务和中间件的应用的入口点。
App.razor 为应用的根组件。
Pages 存放应用程序的 Razor 页面，每个 Razor 页面都对应着一个组件，用于呈现应用程序的 UI 元素。
Shared 存放多个 Razor 页面或组件之间共享的组件、布局和其他视图元素等。
wwwroot 该文件夹包含静态文件，例如图片、字体、图标、CSS 和 JavaScript 文件等。
BlazorAppSample.csproj 应用程序的项目文件，用于指定依赖项、编译选项和发布选项等。
Properties 目录中的 launchSettings.json 文件为本地开发环境定义不同的配置文件设置。创建项目时会自动分配端口号并将其保存在此文件上。
5、运行应用
单击 Visual Studio 调试工具栏中的“开始调试”按钮(绿色箭头)以运行应用，查看运行效果。
打开浏览器开发者工具（F12），您会注意到所有标准的 CSS 和 JavaScript 文件都下载到了客户端，并通过 Web Sockets 建立了一个 SignalR 连接。
使用VS 2022快速创建Blazor WebAssembly应用
1、在ZeroBlazor解决方案中添加新项目
2、添加新项目中搜索“Blazor WebAssembly 应用”进行创建
3、框架选择“.NET 7.0 (标准期限支持)”，然后单击“创建”按钮
4、应用程序文件夹和文件介绍
Program.cs 是启动服务器以及在其中配置应用服务和中间件的应用的入口点。它创建了WebAssemblyHostBuilder并启动它。
App.razor是应用程序的启动路由页面，里面规定了默认Layout。
Pages 存放应用程序的 Razor 页面，每个 Razor 页面都对应着一个组件，用于呈现应用程序的 UI 元素。
Shared 存放公共 Razor 页面或组件之间共享的组件、布局和其他视图元素等。
wwwroot 该文件夹包含静态文件，例如图片、字体、图标、CSS 和 JavaScript 文件等。
BlazorWasmSample.csproj 应用程序的项目文件，用于指定依赖项、编译选项和发布选项等。
Properties 目录中的 launchSettings.json 文件为本地开发环境定义不同的配置文件设置。创建项目时会自动分配端口号并将其保存在此文件上。
5、运行应用
单击 Visual Studio 调试工具栏中的“开始调试”按钮(绿色箭头)以运行应用，查看运行效果。
正如我们看到的一样Blazor WebAssembly应用程序首次启动会比较慢，因为它会在客户端下载应用程序及其所有依赖项，你可以F12打开浏览器开发者工具，会看到客户端下载了大量dll文件（只会在第一次浏览时下载）。
以上所有dll文件只会在第一次请求时下载，然后它们会被缓存在浏览器中。如果你再次刷新页面，将会看到这此加载下载的文件很少，而且运行时不再需要网络，这样在断网环境或没有网络的离线下，仍然可以运行，再次运行时的情况：
课外知识拓展
WebAssembly是什么？
WebAssembly（缩写为“Wasm”）是一种开放标准，旨在提供一种高效且可移植的二进制格式，以运行跨平台的应用程序。与 JavaScript 不同，WebAssembly 不是一种高级脚本语言，而是一种可移植的二进制格式（低级指令集），它的主要目的是提供一种更高效和可移植的编程语言，以便于在 Web 平台上进行运行。可以将其他编程语言（如C++、C#、Golang、Rust等）的代码编译成 WebAssembly格式，可以实现比 JavaScript 更高效的运行速度，并且减少了代码大小和网络带宽的消耗。与传统的浏览器插件相比，WebAssembly 还具有更好的性能和更高的安全性。
目前，WebAssembly 可以在主流的 Web 浏览器（如 Chrome、Firefox、Safari 和 Edge）上运行，并且被越来越多的 Web 应用程序所采用。WebAssembly 还提供了与 JavaScript 相互操作的功能，使得开发人员可以轻松地在现有的 Web 应用程序中使用 WebAssembly。
SPA 单页面应用程序是什么？
SPA（single-page application），翻译过来就是单页应用SPA是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，这种方法避免了页面之间切换打断用户体验在单页应用中，所有必要的代码（HTML、JavaScript和CSS）都通过单个页面的加载而检索，或者根据需要（通常是为响应用户操作）动态装载适当的资源并添加到页面页面在任何时间点都不会重新加载，也不会将控制转移到其他页面举个例子来讲就是一个杯子，早上装的牛奶，中午装的是开水，晚上装的是茶，我们发现，变的始终是杯子里的内容，而杯子始终是那个杯子结构如下图（我们熟知的JS框架如react,vue,angular,ember都属于SPA）。
Blazor UI组件库推荐
Blazor相关学习教程
Blazor Server和WebAssembly应用程序入门指南
Blazor Server、Blazor WebAssembly、Blazor Hybrid区别及代码的运行端
Blazor是微软开发的一个用于构建交互式Web UI的框架。它有三种主要的托管模型：Blazor Server、Blazor WebAssembly和Blazor Hybrid。让我们详细了解一下它们的区别和代码运行端：
1.Blazor Server
特点：
在服务器端运行
通过SignalR实时通信
快速加载，适合低性能设备
代码运行端：
.NET代码在服务器上运行
UI更新通过SignalR发送到浏览器
优点：
快速启动
可以访问服务器端资源
适用于低性能设备
缺点：
需要持续的网络连接
可能有较高的服务器负载
使用场景：
内部企业应用
需要快速加载的应用
2.Blazor WebAssembly
特点：
在浏览器中运行
完全客户端渲染
可离线运行
代码运行端：
.NET运行时和应用代码下载到浏览器
所有代码在浏览器中的WebAssembly环境中运行
优点：
可离线运行
减少服务器负载
响应速度快
缺点：
初始加载时间较长
不适合低性能设备
使用场景：
公共网站
离线应用
单页应用（SPA）
Blazor Hybrid
特点：
结合了原生应用和Web技术
可以访问设备原生功能
代码运行端：
.NET代码在原生应用中运行
UI可以使用Web技术或原生控件
优点：
可以访问设备原生功能
跨平台开发
复用Web开发技能
缺点：
可能需要平台特定的代码
性能可能不如完全原生应用
使用场景：
移动应用
桌面应用
需要访问设备功能的应用
代码示例比较：
Blazor Server:
@page "/"
<h1>Hello, Blazor Server!</h1>
@code {
protected override async Task OnInitializedAsync()
{
// 这里的代码在服务器上运行
await Task.Delay(1000);
}
}
Blazor WebAssembly:
@page "/"
<h1>Hello, Blazor WebAssembly!</h1>
@code {
protected override async Task OnInitializedAsync()
{
// 这里的代码在浏览器中运行
await Task.Delay(1000);
}
}
Blazor Hybrid (MAUI):
@page "/"
<h1>Hello, Blazor Hybrid!</h1>
@code {
protected override async Task OnInitializedAsync()
{
// 这里的代码在设备的.NET运行时中运行
await Task.Delay(1000);
}
private void AccessNativeFeature()
{
// 可以调用原生平台API
Battery.ChargeLevel;
}
}
总结：
Blazor Server适合需要快速加载和访问服务器资源的应用。
Blazor WebAssembly适合需要离线功能和客户端渲染的应用。
Blazor Hybrid适合需要访问设备原生功能的跨平台应用。
选择哪种模型取决于你的具体需求，如性能要求、离线功能、设备访问等。
2023年最新稀缺教程】微软新技术Blazor框架
blazor页面组件
组件代码和视分开
Home.razor创建一个类
Home.razor.cs
页面公共空间可以放到项目的import.razor中比如Components
使用组件home组件
组件渲染片段
使用：
强制改片段参数名
组件生命周期的几个函数
跳转路由
路由传参
数据列表
Blazor 入门基础教程
点击查看原视频
牛腩学Blazor
Blazor Day in China
Maui Blazor windows程序无法通过双击 bin 文件夹中的 exe打开程序的解决办法
主要命令
生成证书：
New-SelfSignedCertificate -Type Custom -Subject "CN=Test" -KeyUsage DigitalSignature -FriendlyName "My temp dev cert" -CertStoreLocation "Cert:\CurrentUser\My" -TextExtension @("2.5.29.37={text}1.3.6.1.5.5.7.3.3", "2.5.29.19={text}")
获得 PackageCertificateThumbprint值用于对.csproj文件修改
修改.csproj
<PropertyGroup Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows' and '$(Configuration)' == 'Release'">
<AppxPackageSigningEnabled>true</AppxPackageSigningEnabled>
<PackageCertificateThumbprint>45CC5503D0D5E97D0AA7F88EB9650E094BE4AB51</PackageCertificateThumbprint>
</PropertyGroup>
<PropertyGroup Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows' and '$(RuntimeIdentifierOverride)' != ''">
<RuntimeIdentifier>$(RuntimeIdentifierOverride)</RuntimeIdentifier>
</PropertyGroup>
</Project>
生成发布程序
dotnet publish -f net7.0-windows10.0.19041.0 -c Release /p:RuntimeIdentifierOverride=win10-x64
注意这个.net的Windows版本号要和.csproj里一致net7.0-windows10.0.19041.0
<Project Sdk="Microsoft.NET.Sdk">
<PropertyGroup>
<TargetFrameworks>net6.0-maccatalyst;net7.0-android;net7.0-ios</TargetFrameworks>
<TargetFrameworks Condition="$([MSBuild]::IsOSPlatform('windows'))">$(TargetFrameworks);net7.0-windows10.0.19041.0</TargetFrameworks>
<!-- Uncomment to also build the tizen app. You will need to install tizen by following this: https://github.com/Samsung/Tizen.NET -->
<!-- <TargetFrameworks>$(TargetFrameworks);net6.0-tizen</TargetFrameworks> -->
<OutputType>Exe</OutputType>
<RootNamespace>MauiApp1</RootNamespace>
<UseMaui>true</UseMaui>
<SingleProject>true</SingleProject>
<ImplicitUsings>enable</ImplicitUsings>
使用Visual Studio创建了一个.NET Maui Blazor 应用，通过Visual Studio调试Windows应用时，需要打开开发者模式
打开开发者模式，调试一切正常，但如果直接运行bin文件夹下对应目录的exe时，没有任何反应，事件查看器中，会有这样的提示：
Exception Info: System.DllNotFoundException: Unable to load DLL 'Microsoft.ui.xaml.dll' or one of its dependencies: 找不到指定的模块。
那么如何才可以打包exe文件呢？当然少不了搜索操作了。
“查找资料"发现，要运行Maui生成的exe文件，必须通过MSIX Packaging Tool来生成。
也有高手说，通过Fuslogvw找到所有的依赖项，如果运气好的话，可以成功运行，也可以打包成zip发送给其他电脑上。
那么如何制作制作一个 “可部署” 的windows应用呢？
创建签名证书
备注：创建和使用自签名证书时，只有安装和信任证书的用户才能运行应用。
1、PowerShell 终端，并使用项目导航到目录。
2、使用New-SelfSignedCertificate使用命令生成自签名证书。
New-SelfSignedCertificate -Type Custom ` -Subject "CN=Test" ` -KeyUsage DigitalSignature ` -FriendlyName "My temp dev cert" ` -CertStoreLocation "Cert:\CurrentUser\My" ` -TextExtension @("2.5.29.37={text}1.3.6.1.5.5.7.3.3", "2.5.29.19={text}")3、使用Get-ChildItem命令查询已创建的证书的证书存储：
Get-ChildItem "Cert:\CurrentUser\My" | Format-Table Subject, FriendlyName, Thumbprint
可以看到以下类似结果：
Thumbprint Subject FriendlyName---------- ------- ------------07AD38F3B646F5AAC16F2F2570CAE40F4842BBE0 CN=Contoso My temp dev cert
4、记录下Thumbprint的值，后面需要使用。
配置生成设置
双击项目名称，或导航到项目根目录，打开.csproj文件，在与之间，加上如下配置项
<PropertyGroup Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows' and '$(Configuration)' == 'Release'">
<AppxPackageSigningEnabled>true</AppxPackageSigningEnabled>
<PackageCertificateThumbprint>07AD38F3B646F5AAC16F2F2570CAE40F4842BBE0</PackageCertificateThumbprint></PropertyGroup><PropertyGroup Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows' and '$(RuntimeIdentifierOverride)' != ''">
<RuntimeIdentifier>$(RuntimeIdentifierOverride)</RuntimeIdentifier></PropertyGroup>将PackageCertificateThumbprint节点的值，换成刚才记录下的Thumbprint的值。整个文件看起来是这样的：
<Project Sdk="Microsoft.NET.Sdk.Razor">
<PropertyGroup>
<TargetFrameworks>net6.0-android;net6.0-ios;net6.0-maccatalyst</TargetFrameworks>
<TargetFrameworks Condition="$([MSBuild]::IsOSPlatform('windows'))">$(TargetFrameworks);net6.0-windows10.0.19041.0</TargetFrameworks>
<!-- Uncomment to also build the tizen app. You will need to install tizen by following this: https://github.com/Samsung/Tizen.NET -->
<!-- <TargetFrameworks>$(TargetFrameworks);net6.0-tizen</TargetFrameworks> -->
<OutputType>Exe</OutputType>
<RootNamespace>MauiApp1</RootNamespace>
<UseMaui>true</UseMaui>
<SingleProject>true</SingleProject>
<ImplicitUsings>enable</ImplicitUsings>
<EnableDefaultCssItems>false</EnableDefaultCssItems>
<!-- Display name -->
<ApplicationTitle>MauiApp1</ApplicationTitle>
<!-- App Identifier -->
<ApplicationId>com.companyname.mauiapp1</ApplicationId>
<ApplicationIdGuid>E0ADEA09-F808-4CAC-B28B-0C409C8B032B</ApplicationIdGuid>
<!-- Versions -->
<ApplicationDisplayVersion>1.0</ApplicationDisplayVersion>
<ApplicationVersion>1</ApplicationVersion>
<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'ios'">14.2</SupportedOSPlatformVersion>
<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'maccatalyst'">14.0</SupportedOSPlatformVersion>
<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'android'">24.0</SupportedOSPlatformVersion>
<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows'">10.0.17763.0</SupportedOSPlatformVersion>
<TargetPlatformMinVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows'">10.0.17763.0</TargetPlatformMinVersion>
<SupportedOSPlatformVersion Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'tizen'">6.5</SupportedOSPlatformVersion>
</PropertyGroup>
<ItemGroup>
<!-- App Icon -->
<MauiIcon Include="Resources\AppIcon\appicon.svg" ForegroundFile="Resources\AppIcon\appiconfg.svg" Color="#512BD4" />
<!-- Splash Screen -->
<MauiSplashScreen Include="Resources\Splash\splash.svg" Color="#512BD4" BaseSize="128,128" />
<!-- Images -->
<MauiImage Include="Resources\Images\*" />
<MauiImage Update="Resources\Images\dotnet_bot.svg" BaseSize="168,208" />
<!-- Custom Fonts -->
<MauiFont Include="Resources\Fonts\*" />
<!-- Raw Assets (also remove the "Resources\Raw" prefix) -->
<MauiAsset Include="Resources\Raw\**" LogicalName="%(RecursiveDir)%(Filename)%(Extension)" />
</ItemGroup>
<PropertyGroup Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows' and '$(Configuration)' == 'Release'">
<AppxPackageSigningEnabled>true</AppxPackageSigningEnabled>
<PackageCertificateThumbprint>A10612AF095FD8F8255F4C6691D88F79EF2B135E</PackageCertificateThumbprint>
</PropertyGroup>
<PropertyGroup Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'windows' and '$(RuntimeIdentifierOverride)' != ''">
<RuntimeIdentifier>$(RuntimeIdentifierOverride)</RuntimeIdentifier>
</PropertyGroup></Project>发布
打开 VS 终端的开发人员命令提示符 并导航到.NET MAUI 应用项目的文件夹，运行dotnet publish 命令。并提供一下参数
| 参数 | 值 |
|---|---|
| -f net6.0-windows{version} | 目标框架，它是 Windows TFM，例如 net6.0-windows10.0.19041.0。 确保此值与 .csproj 文件中节点的值相同。 |
| -c Release | 设置生成配置，即 Release。 |
| /p:RuntimeIdentifierOverride=win10-x64 或 /p:RuntimeIdentifierOverride=win10-x86 | 避免 WindowsAppSDK 问题 #2940 中详述的 bug。 -x64根据目标平台选择参数的或-x86版本。 |
例如：
dotnet publish -f net6.0-windows10.0.19041.0 -c Release /p:RuntimeIdentifierOverride=win10-x64
如果一切顺利，在bin目录下，会生成 Release\net6.0-windows10.0.19041.0\win10-x64\AppPackages\MauiApp1_1.0.0.1_Test文件夹，MauiApp1_1.0.0.1_Test 是我生成的目录，他在实际中，应该是实际创建的应用名称，在MauiApp1_1.0.0.1_Test目录下，会有一个msix 文件，这就是生成的 应用包，应用包并非传统的exe或者msi文件，而是全新的安装包格式
安装应用
若要安装应用，必须使用已信任的证书进行签名。 如果不是，Windows 不会让你安装应用。 将显示如下所示的对话框，其中禁用了“安装”按钮：
这里需要信任证书操作，
1、右键单击 .msix 文件，然后选择 “属性”。
2、选择 “数字签名 ”选项卡。
3、选择证书，然后点击 详细信息。
4、选择 “查看证书”。
5、选择 “安装证书…”
6、选择 “本地计算机”，然后选择“ 下一步”。
7、如果用户帐户控制提示 你希望允许此应用对设备进行更改？，选择“ 是”。
8、在“证书导入向导” 窗口中，选择“将所有证书放在以下存储区中”。
9、选择“浏览…”，然后选择“受信任人”。 选择“确定”关闭对话框。
这时会提示导入成功
点击确定关闭对话框，再次双击 .msix，已可以正常安装了。
至此，成功打包了可安装的应用，安装完成后，在开始菜单就可以找到安装好的应用程序。并可以正常打开了
目前来说，MAUI应用程序只支持所谓的“打包”应用。需要发布到 MSIX 并安装它们才能运行。未打包即可使用的场景，官方也正在努力。我们可以到https://github.com/dotnet/maui/issues/3166 跟踪进度
什么是Blazor?
简单来说就是微软推出的基于.net平台以及http://ASP.net core技术的, 交互式客户 Web UI 框架
首先blazor是基于C#的，主要的开发工具是C#(无需使用Javascript), 这对于.net 程序员来说非常友好，可以无需为了前端学习各种不同的技术，同时基于C#的代码也可以很好的和原有的Javascript代码进行沟通。
首先blazor是基于C#的，主要的开发工具是C#(无需使用Javascript), 这对于.net 程序员来说非常友好，可以无需为了前端学习各种不同的技术，同时基于C#的代码也可以很好的和原有的Javascript代码进行沟通。
第二点：blazor框架由于基于.net 平台，因此可以充分的利用.net 平台提供的各种功能丰富的库进行编程，最大程度的利用已有的资源解决各种问题。
第三点：blazor框架可以直接运行在浏览器的线程里，直接在客户端渲染UI，也可以将部分计算分配到客户端，作为富计算的客户端，同时可以作为瘦计算客户端运行。
第四点：blazor是基于组件的，您可以开发自己的专属组件，也可以分发您的组件给到有需要的用户，甚至您可以请您的客户为您的组件进行付费。
那么Blazor是如何运行的呢？
Blazor有两种部署的模式：
1.基于WebAssembly部署的模式：
关于什么是WebAssembly请参考文档：https://developer.mozilla.org/zh-CN/docs/WebAssembly， 简而言之Webssembly是一种新的编码方式，可以在现代的网络浏览器中运行 － 它是一种低级的类汇编语言，具有紧凑的二进制格式，可以接近原生的性能运行，并为诸如C / C ++等语言提供一个编译目标，以便它们可以在Web上运行。它也被设计为可以与JavaScript共存，允许两者一起工作。（,会java的同学想象一下当初Applet的设计目标，不过Applet设计为各种浏览的插件）。
基于Webassembly部署模式的Blazor会在客户端的浏览器上直接运行.net的运行时，然后由.net运行时在浏览线程上直接运行您的C#代码，您的C#代码会将UI呈现为HTML, CSS从而直接渲染UI，下图可以大概说明基于WebAssembly运行的Blazor的基本原理：
2.基于Blazor Server的部署模式：
这种模式有点类似于当前的http://ASP.net Core的MVC或者是基于Razor Page的形式，所有的UI组件编译都是在服务器端运行的，客户端使用blazor的客户端库通过SignalR链接到服务端实现UI的更新和事件响应，大致的原理如下图：
但是这种模式和原有的http://ASP.net Core MVC甚至Razor Page有什么区别，我们后继的文章再来讨论这个问题。
这两种部署模式各有优缺点，虽然部署模式不同，但是两种部署模式在代码架构和编写上是没有任何区别的，因此您可以根据您的需求场景的不同选择不同的部署模式。
两种模式各有优缺点，但是个人觉得 WebAssembly 模式的 Blazor 意义更大一些
Blazor Server 托管模型具有以下优点：
下载项大小明显小于 Blazor WebAssembly 应用，且应用加载速度快得多。
应用可充分利用服务器功能，包括使用任何与 .NET Core 兼容的 API。
服务器上的 .NET Core 用于运行应用，因此调试等现有 .NET 工具可按预期正常工作。
支持瘦客户端。 例如，Blazor Server 应用适用于不支持 WebAssembly 的浏览器以及资源受限的设备。
应用的 .NET/C# 代码库（其中包括应用的组件代码）不适用于客户端。
Blazor Server 托管模型具有以下局限性：
通常延迟较高。 每次用户交互都涉及到网络跃点。
不支持脱机工作。 如果客户端连接失败，应用会停止工作。
如果具有多名用户，则应用扩缩性存在挑战。 服务器必须管理多个客户端连接并处理客户端状态(SignalR)。
需要 ASP.NET Core 服务器为应用提供服务。 无服务器部署方案不可行，例如通过内容分发网络 (CDN) 为应用提供服务的方案。
Blazor WebAssembly 托管模型具有以下优点：
没有 .NET 服务器端依赖，应用下载到客户端后即可正常运行。
可充分利用客户端资源和功能。
工作可从服务器转移到客户端。
无需 ASP.NET Core Web 服务器即可托管应用。 无服务器部署方案可行，例如通过内容分发网络 (CDN) 为应用提供服务的方案。
Blazor WebAssembly 托管模型具有以下局限性：
应用仅可使用浏览器功能。
需要可用的客户端硬件和软件（例如 WebAssembly 支持）。
下载项大小较大，应用加载耗时较长。
.NET 运行时和工具支持不够完善。 例如，.NET Standard 支持和调试方面存在限制。
有两种不同开发模式
Blazor WebAssembly， C# 代码运行在浏览器中。
Blazor Server，C# 代码在服务器端执行，使用 SignalR 同步到浏览器进行更新。
接下来看一下如何创建 Blazor 工程。有两种方式，1、使用命令行，2、使用IDE，如 Visual Studio 。
命令行工具，仅供不想安装 Visual Studio 这类巨型工具，还想尝鲜的同学使用。可搭配任何编辑器，比如 Visual Studio Code。以下是具体步骤：
首先，需要下载 dotnet core 8。这里顺便给出 dotnet core 删除工具 dotnet-core-uninstall 9 。
使用命令 donet new -l 可以看到所有支持的模板。
在空白目录中使用命令 dotnet new blazorwasm 来创建 Blazor WebAssembly 的模板工程。
执行命令 dotnet run 启动网站，可以在浏览器中访问了。
使用 Visual Studio 创建就更为简单，选择对应的模板即可。
终于到了能上代码的时间了！
先来看两个关键文件，C# 的入口文件 Program.cs 和 HTML 的入口文件 index.html 。
// Program.cs 文件
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.DependencyInjection;
using System;
using System.Net.Http;
using System.Threading.Tasks;
namespace BlazorWebAssembly
{
public class Program
{
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
// 上一行我们可以理解为，在 ID 是 app 的元素中渲染展示 Blazor WebAssembly，所以让网页的某一部分使用 Blazor 技术渲染也是可行的。
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
await builder.Build().RunAsync();
}
}
}
<!-- index.html 文件 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>BlazorWebAssembly</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="BlazorWebAssembly.styles.css" rel="stylesheet" />
</head>
<body>
<div id="app">Loading...</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss">X</a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
<!-- blazor.webassembly.js 文件的作用有两个。
1、下载 .net runtime, 依赖的类库以及项目编译后的文件。
2、从 blazor.boot.json 中找到 C# 程序入口，并初始化运行。 -->
</body>
</html>
在编译之后的文件中，我们可以看到一些后缀名是 br 的文件，是因为 Blazor 默认使用了压缩率更高的 brotli 10 进行压缩，我觉得在这里应该推荐一下，brotli 比 gzip 更能节省空间。
Blazor WebAssembly 方式开发的简单架构，如上图所示，.net 代码的执行和 DOM 元素的渲染重绘都是在浏览器中进行的。
缺点：首次打开网站时需要加载大量依赖文件（ .net runtime 以及依赖的各种类库）；需要浏览器支持 WebAssembly 。在 caniuse 中可以查看到各浏览器对 WebAssembly 的支持情况 11 。
C# 和 JavaScript 的交互操作
有两种不同的交互方式，1、从 C# 调用 JavaScript 的代码 12，2、从 JavaScript 调用 C# 的代码 13。
首先，从 C# 调用 JavaScript 的代码
先写一个 JavaScript 的全局函数，准备给 C# 使用。
function buildObjctString(name, age) {
const obj = { name, age }
return JSON.stringify(obj)
}
在 C# 中就可以这么调用
@inject IJSRuntime JS
private async Task CSharpCallJS()
{
var methodName = "buildObjctString";
var name = "zpfe group";
var age = 18;
var data = await JS.InvokeAsync<string>(methodName, name, age);
}
然后，从 JavaScript 调用 C# 的代码
// 这里的 C# 代码也是拿全局函数来示例，在函数头上加了注解。
[JSInvokable]
public static Task<string> GetTime(string param)
{
return Task.FromResult($"{param}，后面的来自C# {DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss")}");
}
在 JavaScript 中的调用方式是
// 如果 C# 函数有参数，不传递会报错
const result = await DotNet.invokeMethodAsync("BlazorWebAssembly", "GetTime", "这个是 js 传入的参数");
alert(result)
这里只是最简单的例子，更详尽的还请从参考链接 1213中查看 。
调试
使用 Visual Studio 调试将会很容易，和普通的 C# 调试方式一样，只在需要调试的代码最前面用鼠标点出调试的断点，按下 F5 就可以调试了。JavaScript 代码也可以使用相同的方式进行调试。
Blazor Server
个人认为 Blazor Server 是为了弥补 Blazor WebAssembly 的不足而创造出来的。Blazor Server 开发方式将会强依赖 SignalR 5 。这里先简单介绍一下 SignalR ，它也源自 ASPNET Core 社区，是基于 RPC 协议的一种实现。简单来说，就是可以在浏览器中使用 JavaScript 代码通过 SignalR 来调用服务器上开发的函数，也可以在服务器上使用 SignalR 来调用浏览器中的 JavaScript 函数。这种方式能够避免网站首次打开时需要加载大量依赖文件的问题，也能够弥补浏览器对WebAssembly的支持问题，甚至能够在 IE 中运行。但是这种方式开发的网站 UI 更新、事件处理等都需要通过 SignalR 调用服务器进行处理，需要和服务器频繁交互数据，对服务器算力要求颇高。以我的理解这种方式只适合用户量不大的网站。
使用命令创建的方式是 dotnet new blazorserver
Blazor实现Windows、macOS、Android、iOS、Web共用一套UI
1. 前言
距离上次发《MAUI初体验：爽》一文已经过去2个月了，本计划是下半年或者明年再研究MAUI的，现在计划提前啦，因为我觉得MAUI Blazor挺有意思的：在Android、iOS、macOS、Windows之间共享UI，一处UI增加或者修改，就能得到一致的UI体验。
看看这篇文章《Blazor Hybrid/MAUI 简介和实战》对MAUI Blazor的说明：
MAUI
.NET 多平台应用程序 UI (.NET MAUI) 是一个跨平台框架，用于使用 C# 和 XAML 创建本机移动和桌面应用程序， 使用 .net MAUI，可以开发可在 Android、iOS、macOS 上运行的应用，Windows 以及从单个共享代码库运行的应用。
Blazor Hybrid 应用和 .NET MAUI
Blazor Hybrid 支持内置于 .NET 多平台应用 UI (.NET MAUI) 框架。 .NET MAUI 包含 BlazorWebView 控件，该控件运行将 Razor 组件呈现到嵌入式 Web View 中。 通过结合使用 .NET MAUI 和 Blazor，可以跨移动设备、桌面设备和 Web 重复使用一组 Web UI 组件。
今天就分享如何在Blazor Server、Blazor Wasm、MAUI Blazor之间共享UI的实验，这一步完成，后面开发应用时就方便多了（只针对UI修改）。
2. 先来体验下各端最终效果
Blazor Server：http://server.dotnet9.com/
Blazor Wasm：http://wasm.dotnet9.com/
MAUI(Android\Windows\macOS)：https://github.com/dotnet9/Dotnet9/tree/develop/src/Dotnet9.MAUI（源码自行编译）
Windows桌面、Blazor Server(在线）、Blazor Wasm(在线）、Android效果
iPad Air、iOS、macOS桌面效果
MAUI各端未做发布文件体验（需要做相应平台的发布签名等操作），大家可以按下面介绍的方法创建项目编译体验一下。
iOS和macOS效果感谢青城同学提供的图片素材，站长mbp安装了最新的macOS，xCode也是最新的，可能因为预览版macOS原因，xCode无法打开，间接影响了maui编译？
上一篇：Vs2022开发环境配置使用