WebAssembly 与 Rust 编程系列04 WebAssembly模块的加载和运行

最新推荐文章于 2025-03-26 00:23:00 发布

austindev

最新推荐文章于 2025-03-26 00:23:00 发布

阅读量451

点赞数

分类专栏： webdesign 文章标签： WebAssembly javascript rust

本文链接：https://blog.youkuaiyun.com/austindev/article/details/107092985

版权

webdesign 专栏收录该内容

7 篇文章

订阅专栏

WebAssembly 与 Rust 编程系列04 WebAssembly模块的加载和运行

About: 简介

前两篇文章中:
WebAssembly 与 Rust 编程系列02 WebAssembly 调试工具的安装及使用
 WebAssembly 与 Rust 编程系列03 手撕 WebAssembly 文本格式
我们手写了简单的wat代码,以及生成对应的wasm 二进制模块;

本篇文章主要演示下:如何在js中加载和使用这些模块;

这里我们只是用最简单示例,并没有多大工程参考意义,仅仅是演示WebAssembly相关概念;

wasm模块

针对本篇文章,我们特地写了 wasm_load_usage.wat,
主要是定义和导出了一个add函数
导入了js的console.log函数,并调用log

(module
  (import "console" "log" (func $log (param i32)))
  
  (func $add (param $lhs i32) (param $rhs i32) (result i32)
    get_local $lhs
    get_local $rhs
    i32.add)
  (export "add" (func $add))

  (func (export "wasmLog")
    i32.const 13
    call $log)
)

同之前一样,生成wasm模块

wat2wasm wasm_load_usage.wat -o wasm_load_usage.wasm

加载wasm模块

简单的index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Webassembly模块加载及运行</title>
  <
</head>
<body>
  
  <script type="text/javascript" src="index.js"></script></body>
</body>
</html>

对应的 index.js

let jsObject = {
  console: {
    log: function(arg) {
      console.log(arg);
    }
  }
};

fetch('wasm_load_usage.wasm')
.then(res =>
  res.arrayBuffer()
).then(bytes =>
  WebAssembly.instantiate(bytes, jsObject)
).then(results => {
  results.instance.exports.wasmLog();
});