使用 WXWebAssembly

January 23, 2022

之前看文档发现微信小程序有一个 WXWebAssembly,可以算是「小程序版」的 WebAssembly(就不能完全和标准一样么🤷‍♂️),微信官方文档写的太简略了,今天花时间看了一下要怎么集成进去

操作流水账

首先编译一个 WebAssembly 模块出来,我基于 Rust 打包一个出来,可以参考 Compiling from Rust to WebAssembly

# 安装 wasm-pack
$ cargo install wasm-pack
# 初始化一个项目
$ cargo new --lib hello-wasm

src/lib.rs 代码如下:

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
extern {
    pub fn alert(s: &str);
}

#[wasm_bindgen]
pub fn greet(name: &str) {
    alert(&format!("Hello, {}!", name));
}

修改 Cargo.toml

[package]
name = "hello-wasm"
version = "0.1.0"
edition = "2021"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[lib]
crate-type = ["cdylib"]

[dependencies]
wasm-bindgen = "0.2"

编译出 wasm 模块:

$ wasm-pack build --target web

然后我们就可以看到 pkg 目录下有

.
├── hello_wasm.d.ts
├── hello_wasm.js
├── hello_wasm_bg.wasm
├── hello_wasm_bg.wasm.d.ts
└── package.json

我们需要 hello_wasm.jshello_wasm_bg.wasmhello_wasm.js 是胶水层,负责把转换 js 变量转换,wasm 输出转换为 js 变量。

因为输出产物是供 Web 使用的,小程序引入 hello_wasm.js,自然会报错,我们需要对 hello_wasm.js 做一些更改,主要改动是引入 TextEncoderTextDecoder(小程序中没有,我找了一个极简的实现,但是与标准有所出入,可能会存在一些兼容性问题,但是这足够跑通本文的例子了),把 WebAssembly 改成 WXWebAssembly,以及移除一些无用代码,更改如下:


 let wasm;
 
