WebAssembly］WebAssembly 概念和在 js 中的使用--简单示例

最编程 2024-03-16 06:59:34

...

准备wasm二进制文件

这个文件可以在MDN一个简单的例子下载 simple.wasm。
或者将 WebAssembly 文本格式转换为 wasm：

首先创建 simple.wat文件，内容如下：

(module
  (func $i (import "imports" "imported_func") (param i32))
  (func (export "exported_func")
    i32.const 42
        call $i))

转.wasm二进制文件有以下方法：

插件转译：可以在vscode下载 WebAssembly 插件然后在文件内右键生成.wasm文件。
wabt转译工具：git地址，去地址克隆项目，然后根据readme.md文档步骤即可。
npm 上的wabt.js转译工具 ：npm上有wabt的网上版本，我感觉这个配置简单。wabt.js地址

npm install wabt

这个npm 自动带 wat2wasm（wat转wasm）程序和wasm2wat(wasm转wat)程序。

所以：
我们可以编写以下脚本命令：
在这里插入图片描述
执行示例：

npm run build 

npm run parse -- table.wasm -o table.wat

然后就可以得到wat或者wasm文件了。

使用

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Webassembly</title>
</head>

<body>

  <script>
    const importObject = {
      imports: {
        imported_func: (arg) => {
          console.log(arg, ' imported_func');
        }
      }
    }
    console.log(WebAssembly);
    WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject)
      .then((res) => {
        res.instance.exports.exported_func();
      })
    //  或者
    fetch("simple.wasm").then(res => res.arrayBuffer()).then((bytes) => WebAssembly.instantiate(bytes, importObject)).then((result) => {
      result.instance.exports.exported_func();
    })
  </script>
</body>

</html>

需要启用服务打个这个html才可以正常运行，vscode可以安装Live Server插件，右键该文件快速开启服务。

在这里插入图片描述

上一篇：配置服务器 SSH

下一篇： C++(1): std::vector usage-4.添加元素