JS调用C层接口(webAssembly技术,环境配置到代码实现)

环境配置:

1.了解Emscripten和WebAssembly技术,提供Emscripten编译环境(Emscripten安装地址),在cmd中查看emcc是否可用验证环境是否创建成功。

2.搭建本地服务器,首先我们要到Node.js官网下载对应版本的安装包(Node.js下载地址);接着就是安装,和安装普通软件类似,直接下一步下一步就可以了;之后我们来验证node是否安装成功,Win+R输入cmd来调出控制台并输入node -vnpm -v来查看node版本和npm(包管理工具)版本;最后执行如下命令便可以完成本地服务器的搭建。

npm install -g serve
serve .

完成上述的环境搭建,便可以进行代码测试。

测试用例:

首先编写html和c文件;接着将c文件编译成wasm文件;最后便可以完成js对c的调用。具体操作如下:

1.编写ceshi.html文件

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Compile C to WebAssembly</title>
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="apple-touch-fullscreen" content="yes" />
  <meta name="format-detection" content="telephone=no, email=no" />
  <script src="loader.js"></script>
</head>

<body>
  <h1>Compile C to WebAssembly</h1>
  <p>The test result can be found in console.</p>

  <script>
    loadWebAssembly("math.wasm")
      .then(instance => {
        const square = instance.exports._square

        console.log('2^2 =', square(2))
        console.log('3^2 =', square(3))
        console.log('(2 + 5)^2 =', square(2 + 5))
      })
  </script>
</body>
</html>


2.编写math.c文件

int square (int x) {
  return x * x;
}

3.将math.c编译成math.wasm文件

emcc math.c -Os -s WASM=1 -s SIDE_MODULE=1 -o math.wasm
4.启动本地服务器,在浏览器中输入本地服务器的地址。(注意: 在本地直接点击html文件是以文件方式打开会报错,必须使用http协议的方式打开;同时必须保证浏览器支持webassembly

猜你喜欢

转载自blog.csdn.net/pkx1993/article/details/79550180