在本年年初, 恰逢新春佳节临近的时候. 微软给全球的C#开发者们, 着实的奉上了一分惊喜. 微软正式开源Blazor ，，将.NET带回到浏览器.
这个小惊喜, 迅速的在dotnet开发者中间传开了. 而就在昨天(2018年3月22日) Blazor颁布了它的第一次Release. Blazor到底是个什么样的对象呢?我们是否真的可以携着C#语言进入前真个市场中? 不如此刻就跟我一起体验dotnet blazor吧.
首先获取最新版的dotnet core 并安置Blazor模板:
安置 最新的.Net Core(版本需要高于2.1.101)
对付简单的测验考试来说, VS code 已经足够. 所以笔者并没有亲自安置Visual Studio.
使用命令行初始化项目:
dotnet new -i Microsoft.AspNetCore.Blazor.Templates dotnet new blazor -o BlazorApp1 cd BlazorApp1 dotnet run
如果你需要使用Visual Studio,
安置最新的Visual Studio 2017.
安置 ASP.NET Core Blazor Language Services extension
在Visual Studio中创建新的测试项目:
选择 File -> New Project -> Web -> ASP.NET Core Web Application
确定在Target Framework里选择了 .NET Core and ASP.NET Core 2.0.
选择 Blazor 模板
当我们运行起项目之后, 就可以看到如下提示
这个时候我们在浏览器里打开监听的端口 :17477. 就可以看到我们这个项目的网页了.
这个简单的示例项目带了3个页面
第一个页面对照简单, 但先别急,让我们打开浏览器工具. 先看看页面在加载页面过程中都加载了什么
在首次打开页面的时候, 我们看到的是这样一个Loading..的页面. 这个页面的代码是这样的.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>BlazorDemo</title> <base href="http://www.mamicode.com/" /> <link href="http://www.mamicode.com/css/bootstrap/bootstrap.min.css" /> <link href="http://www.mamicode.com/css/site.css" /> </head> <body> <app>Loading...</app> <script src="http://www.mamicode.com/css/bootstrap/bootstrap-native.min.js"></script> <script src="http://www.mamicode.com/_framework/blazor.js" main="BlazorDemo.dll" entrypoint="BlazorDemo.Program::Main" references="Microsoft.AspNetCore.Blazor.Browser.dll,Microsoft.AspNetCore.Blazor.dll,Microsoft.Extensions.DependencyInjection.Abstractions.dll,Microsoft.Extensions.DependencyInjection.dll,mscorlib.dll,netstandard.dll,System.Core.dll,System.Diagnostics.StackTrace.dll,System.dll,System.Globalization.Extensions.dll,System.Net.Http.dll,System.Runtime.Serialization.Primitives.dll,System.Security.Cryptography.Algorithms.dll" linker-enabled="true"></script></body> </html>
可以看到这个页面加载了两个js, 第一个是bootstrap的, 第二个叫做blazor.js. 只不过这个js有非常多的参数, 有 main, entrypoint, 和 references. 看看References里写的是不是很熟悉? 一看就是.net的dll.
blazor.js 加载了mono.js, mono.js 加载了mono.wasm. 这个是个什么文件?
wasm代表的就是Web Assembly, 简单地说它就是编译好的二进制文件, 可以由浏览器直接运行, 源语言可以是C/C++或者任何可以编译到Web Assembly的文件, 而这里我们加载的就是mono 编译好的Web Assembly文件, 它被加载之后, 相当于浏览器中启动了一个mono 运行环境.
随后的两个js 是笔者chrome浏览器插入的js, 在这里不要被他们滋扰了. 那么mono 运行时加载完成之后. 就需要加载dotnet 的Dll了, 首先是入口库, 接着就是需要的引用库
好家伙 1.9MB. 当所有的Dll被下载完毕之后, 这个时候我们的浏览器就可以运行我们这个dotnet的网页了. 于是就回到了我们最开始看到的阿谁应用措施.
所以 总结一下 blazor.js 挪用mono.js, mono.js加载mono.wsam, 然后按照写在script标签里的内容继续的加载dotnet的库文件. 如果浏览器不撑持wsam, 就会测验考试使用asm.js加载mono.asm.js
柳暗花明又一村,Blazor的模板究竟是怎样的.