javascript 调用WebAssembly的方法
1 windows下安装emscripten
# 1.克隆emsdk git clone https://github.com/juj/emsdk.git # 2.进入emsdk文件夹 cd emsdk # 3.更新emsdk 这里使用是git所以运行时会提示使用"git pull" ./emsdk update git pull # 4.安装最新的emsdk 并配置全局的环境变量 这个地方要翻墙 而且下载速度很慢 慢慢等吧 大概30分钟 ./emsdk install --global latest # 5.激活 ./emsdk activate latest # 6.应用环境变量(这个地方要注意 用cmd打开目录 执行 每次执行emcc 都要执行一下 ./emsdk_env.bat
emcc math.c -Os -s WASM=1 -s SIDE_MODULE=1 -o math.wasm
int add (int x, int y) { return x + y; } int square (int x) { return x * x; }
c语言代码如上
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h1> </h1> <script> /** * @param {String} path wasm 文件路径 * @param {Object} imports 传递到 wasm 代码中的变量 */ function loadWebAssembly (path, imports = {}) { return fetch(path) // 加载文件 .then(response => response.arrayBuffer()) // 转成 ArrayBuffer .then(buffer => WebAssembly.compile(buffer)) .then(module => { imports.env = imports.env || {} // 开辟内存空间 imports.env.memoryBase = imports.env.memoryBase || 0 if (!imports.env.memory) { imports.env.memory = new WebAssembly.Memory({ initial: 256 }) } // 创建变量映射表 imports.env.tableBase = imports.env.tableBase || 0 if (!imports.env.table) { // 在 MVP 版本中 element 只能是 "anyfunc" imports.env.table = new WebAssembly.Table({ initial: 0, element: 'anyfunc' }) } // 创建 WebAssembly 实例 return new WebAssembly.Instance(module, imports) }) } //调用 loadWebAssembly('/moban/math.wasm') .then(instance => { const add = instance.exports.add//取出c里面的方法 const square = instance.exports.square//取出c里面的方法 console.log('10 + 20 =', add(10, 20)) console.log('3*3 =', square(3)) console.log('(2 + 5)*2 =', square(add(2 + 5))) }) </script> </body> </html>
经过验证微信H5支持