浏览器中的 .Net Core —— Blazor WebAssembly 初体验

       在两年多以前就听闻 Blazor 框架,是 .Net 之父的业余实验性项目,其目的是探索 .Net 与 WebAssembly 的兼容性和应用前景。现在这个项目已经正式成为 Asp.Net Core 框架的一部分,公开了预览版,官方教程也基本写好上线了。就着这个机会,顺便体验一下这个框架用起来如何。

       之前在网上搜索 Blazor 的相关信息的时候发现吵得很厉害。前端开发者大多觉得有 Vue 之类的前端 MVVM 框架已经够用,没有 C# 插足的余地。甚至很多 C# 开发者也不知道这个框架的基本工作原理,觉得是把 C# 翻译成 js,翻译之后就变成了类似 Vue 的东西。还有人觉得这是下一个 Flash 或者 Silverlight。毛主席曾经说过:没有调查就没有发言权。对于说这种话的人,我只想说,少刷几分钟抖音快手随便搜下百度都能搞清楚怎么回事,作为 C# 开发者,这都理解不了我是真不知道是怎么学的 C#,难道真是传说中的拖控件一把梭,然后就没然后了?

       简单说明下 Blazor WebAssembly 的工作原理。就是在 WebAssembly 框架的基础上,实现了一个 .Net Core Runtime,用一个启动 js 下载相关 dll、初始化 .Net 虚拟机、启动虚拟机运行入口函数,接下来就和一个正常 .Net 程序一样,该怎么运行怎么运行。用 Java 的说法就是在浏览器中运行的 jvm。从此,.Net 跨平台领先 Java 一步,除了 Windows、Linux、MacOS之外,还要加上浏览器。悄悄说一下,浏览器上的运行时实现了 netstandard 2.1,待遇比传统的 .Net Framework 还好。要说缺点就是调试很麻烦,因为整个运行过程和服务器无关,在 VS 下断点也没用,不知道是预览版没做好还是什么原因,顺便导致出问题很难跟踪。还有改了代码要重新编译项目,不能像 MVC 那样改了 cshtml 刷新下浏览器就生效。每次重启调试太耐等了。

正文

       目前 Blazor WebAssembly 还不是默认项目模板的一部分,需要自行下载模板才能在 VS 2019 的项目模板里找到,需要的可以移步官方教程。不知道有多少园友知道我有个专门收集各种各种我觉得有趣的示例代码的项目,当然也有很多代码是我自己写的。我就冒出了一个想法,如何把这个项目也集成到我的现有项目中。毕竟创建独立的项目和在现有项目中融合新东西完全是两种感觉,很多组件一旦融合就会各种冲突打架,需要深入了解他们才能知道冲突有没有办法解决,要如何解决。

       经过几天的研究,我成功把 Blazor WebAssembly 项目融合进了我的主项目。同时进行了一些改造。主要方法还是先新建一个模板项目,然后对比代码差异,融合代码,补充 nuget 包。接下来简要说明下在现有 Asp.Net Core 项目中增加 Blazor WebAssembly 项目的主要步骤。在我的项目中,/blazor 是 Blazor 根目录,各种修改都配合这个设定,各位请根据自己的情况修改。

客户端

       1、新建一个包含 Asp.Net Core 宿主服务器的 Blazor WebAssembly 项目。纯 Blazor WebAssembly 项目发布后可以放到静态文件服务器,宿主服务器也只是当文件服务器用。把客户端项目复制到主项目解决方案中,在 VS 中添加现有项目。如果修改过项目名称和命名空间,请重启 VS,不然可能报错。

       2、复制共享项目到主项目的解决方案,修复项目引用。

       3、修改 wwwroot/index.html,修改 <head> 标签中的 <base href="http://www.likecs.com/" /> 为 <base href="http://www.likecs.com/blazor" />。

       4、在 wwwroot 文件夹新建文件夹 blazor,把 wwwroot 下的其他文件和文件夹放进 wwwroot/blazor 文件夹,避免和主项目路径冲突,同样地,主项目也不能再用 /blazor/xxx 了。

服务端

       1、安装 nuget 包 Microsoft.AspNetCore.Blazor.Server,要勾上包括预发行版,不然搜不到。

       2、在主项目中引用客户端项目和共享项目。

       3、在 Startup.ConfigureServices 中增加代码:

1 services.AddResponseCompression(opts => 2 { 3 opts.MimeTypes = ResponseCompressionDefaults.MimeTypes.Concat( 4 new[] { "application/octet-stream" }); 5 });

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpwwdf.html