之前在原生HTML用了WebAssembly,然而现实开发都是上框架的,因此尝试了下在Vue中调用一个比较复杂的C方法(是个加密方法,计算量还是挺大的)。
如果不用胶水代码,那写法和之前随笔中介绍的是一样的,但是在这个复杂代码运行时,报了“Memory access out of bounds”的错,研究了很久也没研究出解决方法,所以决定还是用胶水代码(ps:如果有小伙伴知道怎么解决的话,可以评论区或者私信告诉我哦~)
那么使用胶水代码的话,问题来了,在Vue里不能像html直接通过script标签引用并执行,应该怎么去实现呢?首先在用EmScripten编译时,需要加上这么一个参数:-s MODULARIZE=1
编译完成后,可以看到胶水代码的最后出现了
if (typeof exports === 'object' && typeof module === 'object')
module.exports = Module;
else if (typeof define === 'function' && define['amd'])
define([], function() { return Module; });
else if (typeof exports === 'object')
exports["Module"] = Module;
这其实就是将胶水代码中的Module对象导出了,注意这里需要引用的话得使用require
通常来说,如果是个简单的demo,在Vue里直接把调用方法写在methods里就好了(vue2,vue3是setup),但为了写接口,我这里把他写在外部ts/js里,不过写法是差不多的。下面上方法:
static async SM2(code:string):Promise<string>{
/**
* 国密SM2方法
*/
// 导入胶水代码中的Module
let Module = require('./SM2');
let moduleInstance:object = {};
// 实例化Module,这里注意异步的问题
await new Module().then(myModule => {
moduleInstance = myModule;
});
console.log(code);
// 使用cwrap方法执行加密函数,cwrap参数分别是(C语言对应函数名,函数返回数据类型,传入参数数据类型)
//@ts-ignore
let encode_input:function = moduleInstance.cwrap('encode_input', 'string', ['string']);
let res:string = encode_input(code);
// 使用一般方法执行加密函数
//@ts-ignore
// var ptr1 = moduleInstance.allocate(moduleInstance.intArrayFromString(code), moduleInstance.ALLOC_NORMAL);
// //@ts-ignore
// let res = moduleInstance.UTF8ToString(moduleInstance._encode_input(ptr1))
return res;
}
}
这里有几个需要注意的点:
- 刚刚提到的require
- 在胶水代码中其实可以看到Module的初始化是通过一个run()方法来执行的,这就会导致异步的问题,因此在实例化Module的时候,要async/await一下,不然后面的moduleInstance就会是一个空对象
- 胶水代码中引入.wasm文件默认位置是同目录,也就是fetch("xxx.wasm"),而对于Vue来说,项目运行时的这个同目录,其实是相当于index.html所在目录,也就是public下,因此.wasm文件也要放在public下
甚至有时候由于执行时机不同,还会找不到wasm文件,因此还是要再次提醒,一定要注意异步问题,这是胶水代码里最大的坑!