微信小程序调用 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" {
#endif
 
int 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.html
 
emcc -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++）