17370845950

WebAssembly中C++与JavaScript交互需四步闭环：导出函数（用EMSCRIPTEN_KEEPALIVE和extern "C"）、JS调用（等待Module就绪）、数据传递（手动管理字符串/数组内存）、C++调JS（用val/callback）。

WebAssembly（Wasm）让C++代码能在浏览器中高效运行，关键在于导出函数供JavaScript调用，同时也能从C++中调用JS函数。核心不在于“编译完就能用”，而在于明确接口、正确绑定、处理数据类型转换。

C++函数导出：用EMSCRIPTEN宏声明

Emscripten提供了简单直接的导出机制。默认情况下，C++函数不会自动暴露给JS，必须显式标记：

• 使用EMSCRIPTEN_KEEPALIVE宏（推荐），它会防止函数被链接器优化掉，并自动注册到Module对象上
• 或通过EXPORTED_FUNCTIONS在编译时指定（需配合-s EXPORTED_FUNCTIONS='["_add","_multiply"]'）

示例：

#include 
extern "C" {
EMSCRIPTEN_KEEPALIVE
int add(int a, int b) {
return a + b;
}
EMSCRIPTEN_KEEPALIVE
float multiply(float x, float y) {
return x * y;
}
}

注意：C++需用extern "C"禁用名称修饰（name mangling），否则JS找不到函数名；导出函数名前带下划线（如_add），这是Emscripten默认行为。

JS调用C++函数：等加载完成再执行

Wasm模块是异步加载的，不能直接调用Module._add(1,2)——除非确认Module已就绪。可靠方式是：

• 监听Module.onRuntimeInitialized回调
• 或使用Module.then(() => { ... })（新版Emscripten生成的JS胶水代码支持Promise）
• 避免在中立即调用，尤其未设置MODULARIZE=1时

示例：

Module.onRuntimeInitialized = () => {
  console.log(Module._add(5, 3)); // 输出 8
  console.log(Module._multiply(2.5, 4.0)); // 输出 10
};

传递复杂数据：字符串与内存操作

基本类型（int/float）可直传，但字符串、数组等需手动管理内存：

• JS → C++ 字符串：用Module.lengthBytesUTF8(str) + 1申请空间，再用Module.stringToUTF8(str, ptr, len)写入
• C++ → JS 字符串：C++中用malloc分配内存并写入UTF-8字节，返回指针；JS用Module.UTF8ToString(ptr)解码
• 数组传参：JS侧用Module._malloc(bytes)分配，new Uint8Array(Module.HEAPU8.buffer, ptr, len)写入，C++按指针访问

小技巧：频繁交互建议复用内存块，避免反复malloc/free；也可用ccall/cwrap封装（Emscripten提供高级JS API）：

const add = Module.cwrap('add', 'number', ['number', 'number']);
console.log(add(10, 20)); // 更简洁，自动处理类型

从C++调用JS函数：用val和callback

新版Emscripten（≥2.0.23）支持val和callback机制，可在C++中安全调用JS：

• 用val::global("console").call("log", val("Hello from C++"));调JS全局方法
• 用val::module_property("myJsFunction").call("(2, 3)");调自定义JS函数
• 需在编译时加-s EXPORTED_RUNTIME_METHODS='["ccall","cwrap","val"]'启用

注意：JS函数必须在C++调用前已定义（通常放在Module.onRuntimeInitialized之后或pre-js中）。

基本上就这些。导出+调用+数据桥接+反向调用，四步闭环。不复杂但容易忽略细节——比如忘记extern "C"、没等runtime初始化、字符串没手动释放内存。跑通一次，后续模式就固定了。