参考网上列子
https://www.cnblogs.com/y-y-y-y/p/9897154.html?ivk_sa=1024320u
本人使用vue的方式去实现
奈何执行到add方式提示add is not a function,百思不得其解
最好锁定在于instance.exports._add获取方法时是不需要下划线,改成instance.exports.add就毫无问题
Vue核心代码如下
export default {
name: "App",
data() {
return {
size: ""
};
},
mounted() {
this.loadWebAssembly("./wasm/math.wasm").then(instance => {
let add = instance.exports.add; //取出c里面的方法
let 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)));
});
},
methods: {
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);
});
}
}
};