开发第一个Blazor WebAssembly程序

1、 什么是 WebAssembly？

2、 什么是 Blazor WebAssembly？

3、 开发第一个Blazor WebAssembly程序

4、 Blazor WebAssembly程序的特点

5、 Blazor WebAssembly程序的目录结构

6、 Blazor WebAssembly程序的发布

Blazor 是一个使用 .NET 生成交互式客户端 Web UI 的框架：

使用 C# 代替 JavaScript 来创建丰富的交互式 UI。
共享使用 .NET 编写的服务器端和客户端应用逻辑。
将 UI 呈现为 HTML 和 CSS，以支持众多浏览器，其中包括移动浏览器。

使用 .NET 进行客户端 Web 开发可提供以下优势：

使用 C# 代替 JavaScript 来编写代码。
利用现有的 .NET 库生态系统。
在服务器和客户端之间共享应用逻辑。
受益于 .NET 的性能、可靠性和安全性。
始终高效支持 Windows、Linux 和 macOS 上的 Visual Studio。
以一组稳定、功能丰富且易用的通用语言、框架和工具为基础来进行生成。

什么是 WebAssembly？

WebAssembly (WASM) 是一种开放的二进制标准。它用于定义旨在 Web 浏览器中运行的程序的可移植代码格式。 WebAssembly 是一种文本程序集语言，具有专用于实现快速下载和近乎本机性能的精简二进制格式。

WebAssembly 为 C、C++ 和 Rust 等语言提供了编译目标。它设计为与 JavaScript 一起运行，因此两者可协同工作。 WebAssembly 还可生成可下载和脱机运行的渐进式 Web 应用程序。

什么是 Blazor WebAssembly？

使用 Blazor WebAssembly，开发人员可以在浏览器中运行 .NET 代码。它是一种单页应用框架，使用的是 WebAssembly 开放标准，无需插件或代码生成。

在浏览器中通过 WebAssembly 执行的 .NET 代码在浏览器的 JavaScript 沙盒中运行。该代码具有沙盒提供的所有安全和保护特性。这有助于防止客户端计算机上的恶意操作。

Blazor 使用编译为 WebAssembly 模块的 .NET 运行时，该模块随应用一起下载。该模块可执行 Blazor 应用中包含的 .NET Standard 代码。

Blazor WebAssembly 应用仅限于执行应用的浏览器的功能。但该应用可以通过 JavaScript 互操作访问完整的浏览器功能。

Blazor WebAssembly 支持的浏览器

Blazor WebAssembly 需要新式桌面或移动浏览器。当前支持以下浏览器：

Microsoft Edge

Mozilla Firefox

Google Chrome

Apple Safari

Blazor WebAssembly 开发要求

可使用最新版本的 Visual Studio 2019、Visual Studio for Mac 或 Visual Studio Code 生成 Blazor WebAssembly 应用。

无论使用哪种开发环境，都需要安装 .NET5 SDK。如果采用Vs2019进行开发，升级到最新版本后，会自动安装.Net5 SDK。

开发第一个Blazor Server程序，效果如下：

准备工作：

Visual Studio 2019
.NET 5.0

打开VS2019，选择“创建新项目”：

然后，选择“Blazor WebAssembly App”：

点击“下一步”：

填写“项目名称”，选择项目保存在的文件夹位置，点击“下一步”：

目标框架选择最新的“.Net 5.0”，身份验证选择“无”，暂时不要选择“Asp.Net Core hosted”和“Progressive Web Application”，以后会进行介绍，点击“创建”：

这样，第一个Blazor WebAssembly程序就创建好了，点击工具栏中的运行IIS Express，看看效果：

是不是很简单？如果您有云服务器，就可以发布上去了，您就拥有了开发一个网站的能力。

Blazor WebAssembly程序的特点：

Blazor WebAssembly程序是下载到客户端浏览器的沙盒中运行，所以在程序开始运行时，需要下载一堆程序文件，尤其对于大型的程序，过程尤其缓慢，第一次加载时的网络情况：

一旦下载完毕，再次运行时，由于浏览器的缓存，速度就会快的多，而且运行时不再需要网络，这样在断网环境或没有网络的离线下，仍然可以运行，再次运行时的情况：

可以看出，由于浏览器的缓存，需要下载的内容会少很多，

速度也快很多，而且一旦程序加载完毕，断开网络，程序仍然可以运行（当然访问网络的Api除外）。

如果运行复杂的程序，尤其页面组件较多或需要加载更多dll时，浏览器开始运行时的编译过程会很缓慢，所以WebAssembly目前最好运行在对于下载速度和性能要求不高的情形下。个人认为浏览器的运行时效率至关重要（能否做到像本地程序一样的效率）。

由于Blazor WebAssembly程序运行在浏览器的沙盒中，这样有一个非常有意思的事情，就是在WebAssembly程序中建立的HttpClient对象访问WebApi时，也要通过浏览器的网络访问控制。这样，如果您通过MicrosoftEdgeWebview2控件来加载WebAssembly程序情况下，您就可以在WebView.CoreWebView2.WebResourceRequested事件中进行更多额外的工作。

Web服务器不会保存每个客户端的状态信息，对于服务器负担会轻一些。

Blazor WebAssembly程序的目录结构：

wwwroot放了网站的静态资源如css、js、image文件，里面的index.html文件是应用程序的主页加载页面；
Pages是应用程序的razor页面，当然可以放到其他目录；
Shared文件夹存放公共的razor页面，当然可以放到其他目录；
_import.razor是应用程序引用的命名空间，也不是所有的命名空间都必须要写到里面；
App.razor是应用程序的启动路由页面，里面规定了默认Layout；
没有了appsetting.json文件，但你可以建立一个(客户端使用)；
没有了startup.cs，因为program.cs已经完全取代了。

program.cs是程序的入口，它创建了WebAssemblyHostBuilder并启动它；

program.cs：

builder.RootComponents.Add<App>("#app");

规定了页面加载到index.html的<div id="app">Loading...</div>位置中。

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

建立了一个Scope服务HttpClient，用于访问WebApi。其实采用AddScoped或者AddSingleton效果是一样的。

App.razor：

App.razor定义了程序的全局路由，当客户端请求路由正确时，则会执行<Found></Found>节点，DefaultLayout="@typeof(MainLayout)"则规定了默认布局模板。当客户端请求路由不正确时，则会执行<NotFound></NotFound>节点在页面输出错误信息“Sorry, there's nothing at this address.”

wwwroot 文件夹中的Index.html

此文件为默认加载的页面，里面有razor组件需要装载的位置：

<div id="app">Loading...</div>

装载App.razor里面的默认Layout：MainLayout.razor，MainLayout.razor又加载了路由为“/”的razor页面，默认是Index.razor页面。

Index.html页面不同于_Host.cshtml页面，index.html页面没有办法注入一些代码，来获取一些请求头参数。因为Index.html是下载到浏览器中运行，不能加入服务端的代码，比如：HttpContext对象等，只能等razor页面开始运行或者OnAfterRenderAsync后通过HttpClient访问WebApi。

你可以这样简单的认为：WebAssembly程序就是本地的程序，跟网络没有任何关系。

MainLayout.razor

默认建立的MainLayout.razor页面如下：