+function TextEncoder() {}
+
+TextEncoder.prototype.encode = function (string) {
+  var octets = []
+  var length = string.length
+  var i = 0
+  while (i < length) {
+    var codePoint = string.codePointAt(i)
+    var c = 0
+    var bits = 0
+    if (codePoint <= 0x0000007f) {
+      c = 0
+      bits = 0x00
+    } else if (codePoint <= 0x000007ff) {
+      c = 6
+      bits = 0xc0
+    } else if (codePoint <= 0x0000ffff) {
+      c = 12
+      bits = 0xe0
+    } else if (codePoint <= 0x001fffff) {
+      c = 18
+      bits = 0xf0
+    }
+    octets.push(bits | (codePoint >> c))
+    c -= 6
+    while (c >= 0) {
+      octets.push(0x80 | ((codePoint >> c) & 0x3f))
+      c -= 6
+    }
+    i += codePoint >= 0x10000 ? 2 : 1
+  }
+  return octets
+}
+
+function TextDecoder() {}
+
+TextDecoder.prototype.decode = function (octets) {
+  if (octets == null) {
+    return
+  }
+
+  var string = ''
+  var i = 0
+  while (i < octets.length) {
+    var octet = octets[i]
+    var bytesNeeded = 0
+    var codePoint = 0
+    if (octet <= 0x7f) {
+      bytesNeeded = 0
+      codePoint = octet & 0xff
+    } else if (octet <= 0xdf) {
+      bytesNeeded = 1
+      codePoint = octet & 0x1f
+    } else if (octet <= 0xef) {
+      bytesNeeded = 2
+      codePoint = octet & 0x0f
+    } else if (octet <= 0xf4) {
+      bytesNeeded = 3
+      codePoint = octet & 0x07
+    }
+    if (octets.length - i - bytesNeeded > 0) {
+      var k = 0
+      while (k < bytesNeeded) {
+        octet = octets[i + k + 1]
+        codePoint = (codePoint << 6) | (octet & 0x3f)
+        k += 1
+      }
+    } else {
+      codePoint = 0xfffd
+      bytesNeeded = octets.length - i
+    }
+    string += String.fromCodePoint(codePoint)
+    i += bytesNeeded + 1
+  }
+  return string
+}
+
 let cachedTextDecoder = new TextDecoder('utf-8', { ignoreBOM: true, fatal: true });
 
 cachedTextDecoder.decode();
 
 let cachegetUint8Memory0 = null;
 function getUint8Memory0() {
     if (cachegetUint8Memory0 === null || cachegetUint8Memory0.buffer !== wasm.memory.buffer) {
         cachegetUint8Memory0 = new Uint8Array(wasm.memory.buffer);
     }
     return cachegetUint8Memory0;
 }
 
 function getStringFromWasm0(ptr, len) {
     return cachedTextDecoder.decode(getUint8Memory0().subarray(ptr, ptr + len));
 }
 
 let WASM_VECTOR_LEN = 0;
 
 let cachedTextEncoder = new TextEncoder('utf-8');
 
 const encodeString = (typeof cachedTextEncoder.encodeInto === 'function'
     ? function (arg, view) {
     return cachedTextEncoder.encodeInto(arg, view);
 }
     : function (arg, view) {
     const buf = cachedTextEncoder.encode(arg);
     view.set(buf);
     return {
         read: arg.length,
         written: buf.length
     };
 });
 
 function passStringToWasm0(arg, malloc, realloc) {
 
     if (realloc === undefined) {
         const buf = cachedTextEncoder.encode(arg);
         const ptr = malloc(buf.length);
         getUint8Memory0().subarray(ptr, ptr + buf.length).set(buf);
         WASM_VECTOR_LEN = buf.length;
         return ptr;
     }
 
     let len = arg.length;
     let ptr = malloc(len);
 
     const mem = getUint8Memory0();
 
     let offset = 0;
 
     for (; offset < len; offset++) {
         const code = arg.charCodeAt(offset);
         if (code > 0x7F) break;
         mem[ptr + offset] = code;
     }
 
     if (offset !== len) {
         if (offset !== 0) {
             arg = arg.slice(offset);
         }
         ptr = realloc(ptr, len, len = offset + arg.length * 3);
         const view = getUint8Memory0().subarray(ptr + offset, ptr + len);
         const ret = encodeString(arg, view);
 
         offset += ret.written;
     }
 
     WASM_VECTOR_LEN = offset;
     return ptr;
 }
 /**
 * @param {string} name
 */
 export function greet(name) {
     var ptr0 = passStringToWasm0(name, wasm.__wbindgen_malloc, wasm.__wbindgen_realloc);
     var len0 = WASM_VECTOR_LEN;
     wasm.greet(ptr0, len0);
 }
 
 async function load(module, imports) {
-    if (typeof Response === 'function' && module instanceof Response) {
-        if (typeof WebAssembly.instantiateStreaming === 'function') {
-            try {
-                return await WebAssembly.instantiateStreaming(module, imports);
-
-            } catch (e) {
-                if (module.headers.get('Content-Type') != 'application/wasm') {
-                    console.warn("`WebAssembly.instantiateStreaming` failed because your server does not serve wasm with `application/wasm` MIME type. Falling back to `WebAssembly.instantiate` which is slower. Original error:\n", e);
-
-                } else {
-                    throw e;
-                }
-            }
-        }
-
-        const bytes = await module.arrayBuffer();
-        return await WebAssembly.instantiate(bytes, imports);
+  const instance = await WXWebAssembly.instantiate(module, imports);
 
-    } else {
-        const instance = await WebAssembly.instantiate(module, imports);
-
-        if (instance instanceof WebAssembly.Instance) {
-            return { instance, module };
-
-        } else {
-            return instance;
-        }
-    }
+  return instance;
 }
 
 async function init(input) {
-    if (typeof input === 'undefined') {
-        input = new URL('hello_wasm_bg.wasm', import.meta.url);
-    }
     const imports = {};
     imports.wbg = {};
     imports.wbg.__wbg_log_ce93870e50a20a29 = function(arg0, arg1) {
         console.log(getStringFromWasm0(arg0, arg1));
     };
 
-    if (typeof input === 'string' || (typeof Request === 'function' && input instanceof Request) || (typeof URL === 'function' && input instanceof URL)) {
-        input = fetch(input);
-    }
-
-
-
-    const { instance, module } = await load(await input, imports);
+    const { instance, module } = await load(input, imports);
 
     wasm = instance.exports;
     init.__wbindgen_wasm_module = module;
 
     return wasm;
 }
 
 export default init;

然后在小程序中使用,成功:

import init, { greet } from './hello_wasm'

// 填写 wasm 的绝对路径
await init('/hello_wasm.wasm')
greet()

参考

  1. Compiling from Rust to WebAssembly
  2. TextEncoderTextDecoder.js
  3. FastestSmallestTextEncoderDecoder
  4. WXWebAssembly
# JavaScript
# 小程序
知识共享许可协议
本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。
© 2015 - 2022 zhuscat
Hosted on Vercel