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

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

尼克

发布： 2025-11-19 13:56:02

原创

734人浏览过

使用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 命令即可使用。

立即学习“C++免费学习笔记（深入）”；

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

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

#include <emscripten.h>
#include <iostream>

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

int main() {
std::cout << "Hello from C++!" << std::endl;
return 0;
}

说明：

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

3. 使用 emcc 编译为 WASM

运行以下命令进行编译：

码哩写作

最懂作者的AI辅助创作工具

查看详情

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 文件：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>C++ in Browser</title>
</head>
<body>
<script src="output.js"></script>
<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>
</body>
</html>

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

python -m http.server 8000

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