Blazor文档阅读 》 Fundamentals 。
ASP.NET Core Blazor Startup
手动启用Blazor应用,对于WASM版需要修改wwwroot/index.html
,对于Server版需要修改Pages/_Host.cshtml
:
- 在
<script>
标签上加上autostart="false"
- 在随后某处加上
Blazor.start
的调用
Initialize Blazor when the document is ready
在文档加载完毕之后加载Blazor:
<body>
...
<script src="_framework/blazor.{webassembly|server}.js" autostart="false"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
Blazor.start();
});
</script>
</body>
Chain to the Promise that results from a manual start
若要初始化JS interop等,则使用JS的then子句来串联回调:
<body>
...
<script src="_framework/blazor.{webassembly|server}.js" autostart="false"></script>
<script>
Blazor.start().then(function () {
...
});
</script>
</body>
Load boot resources
当WASM应用载入浏览器的时候,会从服务器下载启动资源:
- 用于引导用的JS代码
- .NET运行库以及类社
- 加载特定数据
loadBootResource可以自定义加载过程,可用于以下场景:
- 加载静态资源,比如从CDN加载时区数据或dotnet.wasm。
- 获取压缩后的类社,并在本地解压缩并加载,用于不支持直接加载压缩类社的主机
- 对fetch请求中涉及的资源进行重定向
外部资源必须返回https://www.w3.org/TR/cors/头信息。
loadBootResource的参数如下:
- type, 运行的类型包括assembly, pdb, dotnetjs, dotnetwasm, 以及timezonedata
- name,资源的名字
- defaultUri,资源的相对或者绝对路径
- integrity,完整性相关的字符串
loadBootResource返回的是一个URL路径用于指示资源的所在:
<script src="_framework/blazor.webassembly.js" autostart="false"></script>
<script>
Blazor.start({
loadBootResource: function (type, name, defaultUri, integrity) {
console.log(`Loading: '${type}', '${name}', '${defaultUri}', '${integrity}'`);
switch (type) {
case 'dotnetjs':
case 'dotnetwasm':
case 'timezonedata':
return `https://cdn.example.com/blazorwebassembly/5.0.0/${name}`;
}
}
});
</script>
如果需要定制除URL以外的参数,可以在loadBootResource中直接调用fetch并返回结果。下面的例子在外向的请求中增加了一些自定义的HTTP信息头:
<script src="_framework/blazor.webassembly.js" autostart="false"></script>
<script>
Blazor.start({
loadBootResource: function (type, name, defaultUri, integrity) {
return fetch(defaultUri, {
cache: 'no-cache',
integrity: integrity,
headers: { 'Custom-Header': 'Custom Value' }
});
}
});
</script>
loadBootResource还可以返回:
null
/undefined
,退回到原始的行为- 一个promise,参考https://docs.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly?view=aspnetcore-5.0#compression
ASP.NET Core Blazor environments
本地运行的时候,默认环境是Development;发布以后,默认环境是Production。
可由两种办法设置环境:
- 启动配置
- 环境信息头
对于宿寄的WASM应用,客户端需要从中间件跟服务端沟通,来获取其环境。服务端使用名为blazor-environment
的信息头来传递环境信息。
对于本地运行的独立的WASM应用,开发服务器自动添加blazor-environment
信息头。
Set the environment via startup configuration
<body>
...
<script src="_framework/blazor.{webassembly|server}.js" autostart="false"></script>
<script>
Blazor.start({
environment: "Staging"
});
</script>
</body>
Set the environment via header
对于IIS的情况,blazor-environment在web.config文件中添加,后者位于bin/Release/{TARGET FRAMEWORK}/publish
目录,示例如下:
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
...
<httpProtocol>
<customHeaders>
<add name="blazor-environment" value="Staging" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>
如果防止web.config在发布的时候被覆写,参考https://docs.microsoft.com/en-us/aspnet/core/blazor/host-and-deploy/webassembly?view=aspnetcore-5.0#use-a-custom-webconfig
在Blazor中获取环境信息:
@page "/read-environment"
@using Microsoft.AspNetCore.Components.WebAssembly.Hosting
@inject IWebAssemblyHostEnvironment HostEnvironment
<h1>Environment example</h1>
<p>Environment: @HostEnvironment.Environment</p>
在builder里面根据环境变量来进行分支处理:
if (builder.HostEnvironment.Environment == "Custom")
{
...
};
WebAssemblyHostEnvironmentExtensions提供了扩展方法,用于检测Development, Production, Staging以及自定义环境:
- IsDevelopment
- IsProduction
- IsStaging
- IsEnvironment
例如:
if (builder.HostEnvironment.IsStaging())
{
...
};
if (builder.HostEnvironment.IsEnvironment("Custom"))
{
...
};
IWebAssemblyHostEnvironment.BaseAddress可以用,即便NavigationManager服务尚不存在。
(本篇完)