webassembly c#如何與JavaScript交互

小樊
88
2024-09-14 14:16:37

WebAssembly 是一種在瀏覽器中運(yùn)行的二進(jìn)制代碼格式，它可以讓你在瀏覽器中運(yùn)行 C# 代碼。要實(shí)現(xiàn) WebAssembly 與 JavaScript 之間的交互，你需要使用 JavaScript 調(diào)用 WebAssembly 函數(shù)，或者在 WebAssembly 中調(diào)用 JavaScript 函數(shù)。

以下是一個(gè)簡(jiǎn)單的示例，展示了如何在 C# 中創(chuàng)建一個(gè) WebAssembly 模塊，并在 JavaScript 中調(diào)用它：

  1. 首先，創(chuàng)建一個(gè) C# 項(xiàng)目，并安裝 Microsoft.NET.Sdk.Web SDK。在項(xiàng)目文件中添加以下內(nèi)容：
 <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>
  1. 在項(xiàng)目中創(chuàng)建一個(gè) C# 類，并添加一個(gè)簡(jiǎn)單的方法，例如：
public class MyInteropClass
{
    public static int Add(int a, int b)
    {
        return a + b;
    }
}
  1. 在 Program.cs 文件中，將 C# 方法導(dǎo)出為 JavaScript 函數(shù)：
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);
    }
}

  1. 編譯項(xiàng)目，生成 WebAssembly 文件。

  2. 在 HTML 文件中，引入 WebAssembly 文件，并調(diào)用 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>

現(xiàn)在，當(dāng)你在瀏覽器中打開 HTML 文件時(shí)，你可以輸入兩個(gè)數(shù)字，然后點(diǎn)擊 “Add” 按鈕，調(diào)用 C# 方法計(jì)算結(jié)果，并顯示在頁(yè)面上。這就是如何在 WebAssembly 和 JavaScript 之間進(jìn)行交互的基本示例。

0 踩