至此安装完成。可以再尝试编译hello.c生成的文件如下，和官网一致。此时不能直接双击打开了，需要一个本地服务器来访问hello.html。
继续编译math.c，生成math.wasm。在前端调用math.wasm中的加法和乘法。
安装http服务器 npm install -g serve
cmd启动http服务命令: serve .
浏览器访问自己写的工程目录index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>
<div />
</h1>
<script>
/**
* @param {String} path wasm 文件路径
* @param {Object} imports 传递到 wasm 代码中的变量
*/
function loadWebAssembly (path, imports = {}) {
return fetch(path)
.then(response => response.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(\'./math.wasm\')
.then(instance => {
const add = instance.exports.add; //取出c里面的方法
const square = instance.exports.square; //取出c里面的方法
let span = document.createElement(\'span\');
let htmlStr = \'10 + 20 = \' + add(10, 20);
htmlStr += \'; 3 * 3 = \' + square(3);
span.innerHTML = htmlStr;
let div = document.getElementById(\'devTarget\');
div.appendChild(span);
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>
其中index.html中调用math.wasm中的加法和乘法，在页面显示出
:5000/Desktop/math/
参考文章链接：
https://www.cnblogs.com/jixiaohua/p/10424941.html
https://blog.csdn.net/wangx893175022/article/details/106209322/