前言

之前我写过一篇关于 Blazor WebAssembly 的文章浏览器中的 .Net Core —— Blazor WebAssembly 初体验,如今已经更新到 RC-1,与预览版有着较大的差异,为此补充这篇文章。

正文

与预览版的主要差异

1、这次的候选版修改了大部分包名和命名空间,因此无法通过更新包完成升级。你会发现老包一直停留在预览版。因此需要删除弃用的包,安装新的包。

2、Startup 的配置方式发生了较大变化,弱化了 Blazor 的存在感。

3、这次更新后支持在 VS 2019 调试 Blazor WebAssembly 了。当然也可以使用浏览器进行调试,效果一样。但是浏览器调试同样依赖 Blazor 远程调试代理,所以还不如直接使用 VS 调试。要求 VS 2019 16.6.0 以上版本,并进行相应配置。

4、候选版会将 Blazor 客户端的所有文件发布到宿主项目的 wwwroot 文件夹,而预览版会在宿主项目的根目录生成一个与客户端项目同名的文件夹存放发布文件。因此需要特别注意宿主项目和客户端项目的 wwwroot 文件夹不能有重名文件。

5、候选版发布时会同时生成 gzip 和 br 格式的预压缩文件,压缩效果较好,一般能压缩到原始 dll 的 1/4 大小。发布时会自动使用 IL Linker 裁剪 dll,如果使用了反射代码,可能导致运行异常,需要编写配置文件配置 Linker 的行为或禁用裁剪。如果 Linker 直接报错建议禁用。

迁移步骤

1、如果之前安装过预览版的请参考微软官方文档更新项目模板。避免新建项目停留在老版本要手动升级。

2、更新 VS 2019 到 16.6.0 以上版本。

3、在客户端和宿主服务端项目的 launchSettings.json 中增加配置项:"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}", ,启用 VS 调试。

4、更新客户端项目文件,包括包引用和 Linker 配置。

5、更新宿主项目文件。

6、修改宿主项目的 Startup.cs 文件

注意:上图的新的注册代码推荐和 app.UseStaticFiles(); 放到一起。

上图为路由端点注册。

以上修改全部在 Configure 方法中完成。

7、修复命名空间引用和其他可自动修复的小编译错误。

至此,就完成了从预览版到候选版的迁移。在我的项目中,由于新版的发布机制,将 index.html 也一并移到 wwwroot/blazor 文件夹中,避免引起歧义。

注意事项

HttpClient 的使用方式有变更,引用的包也有区别,GetJsonAsync 换成了 GetFromJsonAsync。

调试体验

按照一般流程启动宿主项目就可以调试客户端代码了,感觉和调试一般 C# 程序没有任何区别。如果想在浏览器进行调试,同样要调试启动宿主项目,因为需要借助远程调试代理才能正常工作。需要确保 app.UseWebAssemblyDebugging(); 这句代码已经加入 Configure 方法,然后 F12 打开控制台,按照提示按组合键启动调试页面。调试页面会显示一个命令,将上述命令用 cmd 或 Win+R 执行就可以在新窗口打开调试页面。注意,新打开的页面无法触发 VS 的断点,只能触发浏览器中的断点。变量监控什么的也都能用,不过感觉也就图个新鲜,实际上也不怎么好用,需要打开两个标签,一个用来操作,一个用原来调试源码,感觉在脱裤子放屁。

注意,需要最低 Chrome 70 或 Edge 80 才能用浏览器调试功能。

结语

这次更新保持了微软改名部的一贯风格和强大友好的一条龙开发服务体验,用起来还是很舒服的。

转载请完整保留以下内容并在显眼位置标注,未经授权删除以下内容进行转载盗用的,保留追究法律责任的权利!

  本文地址:https://www.cnblogs.com/coredx/p/12966150.html

  完整源代码:Github

  里面有各种小东西,这只是其中之一,不嫌弃的话可以Star一下。

