时间戳

首页 > 解决方案 > 在 Blazor WebAssembly 中使用 emscripten 编译的 js/wasm

javascript - 在 Blazor WebAssembly 中使用 emscripten 编译的 js/wasm

问题描述

我已经构建了一个 wasm 模块，当我使用 express 和 node 提供它时它就起作用了。但我真的不确定如何使用 JSInterop 功能将它与 Blazor Webassembly 结合。当我将脚本添加到 index.html 文件时，它们总是为 .wasm 文件提供 404 未找到，我真的不确定需要发生什么来包含它，或者它是否是正确的方法。我想知道我是否需要对 UseStaticFiles 做一些事情，但这比我在 express 中必须做的更多才能让它工作。

Blazor WebAssembly 项目中的 index.html

<!DOCTYPE html>
<html>

<head>  
</head>

<body>
    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss"></a>
    </div>
    <script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>
    <script src="_framework/blazor.webassembly.js"></script>
    <script type="module" src="scripts/test.js"></script>
    <script type="module" src="scripts/Builder.js"></script>
</body>

</html>

Razor 页面代码非常简单：

[Inject]
public IJSRuntime JSRuntime { get; set; }
private IJSObjectReference _jsModule;

protected override async Task OnInitializedAsync()
{
    _jsModule = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./scripts/test.js");
}

Javascript 文件（Builder.js 是与 Builder.wasm 交互的 emscripten 编译代码）

import Module from './Builder.js'

export function showAlert(obj)
{
    var module;
    Module().then(instance => {
        module = instance;
        console.log(module);
        var instance = new module.MediaPlayer();
        console.log(instance);
        instance.delete();
    });
}

标签： javascriptblazorwebassembly

解决方案

推荐阅读