环境配置:
1.了解Emscripten和WebAssembly技术,提供Emscripten编译环境(Emscripten安装地址),在cmd中查看emcc是否可用验证环境是否创建成功。
2.搭建本地服务器,首先我们要到Node.js官网下载对应版本的安装包(Node.js下载地址);接着就是安装,和安装普通软件类似,直接下一步下一步就可以了;之后我们来验证node是否安装成功,Win+R输入cmd来调出控制台并输入node -v
和npm -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)