济南专业网站建设哪家便宜,集团网站建设特点互联网课堂,哪里可以兼职答题,广西城乡和建设厅网站首页点击上方蓝字关注“汪宇杰博客”导语.NET 5 正式发布已经有一段时间了#xff0c;其中 Blazor 技术是该版本的亮点之一。作为微软技术的被坑者#xff0c;年少的我曾经以为 SilverLight 能血虐 Flash#xff0c;Zune 能团灭 iPod#xff0c;WP 能吊打 iPhone#xff0c;UW… 点击上方蓝字关注“汪宇杰博客”导语.NET 5 正式发布已经有一段时间了其中 Blazor 技术是该版本的亮点之一。作为微软技术的被坑者年少的我曾经以为 SilverLight 能血虐 FlashZune 能团灭 iPodWP 能吊打 iPhoneUWP 能统一全平台…… 可是后…… 最终步入大龄程序员的我发现只有陪伴了我将近 20 年的ASP.NET 还没有完蛋。于是我这两天花了点时间尝试将我的一个 UWP 小工具用 Blazor 重写分享给大家。无法抢救的 UWP“人民币大写转换器” 是我年少无知时开发的小工具之一它的主要功能有- 将数字金额转化为大写中文- 复制结果- 使用中文语音朗读结果- 显示参照表可惜 UWP 不论是充满 Bug 的 SDKRuntime还是微软的龟速更新与混乱的规划都已经无可救药了是时候给应用找个新家了。BlazorBlazor 是 .NET Core 时代微软推出的用于 Web 应用开发的新框架它可以运行在服务器端也可使用 WASM 运行在客户端即浏览器中。对我来说这个技术最吸引人的就是 WASM。像我这种已经30多岁学不了新东西的 .NET 程序员根本搞不定 Angular、Vue、React 这些花里胡哨的框架而 Blazor WASM 是把 .NET 运行时搬到了浏览器端和 SilverLight 类似但这次是以WASM标准的形式运行不需要安装插件并且也能跨平台。于是我可以继续使用熟悉的 .NET 和 C# 开发 SPA Web 应用。更重要的是既然是原汁原味的 .NET就可以很方便的重用以前的代码以及现成的成千上万个 NuGet 包而不用像一个新发明的框架那样从0开始积累生态。我 996 了 2 小时成功将“人民币大写转换器”重写到 Blazor WASM效果如下Demohttps://rmbcap.azurewebsites.net/源代码https://github.com/EdiWang/RMBCapitalization-Blazor由于篇幅关系本文不叙述重写的每处细节只参数关键点。其他细节大家可到 GitHub 阅读源代码了解。创建 Blazor WASM 工程我们可以使用 Visual Studio 2019 创建 Blazor WASM 工程。选择 Blazor WebAssembly App 就可以了工程结构一个 Blazor WASM 项目的典型结构如上图。Program.cs 包含应用如何启动与承载的逻辑。wwwroot 中的文件为纯 HTML/CSS/JS 文件不包含.NET的逻辑。其中 index.html 为承载应用的默认页面和 Angular 等 SPA 框架非常类似它将会把应用页面加载到 div idapp 中。MainLayout.razor 是整个应用的布局页面如果你有多个页面和视图那么通常这里会放 HeaderFooter 等内容。Index.razor 为应用的默认主页。我这个应用只有一个页面所以一切逻辑都在这里实现就可以了。可重用的代码人民币大写的转换类与框架和平台无关因此完全可以直接复制到Blazor工程里用即 RMBConverter.cs。UWP 应用的视图通常采用 MVVM 模式开发这些逻辑可以很方便的迁移到 Blazor。Index.razor就像写 MVC 的 cshtml 一样使用熟悉的 Razor 语法就能绑定数据和事件。对于 input简单的双向数据绑定可以直接用 bind属性 实现。但我这个应用里要求用户一边输入金额一边进行实时计算所以只能写成事件绑定。div h3 Result /h3/divdiv div input typetext bind-valueInputAmount bind-value:eventoninput / /div div button οnclickCopyResult复制/button button οnclickReadAloud朗读/button button οnclickClear清除/button /div/div对于有参数的事件处理函数要注意它和正常 C# 写事件一样是个 Lambda 表达式如果放在循环里的话要注意变量的值是在循环里被修改。下面的代码必须使用 var num i 来存储 i 的值如果直接使用 KeyPadClicked(i)那么 i 一定永远等于1。div classrow for (int i 1; i 9; i) {var num i; div classcol-4 button classbtn btn-light key οnclick() KeyPadClicked(num.ToString())i/button /div }/divdiv classrow div classcol-8 button classbtn btn-light key οnclick() KeyPadClicked(0)0/button /div div classcol button classbtn btn-light key οnclick() KeyPadClicked(.)./button /div/div和 XAML 的 MVVM 以及 Angular 稍有不同的是处理逻辑不是在 code behind 文件里写的而是在 razor 页面本身写。如果能写成 Index.razor.cs 就干净了。code { private string _inputAmount; public string InputAmount { get _inputAmount; set { _inputAmount value; // 验证和处理逻辑... Result string.IsNullOrWhiteSpace(_inputAmount) ? string.Empty : RMBConverter.GetCapitalizedRmb(InputAmount); } } public string Result { get; set; } private async Task CopyResult() { // ... } private async Task ReadAloud() { // ... } private void Clear() { InputAmount string.Empty; } private void KeyPadClicked(string value) { InputAmount value switch { 0 when InputAmount ! 0 0, . when !InputAmount.Contains(.) ., _ value }; }}需要重新实现的功能复制文字在 UWP 中复制可以调用 Windows 的 Clipboard API 来完成。但是在浏览器端没有 Windows 的 APIBlazor 也没有封装剪切板 API因此我们只能借用 JS 来完成。index.htmlwindow.clipboardCopy { copyText: function (text) { navigator.clipboard.writeText(text).then(function () { console.log(text); }) .catch(function (error) { alert(error); }); }};Index.razor使用依赖注入引入 IJSRuntime 的实例。这是 Blazor 用于和 JavaScript 交互的接口。inject IJSRuntime JavaScriptRuntime然后就可以调用 JS 进行复制private async Task CopyResult(){ if (!string.IsNullOrWhiteSpace(Result)) { await JavaScriptRuntime.InvokeVoidAsync(clipboardCopy.copyText, Result); }}朗读类似的在 UWP 里朗读使用的是 Windows 的 SpeechSynthesizer API。浏览器端也有个类似的 SpeechSynthesisUtterance。index.htmlwindow.readAloud { readText: function (text) { let utterance new SpeechSynthesisUtterance(text); utterance.lang zh-CN; speechSynthesis.speak(utterance); }}Index.razorprivate async Task ReadAloud(){ if (!string.IsNullOrWhiteSpace(Result)) { await JavaScriptRuntime.InvokeVoidAsync(readAloud.readText, Result); }}本地应用目前 Blazor WASM 还没有本地应用的官方支持必须打开浏览器才能使用现有的版本只能使用PWA完成一部分本地应用化操作。但在今年即将发布的 .NET 6 版本中Blazor 会迎来官方最纯正的本地应用支持。只要不出自 SilverLight、Zune、WP、WinRT、UWP 团队之手就不会被坑现存的问题Blazor WASM 虽然看着香但目前有一些痛点还有待解决。首先框架本身的体积依然较大由于众所周知而不可描述的原因如果服务器部署在海外那么我国网络加载 Blazor 应用会比较慢。另外不是所有版本的浏览器都可以跑 WASM尤其是手机端。Blazor 的兼容性相比 AngularVueReact 等还有些差距。总结使用 Blazor WASM 开发 Web 应用能够让 .NET 程序员充分利用既有的知识和技能快速上手结合 Web 的强大生态 与 .NET 的高效生产力成就不凡。而 UWP 只能哭晕在厕所也没人听见……汪宇杰博客Azure | .NET | 微软 MVP无广告不卖课做纯粹的技术公众号
