记录vue项目中如何引入wasm文件
在项目中需要 大地坐标和经纬度之间互相转换, 基于已有的 cpp 代码,想通过 js 直接调用cpp 的函数
项目背景
在项目中需要 大地坐标和经纬度之间互相转换, 基于已有的 cpp 代码,想通过 js 直接调用cpp 的函数。
- 前期准备
首先需要执行命令将 .cpp 文件编译出 .wasm文件 及 .js 文件
emcc main.cpp -o index.html -s EXPORTED_FUNCTIONS="['_setSeed','_mtrandom']" -s WASM=1
在上面执行的代码中, EXPORTED_FUNCTIONS 这个变量是用来指定你想要在 main.cpp 中暴露提供给 js调用的函数名称, 比如你想要在 .cpp 文件中 暴露调用的方法叫 compareMax,那么需要你在 .cpp 文件中定义了这个方法。
否则你在vue文件中引入之后调用会报错。
- 编译之后 有三个文件, 分别是 .wasm(必须), .html(可选), .js(必须)
在编译好的js文件中,我们可以看到类似于下面这种结构
var asm = createWasm();
/** @type {function(...*):?} */
var ___wasm_call_ctors = Module["___wasm_call_ctors"] = createExportWrapper("__wasm_call_ctors");
/** @type {function(...*):?} */
var _exchangeCoordinate = Module["_exchangeCoordinate"] = createExportWrapper("exchangeCoordinate");
/** @type {function(...*):?} */
var _getXCoordinate = Module["_getXCoordinate"] = createExportWrapper("getXCoordinate");
/** @type {function(...*):?} */
var _getYCoordinate = Module["_getYCoordinate"] = createExportWrapper("getYCoordinate");
/** @type {function(...*):?} */
var _getLoCoordinate = Module["_getLoCoordinate"] = createExportWrapper("getLoCoordinate");
/** @type {function(...*):?} */
var _getLaCoordinate = Module["_getLaCoordinate"] = createExportWrapper("getLaCoordinate");
/** @type {function(...*):?} */
var ___errno_location = Module["___errno_location"] = createExportWrapper("__errno_location");
/** @type {function(...*):?} */
var ___stdio_exit = Module["___stdio_exit"] = createExportWrapper("__stdio_exit");
虽然在设置了Module 对象中的各种方法,但是并没有提供导出的功能,所以我们需要在这个文件的代码最下面,添加 一段代码
......
run();
// 以上为文件已有代码
export default Module // 新增代码片段
这样的话就提供了一个对象供调用
- 编译出的文件除了js还有wasm文件,这个wasm文件是提供js文件调用的。
由于webpack不能处理.wasm后缀的文件,所以我们需要将 .wasm文件放在 public/js 中,方便项目打包后,js文件能够访问到 .wasm文件。
在 vue 项目中引用。
通过下面的方式引入.js 文件
import wasmModule from "@/utils/index.js"; //模块名称没有固定
- 在 methods 中调用方式如下
必须使用异步方式
调用的时候,在js中需要使用 下划线+编译命令执行时设置导出的某个函数名: 例如 _setSeed
async functionName (){
const instance = await wasmModule;
instance._exchangeCoordinate(params1,params2,...otherparams)
}
上面的 _exchangeCoordinate 就是调用了 .cpp文件 中的 exchangeCoordinate 函数。
以上就是处理如何在vue项目中调用 cpp提供的函数。
分割线
我之前在网上找了很多类似的内容,发现类似以下的内容
async function waitwasm() {
const wasmmodule = await OriginalVueWasm;
wasmmodule.default.onRuntimeInitialized = () => {
Vue.prototype.$wasm = wasmmodule.default;
//new Vue ...
}
}
(async () => {
waitwasm()
})()
我也按照这样引入的,但是我把 wasmmodule 打印出来之后,他包含一个 default 属性,这个属性包含了很多方法,包括了要导出的模块,但是我并没有发现其中有onRuntimeInitialized事件。而且通过 this.$wams 去访问里面的 _funtionName 会报错。
有任何问题的话,欢迎在评论区交流讨论~~~~~~~~~~~~~~~~
更多推荐
所有评论(0)