微信小程序调用 WebAssembly 烹饪指南

我们都是在夜里崩溃过的俗人，所幸终会天亮。明天就是新的开始，我们会变得与昨天不同。

一、Rust 导出 wasm

参考 wasm-bindgen 官方指南 https://wasm.rust-lang.net.cn/wasm-bindgen/introduction.html

wasm-bindgen，这是一个 Rust 库和 CLI 工具，它可以促进 wasm 模块和 JavaScript 之间的高级交互。

1、创建一个 wasm 项目

# 使用模板生成
# cargo generate --git https://gitee.com/tgodfather/wasm-pack-template
cargo generate --git https://github.com/rustwasm/wasm-pack-template

2、添加 js-sys 依赖

cargo add js-sys 

3、修改 lib.rs

定义三个外部函数，它们分别对应于 JavaScript 中的 console.log、console.error 和 wx.showModal。通过使用 wasm_bindgen，这些函数可以在 Rust 代码中被调用，从而实现与 JavaScript 的交互。

#[wasm_bindgen]
extern "C" {#[wasm_bindgen(js_namespace = console)]fn log(s: &str);#[wasm_bindgen(js_namespace = console)]fn error(s: &str);#[wasm_bindgen(js_namespace = wx)]fn showModal(param: &Object);
}

使用 rust 分别调用这三个函数，导出为 wasm 函数，

#[wasm_bindgen]
pub fn rs_log() {log("log");
}#[wasm_bindgen]
pub fn rs_error() {log("error");
}#[wasm_bindgen]
pub fn rs_show_modal() {// 创建一个 JavaScript 对象let options = Object::new();// 设置对象的属性Reflect::set(&options,&JsValue::from_str("title"),&JsValue::from_str("提示"),).unwrap();Reflect::set(&options,&JsValue::from_str("content"),&JsValue::from_str("这是一个模态弹窗"),).unwrap();// 创建回调函数let success_callback = Closure::wrap(Box::new(|res: JsValue| {let confirm = Reflect::get(&res, &JsValue::from_str("confirm")).unwrap().as_bool().unwrap_or(false);let cancel = Reflect::get(&res, &JsValue::from_str("cancel")).unwrap().as_bool().unwrap_or(false);if confirm {log("用户点击确定");} else if cancel {log("用户点击取消");}}) as Box<dyn FnMut(_)>);// 将回调函数添加到对象中Reflect::set(&options,&JsValue::from_str("success"),success_callback.as_ref().unchecked_ref(),).unwrap();// 为了避免回调被回收，必须调用 `forget`success_callback.forget();// 调用 JavaScript 的 `showModal` 函数showModal(&options);
}

补充：小程序官方弹窗示例代码，

wx.showModal({title: '提示',content: '这是一个模态弹窗',success (res) {if (res.confirm) {console.log('用户点击确定')} else if (res.cancel) {console.log('用户点击取消')}}
})

4、编译打包 wasm

wasm-pack build --target web

可以看到在 pkg 目录下生成了我们需要用到的 mywasm_bg.wasm、mywasm.js 。

二、对应小程序相关改动（Rust）

对于微信小程序，直接编译打包后的包无法直接调用，所以还需要进行一些代码修改。

WXWebAssembly | 微信开放文档

1、新增目录

新增 workers 目录：与 pages 同级，创建 workers 目录，用于存放 .wasm 文件

workers 目录只存放 mywasm_bg.wasm，便于把.wasm打包进去，以及分包打包

新增 pages/worker 目录：用于进行打包文件的调用

pages/worker目录只存放 .js ，这个文件包含了一些调用 .wasm 文件的方法

2、修改 mywasm.js 胶水代码

#改动点1、注释原 __wbg_load 方法逻辑，替换使用以下代码async function __wbg_load(module, imports) {if (typeof Response === 'function' && module instanceof Response) {const bytes = await module.arrayBuffer();return await instantiateArrayBuffer(bytes, imports);} else {return await instantiateArrayBuffer(module, imports);}
}

# 改动点2、手动指定 WebAssembly 模块的路径// 手动指定 WebAssembly 模块的路径
const wasmModulePath = '/workers/mywasm_bg.wasm';async function instantiateArrayBuffer(binaryFile, imports) {return WXWebAssembly.instantiate(wasmModulePath, imports).then(function(instance) {return instance;}).catch(function(reason) {console.error('Failed to asynchronously prepare wasm: ' + reason);throw reason;});
}

# 改动点3、手动指定 WebAssembly 模块的路径if (typeof module_or_path === 'undefined') {// module_or_path = new URL('mywasm_bg.wasm',//   import.meta.url);module_or_path =  wasmModulePath;}if (typeof module_or_path === 'string' || (typeof Request === 'function' && module_or_path instanceof Request) || (typeof URL === 'function' && module_or_path instanceof URL)) {// 需要使用 wx.request 替代 fetch      // module_or_path = fetch(module_or_path);module_or_path =  wasmModulePath;}