Blazor WebAssembly 候选版迁移手记的更多相关文章

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

    前言 在两年多以前就听闻 Blazor 框架,是 .Net 之父的业余实验性项目,其目的是探索 .Net 与 WebAssembly 的兼容性和应用前景.现在这个项目已经正式成为 Asp.Net Co ...

  2. Blazor(WebAssembly) + .NETCore 实现斗地主

    之前群里大神发了一个 html5+ .NETCore的斗地主,刚好在看Blazor WebAssembly 就尝试重写试试. 还有就是有些标题党了,因为文章里几乎没有斗地主的相关实现:),这里主要介绍 ...

  3. 使用WebApi和Asp.Net Core Identity 认证 Blazor WebAssembly(Blazor客户端应用)

    原文:https://chrissainty.com/securing-your-blazor-apps-authentication-with-clientside-blazor-using-web ...

  4. Blazor WebAssembly 3.2.0 正式起飞,blazor 适合你吗?

    最近blazor更新很快,今天在官方博客上发布了Blazor WebAssembly 3.2.0 RC:https://devblogs.microsoft.com/aspnet/blazor-web ...

  5. ASP.NET Core Blazor 初探之 Blazor WebAssembly

    最近Blazor热度很高,传说马上就要发布正式版了,做为微软脑残粉,赶紧也来凑个热闹,学习一下. Blazor Blazor是微软在ASP.NET Core框架下开发的一种全新的Web开发框架.Bla ...

  6. Blazor WebAssembly 3.2 正式发布

    5月 20日,微软 发布了 Blazor WebAssembly 3.2(https://devblogs.microsoft.com/aspnet/blazor-webassembly-3-2-0- ...

  7. ASP.NET Core Blazor Webassembly 之 组件

    关于组件 现在前端几大轮子全面组件化.组件让我们可以对常用的功能进行封装,以便复用.组件这东西对于搞.NET的同学其实并不陌生,以前ASP.NET WebForm的用户控件其实也是一种组件.它封装ht ...

  8. 初尝 Blazor WebAssembly

    一. 前言 Blazor 的整体介绍以及特点与优势,建议翻阅 Blazor 介绍. Blazor 是一个可是使用 .NET/C# 来编写交互式客户端的 Web UI 框架,在官网有一句话概括 &quo ...

  9. 一起学Blazor WebAssembly 开发(1)

    最近blazor的WebAssembly 正式版出来了,正好手头有一个项目采用的前后端分离模式做的,后端用的abp vnext(.net core 的一个很著名的框架)框架开发的,其实前端之前考虑的使 ...

随机推荐

  1. 初见Ajax——javascript访问DOM的三种访问方式

    最近好啰嗦 最近在一间小公司实习,写一些小东西.小公司嘛,人们都说在小公司要什么都写的.果真是. 前端,后台,无论是HTML,CSS,JavaScript还是XML,Java,都要自己全包了.还好前台 ...

  2. Hadoop学习笔记(一)——安装与配置

    操作系统:Ubuntu 15.04; Hadoop version: 2.6.4 参考文献: Ubuntu上搭建Hadoop环境(单机模式+伪分布模式)

  3. 一只简单的网络爬虫(基于linux C/C++)————配置文件设计及读取

    一般来说linux下比较大型的程序都是以配置文件作为参数介质传递的,该爬虫也采用配置文件的方式来获取参数,配置文件格式大致如下: max_job_num=1 #seeds=https://www.ba ...

  4. 手把手教你进行Scrapy中item类的实例化操作

    接下来我们将在爬虫主体文件中对Item的值进行填充. 1.首先在爬虫主体文件中将Item模块导入进来,如下图所示. 2.第一步的意思是说将items.py中的ArticleItem类导入到爬虫主体文件 ...

  5. 浅析Spring中AOP的实现原理——动态代理

    一.前言   最近在复习Spring的相关内容,刚刚大致研究了一下Spring中,AOP的实现原理.这篇博客就来简单地聊一聊Spring的AOP是如何实现的,并通过一个简单的测试用例来验证一下.废话不 ...

  6. Altera特殊管脚的使用

  7. js--bom对象

    bom:browser object model **navigator:获取浏览器的信息 **screen:获取屏幕的相关信息 **location:请求的url地址 **获取请求的url地址:lo ...

  8. 用js写一个贪吃蛇小游戏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. angular js 页面修改数据存入数据库

    一.编写service,修改数据要根据ID回显数据 //根据ID查询 public Brand findById(Long id); //修改 public int update(Brand bran ...

  10. 1.Spring 框架概述

    目录 Spring 框架概述 1 我们所说的 "Spring "是什么意思 2. Spring和Spring框架的历史 3. 设计理念 4.反馈和贡献 5.开始使用 Spring ...