当前位置：首页 > news >正文

Qt6.8.2中JavaScript调用WebAssembly的js文件＜3＞

news 来源：原创 2025/5/22 15:44:58

前两个章节都介绍了如何传递int类型的参数，今天来为大家分享，如何让JavaScript调用胶水代码中字符串类型参数。

功能介绍

开发环境：win11 + Qt6.8.2 + WebAssembly3.1.56

在进行字符串操作时，我尝试了以下几种方式。

1：EMSCRIPTEN_KEEPALIVE

在前一章节中进行int类型参数传递时，就使用的这种方式。

采用这种方式的优点：

当你只需要将C++函数暴露给JavaScript调用，且不涉及复杂的类型转换和对象绑定，EMSCRIPTEN_KEEPALIVE是一种非常简单的方式。

只需要在函数声明前加上该宏，Emscripten编译器就会确保该函数在编译后的WebAssembly模块中不会被优化掉，从而可以在JavaScript中通过module._functionName方式调用。

那么采用这种方式怎么传递字符串类型呢？

我尝试采用std::string方式进行参数传递，比如：

extern "C" EMSCRIPTEN_KEEPALIVE void recordString2(std::string ss1){
    qDebug() << "recordString2";
}

在html中采用module._recordString2("Hello WebAssembly");方式调用。

很遗憾，浏览器直接崩溃了，抛出了异常，如图所示：

后来查询资料大多数是这样说的，网上资料建议：

在传递参数和返回值时，需要手动进行类型转换。将JavaScript字符串传递给C++函数时，需要将JavaScript字符串转为C风格的字符串（const char*），例如：

const str = "Hello";
const strPtr = module._malloc(str.length + 1);
module.stringToUTF8(str, strPtr, str.length + 1);
module._recordString2(strPtr);
module._free(strPtr);

在浏览器中运行后发现，也是直接崩溃，错误，如图所示：

我很是不明白，"_malloc"函数我明明在胶水代码中能找到，就在"_recordString2"我这个导出函数的下面，但是为什么无法使用呢？

后来，查资料说是，想要查看module中能使用哪些函数时，只需要在浏览器中输出module这个对象。果真，将module这个对象输出到控制台后，只有我写的那些导出函数，找不到"_malloc"以及"_free"。

结论：无论参数是：const char*或者是std::string类型，使用EMSCRIPTEN_KEEPALIVE来调用，都被pass掉了。

不知道大家还有没有可以成功方法，留言告诉我。

2：EMSCRIPTEN_BINDINGS

EMSCRIPTEN_BINDINGS可以自动处理C++和JavaScript之间的数据类型转换。

例如：C++中的std::string可以自动转换为JavaScript中的字符串，std::vector可以转换为JavaScript数组，大大简化了参数传递和返回值的过程。

C++代码调用：

#include <emscripten/bind.h>

std::string processString(const std::string& input){
    return "Process:" + input + "(length:" + std::to_string(input.size()) + ")";
}

EMSCRIPTEN_BINDINGS(myModule) {
    emscripten::function("processString", &processString);
}

在Html中的调用，如下

UseMode_Windowless_entry().then(function(module){
		console.log('UseMode_Windowless_entry().then(function(module)');
		const result = module.processString("Hello WebAssembly");
        console.log(result);
	}).catch(function(error){	
			console.error('UseMode_Windowless_entry().then()出错:', error);
	}
);

启动python服务后，发现可以使用，能够在控制台输出processString中的内容。

结论：当前调用方式，可行！

不过使用该方式，也有一定的缺点：

1：性能开销较大

自动类型转换和对象绑定会带来一定的性能开销。

在进行数据传递和函数调用时，需要进行额外的处理，这可能会影响程序的性能，尤其是在对性能要求极高的场景下。

2：学习成本较高

EMSCRIPTEN_BINDINGS使用了Emscripten特定的宏和语法，对于不熟悉Emscripten的开发者来说，需要花费一定的时间来学习和掌握这些内容。

3：编译时间长

由于需要处理复杂的绑定逻辑，使用EMSCRIPTEN_BINDINGS会增加编译时间，尤其是在项目规模较大时，编译时间的增加会比较明显。

目前我只学会了这两种方式，等我以后再学会了新的方法，再和大家分享~

我是糯诺诺米团，一名C++开发程序媛~