安装Emscripten后,将C++代码编译为WebAssembly,生成WASM、JS和HTML文件,通过本地服务器运行,可在浏览器中执行C++代码并实现JS与C++交互。

想让C++代码在浏览器里运行?用Emscripten把C++编译成WebAssembly(WASM)是最直接的方法。它不仅能让你的高性能代码在网页中执行,还能保持接近原生的运行速度。下面一步步教你如何操作。
安装Emscripten
Emscripten 是一个将 C/C++ 编译为 WebAssembly 的工具链。官方推荐使用其自带的安装脚本,能自动处理所有依赖。
- 前往 https://www.php.cn/link/ae4470bf1072ddb0e6a7aa68c3023b66 下载 Emscripten SDK
- 克隆仓库:
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++代码
准备一个简单的 C++ 文件,比如 hello.cpp:
立即学习“C++免费学习笔记(深入)”;
#include#include extern "C" { int add(int a, int b) { return a + b; } } int main() { std::cout << "Hello from C++!" << std::endl; return 0; }
使用 emcc 编译为 WASM:
emcc hello.cpp -o hello.html -s WASM=1 --shell-file html_shell_minimal.html
说明:
- -o hello.html:生成 HTML 测试页面、JS 胶水代码和 WASM 文件
- -s WASM=1:明确启用 WebAssembly 输出(默认已开启)
- --shell-file:使用最小 HTML 模板,避免自动生成的页面包含多余内容
在浏览器中运行
编译成功后会生成三个文件:
- hello.wasm:编译后的二进制模块
- hello.js:胶水代码,负责加载和初始化 WASM
- hello.html:可直接打开测试的页面
不能直接双击打开 HTML 文件,因为浏览器会阻止本地加载 WASM。你需要启动一个本地服务器:
python3 -m http.server 8000
然后访问 https://www.php.cn/link/fcbb3a1c04ec11f1506563c26ca63774,打开 hello.html 就能看到控制台输出 “Hello from C++!”。
从JavaScript调用C++函数
上面例子中的 add 函数是用 extern "C" 声明的,防止 C++ 名字修饰,便于 JS 调用。
在生成的页面中,通过 Module 对象访问:
注意:C++ 函数名在 JS 中前面要加下划线 _。
基本上就这些。掌握这个流程后,你可以把图像处理、音视频算法、游戏逻辑等性能敏感的 C++ 模块集成到网页应用中。不复杂但容易忽略细节,比如环境配置和本地服务器限制。