3、调用 wasm

import init,{ rs_log ,rs_error,rs_show_modal}  from '../worker/mywasm.js';

  onLoad: async function () {try {await init();// 使用 wasmModule 中的导出函数rs_log();rs_error();rs_show_modal();} catch (e) {console.error('Failed to load WASM module:', e);}}

4、运行效果

从控制台日志输出可以看到，wasm 导出的函数运行成功。

三、C/C++  导出 wasm

1、创建一个 hellojs.cpp

#include <stdio.h>
#include <emscripten/emscripten.h>int main(int argc, char ** argv) {printf("Hello World\n");
}#ifdef __cplusplus
extern "C" {
#endifint EMSCRIPTEN_KEEPALIVE myFunction(int argc, char ** argv) {printf("我的函数已被调用\n");
}#ifdef __cplusplus
}
#endif

2、使用 emcc 编译打包

 # emcc -o hellojs.html hellojs.cpp -O3 -s WASM=1 -s NO_EXIT_RUNTIME=1 -s "EXTRA_EXPORTED_RUNTIME_METHODS=['ccall']" --shell-file html_template/shell_minimal.htmlemcc -o hellojs.html hellojs.cpp -O3 -s WASM=1 -s NO_EXIT_RUNTIME=1 -s "EXPORTED_RUNTIME_METHODS=['ccall']" --shell-file html_template/shell_minimal.html

成功生成我们所需要的 hellojs.js、hellojs.wasm 文件。 

四、对应小程序相关改动（C++）

1、新增目录

新增 workers 目录：与 pages 同级，创建 workers 目录，用于存放 .wasm 文件

workers 目录只存放 mywasm_bg.wasm，便于把.wasm打包进去，以及分包打包

新增 pages/worker 目录：用于进行打包文件的调用

pages/worker目录只存放 .js ，这个文件包含了一些调用 .wasm 文件的方法

2、修改 hellojs.js 胶水代码

# 改动1、在文件的最底部添加
module.exports = {Module: Module
}

# 改动2、注释代码
if(ENVIRONMENT_IS_WORKER) {// scriptDirectory=self.location.href}

# 改动3、修改instantiateArrayBuffer函数// function instantiateArrayBuffer(binaryFile, imports, receiver) {
//     return getBinaryPromise(binaryFile).then(binary=>WebAssembly.instantiate(binary, imports)).then(receiver, reason=> {
//             err(`failed to asynchronously prepare wasm: ${reason}`); abort(reason)
//         })
// }
function instantiateArrayBuffer(binaryFile, imports, receiver) {return WXWebAssembly.instantiate('/workers/hellojs.wasm', imports).then(function(instance) {return instance;}).then(receiver, function(reason) {err('failed to asynchronously prepare wasm: ' + reason);// Warn on some common problems.if (isFileURI(wasmBinaryFile)) {err('warning: Loading from a file URI (' + wasmBinaryFile + ') is not supported in most browsers. See https://emscripten.org/docs/getting_started/FAQ.html#how-do-i-run-a-local-webserver-for-testing-why-does-my-program-stall-in-downloading-or-preparing');}abort(reason);})
}

# 改动4、将js文件中的所有WebAssembly修改为WXWebAssemblyfunction abort(what) {Module["onAbort"]?.(what);what="Aborted("+what+")";err(what);ABORT=true;EXITSTATUS=1;what+=". Build with -sASSERTIONS for more info.";//var e=new WebAssembly.RuntimeError(what);var e=new WXWebAssembly.RuntimeError(what);throw e
}function instantiateAsync(binary, binaryFile, imports, callback) {if( !binary&&typeof WXWebAssembly.instantiateStreaming=="function" && !isDataURI(binaryFile)&& !isFileURI(binaryFile)&& !ENVIRONMENT_IS_NODE&&typeof fetch=="function") {return fetch(binaryFile, {credentials:"same-origin"}).then(response=> {var result=WXWebAssembly.instantiateStreaming(response, imports); return result.then(callback, function(reason) {err(`wasm streaming compile failed: ${reason}`); err("falling back to ArrayBuffer instantiation"); return instantiateArrayBuffer(binaryFile, imports, callback)})})
}return instantiateArrayBuffer(binaryFile, imports, callback)
}

3、调用 wasm

# 引入文件
const hellojs_wasm = require('../worker/hellojs');

onReady() {const moudule = hellojs_wasm.Module// moudule._myFunction(1,"");moudule.ccall("myFunction", // name of C functionnull, // return typenull, // argument typesnull,); // arguments},

4、运行效果

从控制台日志输出可以看到，wasm 导出的函数运行成功。 

五、参考资料

基于 Rust 的 Wasm 开发探索与实践_rust wasm-CSDN博客

基于 Rust 的 Wasm/Wasi 开发探索与实践（Linux开发环境）_wasi安装-CSDN博客

基于 Emscripten + OpenXLSX 实现浏览器操作 Excel_使用webassembly在浏览器端操作excel-CSDN博客