javascript 调用WebAssembly的方法详解编程语言

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 并配置全局的环境变量 这个地方要FQ 而且下载速度很慢 慢慢等吧 大概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支持

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/18762.html

javascript 调用WebAssembly的方法详解编程语言

相关推荐

发表回复