c++怎么用WebAssembly将c++代码运行在浏览器中_C++编译为WASM实现网页端运行方法

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

c++怎么用WebAssembly将c++代码运行在浏览器中_C++编译为WASM实现网页端运行方法

2025-11-19

浏览次数：次

返回列表

使用WebAssembly可在浏览器运行C++代码。先安装Emscripten工具链，编写含EMSCRIPTEN_KEEPALIVE的C++函数并用emcc编译为WASM，生成.js胶水文件和.wasm二进制文件，再通过HTML加载output.js，利用Module.ccall或cwrap调用导出函数，需启动本地服务器查看结果。

c++怎么用webassembly将c++代码运行在浏览器中_c++编译为wasm实现网页端运行方法

要在浏览器中运行 C++ 代码，可以使用 WebAssembly（简称 WASM）。WebAssembly 是一种低级字节码格式，能让 C++、Rust 等语言编写的代码在现代浏览器中高效运行。下面介绍如何将 C++ 代码编译为 WebAssembly 并在网页中调用。

1. 安装 Emscripten 工具链

要将 C++ 编译为 WASM，需要使用 Emscripten，它是一个完整的工具链，基于 LLVM，能将 C/C++ 转为 WebAssembly。

安装步骤如下：

克隆 Emscripten 仓库：git clone https://github.com/emscripten-core/emsdk.git
进入目录并安装：cd emsdk && ./emsdk install latest && ./emsdk activate latest
激活环境变量：source ./emsdk_env.sh（Linux/macOS）或运行 emsdk_env.bat（Windows）

完成安装后，emcc 命令即可使用。

2. 编写简单的 C++ 代码

创建一个名为 hello.cpp 的文件：

#include
#include

extern "C" {
EMSCRIPTEN_KEEPALIVE
int add(int a, int b) {
return a + b;
}
}

int main() {
std::cout return 0;
}

说明：

extern "C" 防止 C++ 名称修饰，便于 J*aScript 调用。
EMSCRIPTEN_KEEPALIVE 确保函数不会被编译器优化掉。
函数 add 可被 JS 调用。

3. 使用 emcc 编译为 WASM

运行以下命令进行编译：

小云雀

剪映出品的AI视频和图片创作助手

1949 查看详情小云雀

emcc hello.cpp -o output.js -s WASM=1 -s EXPORTED_FUNCTIONS='["_add"]' -s EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]'

参数说明：

-s WASM=1：生成 .wasm 文件。
EXPORTED_FUNCTIONS：导出 C++ 函数（注意函数名前加下划线 _add）。
EXPORTED_RUNTIME_METHODS：导出 JS 调用辅助方法如 ccall 和 cwrap。

编译成功后会生成：

output.wasm：WebAssembly 二进制文件。
output.js：胶水代码，负责加载和运行 WASM。
output.html（可选）：可添加 -s SINGLE_FILE 或直接生成测试页面。

4. 在网页中调用 C++ 函数

创建一个 index.html 文件：

C++ in Browser

<script> Module.onRuntimeInitialized = function() { // 使用 ccall 调用 C++ 函数 const result = Module.ccall('add', 'number', ['number', 'number'], [5, 7]); console.log('5 + 7 =', result); // 输出: 12 // 或使用 cwrap 创建函数包装 const addFunc = Module.cwrap('add', 'number', ['number', 'number']); console.log('addFunc(3, 4) =', addFunc(3, 4)); // 输出: 7 }; </script>

启动本地服务器打开该页面（不能直接双击 HTML 文件）：

python -m http.server 8000

然后访问 http://localhost:8000 查看效果。