[英]How to use C# WebAssemly from JavaScript without Blazor web components
To compile C# into WebAssemly and interop with JS it's required to use Blazor WebAssembly ASP.NET framework, which is designed for SPA and contains lot of overhead in case you just want to use a C# library from JS.要将 C# 编译成 WebAssemly 并与 JS 进行互操作,需要使用 Blazor WebAssembly ASP.NET 框架,该框架专为 SPA 设计并且包含大量开销,以防您只想使用来自 JS 的 C# 库。
What is the minimum setup to just compile a DLL to WebAssembly and use it from JavaScript?将 DLL 编译为 WebAssembly 并从 JavaScript 使用它的最低设置是什么?
Create a new empty C# project with the following configuration (via .csproj):使用以下配置(通过 .csproj)创建一个新的空 C# 项目:
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
<PropertyGroup>
<TargetFramework>net6.0</TargetFramework>
<LangVersion>10</LangVersion>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="6.0.0" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="6.0.0" PrivateAssets="all" />
</ItemGroup>
</Project>
Initialize Blazor JS runtime and specify the bindings:初始化 Blazor JS 运行时并指定绑定:
namespace WasmTest;
public class Program
{
private static IJSRuntime js;
private static async Task Main (string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
var host = builder.Build();
js = host.Services.GetRequiredService<IJSRuntime>();
await host.RunAsync();
}
[JSInvokable]
public static async Task<string> BuildMessage (string name)
{
var time = await GetTimeViaJS();
return $"Hello {name}! Current time is {time}.";
}
public static async Task<DateTime> GetTimeViaJS ()
{
return await js.InvokeAsync<DateTime>("getTime");
}
}
Publish with dotnet publish
and use the C# library from JS:使用dotnet publish
并使用来自 JS 的 C# 库:
<script src="_framework/blazor.webassembly.js" autostart="false"></script>
<script>
window.getTime = () => {
return new Date().toJSON();
};
window.onload = async function () {
await Blazor.start();
const msg = await DotNet.invokeMethodAsync("WasmTest", "BuildMessage", "John");
console.log(msg);
};
</script>
Here is an example template solution on GitHub: https://github.com/Elringus/WasmTest以下是 GitHub 上的示例模板解决方案: https : //github.com/Elringus/WasmTest
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.