初尝 Blazor WebAssembly (2)

第二步，选择 Blazor WebAssembly

建立好的项目具有以下目录结构

运行项目，可以看到加载了很多熟悉的 dll

其中列表页面，通过 HttpClient 访问了一个静态的 json 文件

四. 初体验 1.运行浅析

入口点在 wwwroot/index.html 通过 blazor.webassembly.js 下载 .NET 运行时、应用程序和依赖。这个js文件并不包含在项目文件中，是由 Microsoft.AspNetCore.Components.WebAssembly.Build 工具包提供的，编译生成的时候会输出到目标目录：

2.实现简单逻辑

简单的改了 Counter 的代码，成了一个 Guid 生成器，这点体验还是很好的，直接用C#代码编写逻辑而不是JavaScript，而且是本地运行直接运行C#代码，不需要 Blazor Server 这样的通过 SignalR 通信。

@page "/counter" <h1>GUID 生成器</h1> <div> <div> <input type="text" value="@_guidValue"/> </div> <div> <button @onclick="GenerateGuid">生 成</button> </div> </div> @code { private Guid? _guidValue; private void GenerateGuid() { _guidValue = Guid.NewGuid(); } }

3.与JS的互操作

上面实现了GUID生成器，但是每次生成了都需要自己去输入框复制，不方便，现在实现一个自动复制到剪贴板的功能。

此功能无法百分百通过C#代码来实现，需要与JS进行交互。

先编写 JS:

window.clipboardCopy = { copyText: function (text) { navigator.clipboard.writeText(text).then(function () { alert("Copied to clipboard!"); }) .catch(function (error) { alert(error); }); } };

该JS放置的位置，可以写在Js文件中，在Index.html中应用，也可以直接写在 Index.html中。

然后在 Razor 组件中注入 JSRuntime，并调用该JS:

@page "/counter" @inject IJSRuntime JsRuntime <h1>GUID 生成器</h1> <div> <div> <input type="text" value="@_guidValue" /> </div> <div> <button @onclick="GenerateGuid">生 成</button> <button @onclick="CopyTextToClipboard">复制到剪贴板</button> </div> </div> @code { private Guid? _guidValue; private void GenerateGuid() { _guidValue = Guid.NewGuid(); } private async Task CopyTextToClipboard() { await JsRuntime.InvokeVoidAsync("clipboardCopy.copyText", _guidValue); } }

运行：

小技巧：通过 dotnet watch run 命令可以获得更快乐的开发体验。

五.结束

Blazor WebAssembly 的初次尝试到此就结束了，一直在等正式版，到现在终于等到了，我也是才是学习它，后面陆续会出一些分享文章，希望可以与大家一起学习进步。