WebAssembly在Vue中使用

最新推荐文章于 2024-05-16 14:53:02 发布

火木水树

最新推荐文章于 2024-05-16 14:53:02 发布

阅读量2.4k

点赞数

分类专栏：前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_50936522/article/details/126223622

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了在Vue项目中如何处理WebAssembly的胶水代码，特别是当遇到内存访问越界错误时，如何通过引入胶水代码和处理异步问题来调用复杂的C加密方法。重点强调了Vue中模块导入、异步加载WASM文件以及cwrap方法的使用。同时，指出了WASM文件放置路径和异步初始化Module对象的关键点。

摘要由CSDN通过智能技术生成

之前在原生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文件，因此还是要再次提醒，一定要注意异步问题，这是胶水代码里最大的坑！