javascript - 一个单一文件的 WebAssembly html 演示

Question

我在哪里可以找到最简单的单文件演示，以 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里试试？

Answer 1

我自己做的:

<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 对象可以使用 Developer Console 进行探索。

在 Firefox 63.0b9 中检查。