webassembly c#如何与JavaScript交互 - 问答

WebAssembly 是一种在浏览器中运行的二进制代码格式，它可以让你在浏览器中运行 C# 代码。要实现 WebAssembly 与 JavaScript 之间的交互，你需要使用 JavaScript 调用 WebAssembly 函数，或者在 WebAssembly 中调用 JavaScript 函数。

以下是一个简单的示例，展示了如何在 C# 中创建一个 WebAssembly 模块，并在 JavaScript 中调用它：

首先，创建一个 C# 项目，并安装 Microsoft.NET.Sdk.Web SDK。在项目文件中添加以下内容：

 <PropertyGroup>
   <TargetFramework>net6.0</TargetFramework>
   <OutputType>Exe</OutputType>
    <WasmBuildNative>true</WasmBuildNative>
  </PropertyGroup>
  <ItemGroup>
   <PackageReference Include="Microsoft.NET.Runtime.WebAssembly" Version="6.0.0-preview.7.21369.14" />
  </ItemGroup>
</Project>

在项目中创建一个 C# 类，并添加一个简单的方法，例如：

public class MyInteropClass
{
    public static int Add(int a, int b)
    {
        return a + b;
    }
}

在 Program.cs 文件中，将 C# 方法导出为 JavaScript 函数：

using System;
using Microsoft.JSInterop;

public class Program
{
    public static void Main()
    {
        var runtime = new WebAssemblyRuntime();
        runtime.InvokeUnmarshalled<string, object>("initialize", "MyInteropClass");
    }

    [JSInvokable]
    public static int Add(int a, int b)
    {
        return MyInteropClass.Add(a, b);
    }
}

编译项目，生成 WebAssembly 文件。
在 HTML 文件中，引入 WebAssembly 文件，并调用 C# 方法：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
   <title>WebAssembly Interop Example</title>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/mono/6.12.0/mono.js"></script>
   <script>
        function initialize(className) {
            Module.mono_bindings_init("[WebAssembly.Browser.Sample] " + className);
        }

        function callAdd() {
            const a = parseInt(document.getElementById("inputA").value);
            const b = parseInt(document.getElementById("inputB").value);
            const result = Module.mono_bind_static_method("[WebAssembly.Browser.Sample] MyInteropClass:Add", a, b);
            document.getElementById("result").innerText = "Result: " + result;
        }
    </script>
</head>
<body>
    <h1>WebAssembly Interop Example</h1>
   <input type="number" id="inputA" placeholder="Enter a number" />
   <input type="number" id="inputB" placeholder="Enter another number" />
   <button onclick="callAdd()">Add</button>
    <p id="result"></p>
   <script src="WebAssembly.Browser.Sample.dll.js"></script>
</body>
</html>

现在，当你在浏览器中打开 HTML 文件时，你可以输入两个数字，然后点击 “Add” 按钮，调用 C# 方法计算结果，并显示在页面上。这就是如何在 WebAssembly 和 JavaScript 之间进行交互的基本示例。

0 赞

0 踩