javascript - 单文件 WebAssembly html 演示

我在哪里可以找到一个最简单的单文件演示，显示 html 中 WebAssembly 的用法？

JavaScript 示例很简单:

<script>
function hw() { console.log("Hello, world."); }
</script>
<button onclick="hw()">HW</button>

是否有 WebAssembly 模拟？

我希望它具有类似于带有 wasm 二进制文件的硬编码字节缓冲区之类的东西，该缓冲区已加载并执行其一些微不足道的功能。这是我期望的概述:

<script>
function hw() {
    var wasm_code = [255, 0, 128, ..., whatever, ...];
    var magic = give_me_wasm(wasm_code);
    var x = magic.my_add(2,2);
    console.log("2 + 2 = ", x);
}
</script>
<button onclick="hw()">HW</button>

这样的demo可以做吗，一个简单的表格，可以粘贴到Developer Console，不用设置任何框架和工具就可以试用？

最佳答案

自己做的:

<script>
var wasm_base64;
var wasm_buffer;
var wasm;
var wasm_instance;
function hw() {
    wasm_base64 = "AGFzbQEAAAABBwFgAnx8AXwDAgEABwoBBm15X2FkZAAACgkBBwAgACABoAs=";
    wasm_buffer = Uint8Array.from(atob(wasm_base64), c => c.charCodeAt(0)).buffer;
    WebAssembly.compile(wasm_buffer).then(x => {
        wasm = x;
        wasm_instance = new WebAssembly.Instance(wasm);
        var x = wasm_instance.exports.my_add(2,2);
        console.log("2+2 = ",x);
    });
}
</script>
<button onclick="hw()">HW</button>

这是嵌入的 WebAssembly 文本表单( q.wat ):

(module
  (type (;0;) (func (param f64 f64) (result f64)))
  (func $myadd (type 0) (param f64 f64) (result f64)
    get_local 0
    get_local 1
    f64.add)
  (export "my_add" (func $myadd))
)

以下是生成 base64 缓冲区的命令行:

$ wat2wasm q.wat -o w.wasm
$ base64 -w0 w.wasm ;echo
AGFzbQEAAAABBwFgAnx8AXwDAgEABwoBBm15X2FkZAAACgkBBwAgACABoAs=

wasm 和 wasm_instance 对象可以使用开发者控制台进行探索。

在 Firefox 63.0b9 中检查。

关于javascript - 单文件 WebAssembly html 演示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52582367/