C++代码怎么在浏览器里运行_使用Emscripten将C++编译为WebAssembly(WASM)教程-C++-PHP中文网

C++代码怎么在浏览器里运行_使用Emscripten将C++编译为WebAssembly(WASM)教程

冰火之心

发布： 2025-12-17 19:15:23

原创

728人浏览过

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

c++代码怎么在浏览器里运行_使用emscripten将c++编译为webassembly(wasm)教程

想让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 <emscripten.h>
#include <iostream>

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 模板，避免自动生成的页面包含多余内容

在浏览器中运行

编译成功后会生成三个文件：

歌者PPT

歌者PPT，AI 写 PPT 永久免费

358

查看详情

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 对象访问：

<script>
  Module.onRuntimeInitialized = function() {
    const result = Module._add(5, 3);
    console.log("Result from C++:", result); // 输出 8
  };
</script>

登录后复制

注意：C++ 函数名在 JS 中前面要加下划线 _。

基本上就这些。掌握这个流程后，你可以把图像处理、音视频算法、游戏逻辑等性能敏感的 C++ 模块集成到网页应用中。不复杂但容易忽略细节，比如环境配置和本地服务器限制。

以上就是C++代码怎么在浏览器里运行_使用Emscripten将C++编译为WebAssembly(WASM)教程的详细内容，更多请关注php中文网其它相关文章！