HTML5如何借助WebAssembly模块交互取数据_HTML5WASM取数法【罗列】_技术教程

WebAssembly模块需导出函数供JavaScript调用，关键在于正确编译导出（如Rust加#[no_mangle]和pub extern "C"，Emscripten加EXPORTED_FUNCTIONS）、参数限基础类型、字符串通过指针+长度在内存中传递，并用TextDecoder解析UTF-8字节序列；网络请求须由JS提供回调函数（如js_fetch）注入WASM，WASM调用后JS将响应写入其内存并通知完成，全程依赖回调驱动，避免轮询。

WebAssembly 模块如何导出函数供 JavaScript 调用

WASM 本身不直接操作 DOM 或发起网络请求，必须靠 JS 桥接。关键第一步是让编译后的 WASM 模块把需要的数据获取逻辑封装成可调用的函数，并正确导出。

常见错误：C/C++/Rust 编译时未用 --export-dynamic（Emscripten）或 #[no_mangle] + pub extern "C"（Rust），导致 JS 中 instance.exports.my_func 报 undefined。

Rust 示例中必须加 #[no_mangle] 和 pub extern "C"，否则符号被 mangling，JS 找不到
Emscripten 编译需加 -s EXPORTED_FUNCTIONS='["_get_data"]'，且函数名带下划线前缀
导出函数参数只能是基础类型（i32, f64 等），字符串需传指针+长度，由 JS 在 WASM 内存中读写

JavaScript 如何从 WASM 内存读取返回的字符串数据

WASM 没有原生字符串类型，所有文本都存在线性内存（WebAssembly.Memory）里，JS 必须手动解析字节序列。这是最容易出错的环节。

典型现象：JS 拿到一个 i32 地址，直接 String.fromCharCode

(...) 出乱码，或读越界崩溃。

先用 instance.exports.get_data_ptr() 获取字符串首地址（i32）
再用 instance.exports.get_data_len() 获取有效长度（不能依赖 \0 终止）
通过 new Uint8Array(memory.buffer, ptr, len) 构造视图，再转成字符串：new TextDecoder().decode(view)
避免直接用 String.fromCharCode(...) —— 它不处理 UTF-8 多字节编码

如何在 WASM 中安全发起 HTTP 请求并回传结果

WASM 标准不包含网络能力，所谓“WASM 发起请求”本质是 JS 提供回调函数给 WASM，由 WASM 调用 JS 导出的函数触发 fetch，再把结果写回 WASM 内存。

错误做法：在 C/Rust 里硬写 curl 或 fetch，编译会失败或运行时报 unresolved import。

JS 加载 WASM 时，通过 imports 传入一个对象，例如：{ env: { js_fetch: (ptr, len) => { /* fetch 后写内存 */ } } }
Rust 中声明：extern "C" { fn js_fetch(ptr: i32, len: i32); }，然后在 Rust 函数里调用它
fetch 成功后，JS 必须把响应体写入 WASM 内存（如用 Uint8Array 视图），再调用 WASM 的“通知完成”函数（如 on_fetch_done）
不要让 WASM 主动轮询“是否完成”，应使用回调驱动，否则阻塞主线程或陷入死循环

const wasmBytes = await fetch('data.wasm').then(r => r.arrayBuffer());
const wasmModule = await WebAssembly.compile(wasmBytes);
const wasmInstance = await WebAssembly.instantiate(wasmModule, {
  env: {
    js_fetch: (ptr, len) => {
      fetch('/api/data')
        .then(r => r.arrayBuffer())
        .then(buf => {
          const view = new Uint8Array(wasmInstance.exports.memory.buffer);
          const data = new Uint8Array(buf);
          view.set(data, ptr);
          wasmInstance.exports.on_fetch_done(data.length);
        });
    }
  }
});

内存管理、字符串编码、跨语言调用约定——这三处任一出错都会导致静默失败或崩溃。别假设“编译过了就能跑”，务必逐层验证：WASM 函数能否调用 → 内存地址是否有效 → 字节序列是否 UTF-8 完整 → JS 回调是否被正确注册并触发。