c++如何通过WebAssembly在浏览器中运行_c++跨平台运行于Web端的方法-C++-PHP中文网

c++如何通过WebAssembly在浏览器中运行_c++跨平台运行于Web端的方法

下次还敢

发布： 2025-11-19 19:25:02

原创

701人浏览过

最有效方式是通过WebAssembly，使用Emscripten将C++编译为.wasm文件，结合JavaScript胶水代码在浏览器中运行，支持高性能跨平台应用并实现与JS的双向交互。

c++如何通过webassembly在浏览器中运行_c++跨平台运行于web端的方法

让C++代码在浏览器中运行，最有效的方式是通过WebAssembly（简称Wasm）。WebAssembly是一种低级的、接近机器码的字节码格式，被现代浏览器高效支持。它允许C++等系统级语言编译为可在网页中安全、快速执行的模块。

1. WebAssembly 简介与优势

WebAssembly 是W3C标准，设计目标是提供高性能应用的可移植目标。相比JavaScript，它具备更小体积、更快加载和执行速度。

C++ 编译为 WebAssembly 后，可以在所有主流浏览器中运行，无需插件，实现真正跨平台的前端逻辑处理，比如游戏引擎、音视频处理、科学计算等。

主要优势包括：

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

接近原生性能
可与 JavaScript 互操作
支持大多数 C++ 特性（通过合适工具链）
静态编译，减少运行时错误

2. 使用 Emscripten 工具链编译 C++ 到 WebAssembly

Emscripten 是目前最成熟、广泛使用的将 C/C++ 编译为 WebAssembly 的工具链。它基于 LLVM，使用 Clang 作为前端，最终输出 .wasm 文件，并生成配套的 JavaScript 胶水代码用于浏览器集成。

安装 Emscripten：

推荐使用官方提供的 emsdk 进行管理：

# 克隆 emsdk 仓库
git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
<h1>安装并激活最新版本</h1><p>./emsdk install latest
./emsdk activate latest</p><h1>激活环境变量</h1><p>source ./emsdk_env.sh</p>

登录后复制

编译 C++ 程序示例：

假设有一个简单的 C++ 文件 hello.cpp：

#include <iostream>
int main() {
    std::cout << "Hello from C++ in the browser!" << std::endl;
    return 0;
}

登录后复制

使用 emcc 命令编译为 WebAssembly：

emcc hello.cpp -o hello.html

登录后复制

这会生成三个文件：

绘蛙AI修图

绘蛙平台AI修图工具，支持手脚修复、商品重绘、AI扩图、AI换色

264

查看详情

hello.wasm：核心 WebAssembly 二进制模块
hello.js：胶水代码，负责加载和实例化 wasm
hello.html：一个默认页面，用于测试运行

用本地服务器打开 hello.html（不能直接双击打开），例如使用 Python 启动服务：

python3 -m http.server 8000

登录后复制

访问 https://www.php.cn/link/fcbb3a1c04ec11f1506563c26ca63774 即可看到输出结果。

3. C++ 与 JavaScript 的交互

WebAssembly 模块可以调用 JavaScript 函数，也可以暴露函数给 JavaScript 调用。Emscripten 提供了便捷的宏和 API 实现双向通信。

从 JavaScript 调用 C++ 函数：

在 C++ 中使用 extern "C" 防止名称修饰，并用 EMSCRIPTEN_KEEPALIVE 标记函数：

#include <emscripten.h>
#include <iostream>
<p>extern "C" {
EMSCRIPTEN_KEEPALIVE
void greet(int age) {
std::cout << "Hello! You are " << age << " years old." << std::endl;
}
}</p>

登录后复制

编译时加上 `-s EXPORTED_FUNCTIONS='["_greet"]'` 参数导出函数：

emcc greet.cpp -o greet.js -s EXPORTED_FUNCTIONS='["_greet"]'

登录后复制

在 HTML 中调用：

<script src="greet.js"></script>
<script>
  Module.onRuntimeInitialized = function() {
    Module._greet(25);
  };
</script>

登录后复制

从 C++ 调用 JavaScript：

extern "C" {
    EMSCRIPTEN_KEEPALIVE
    void call_js() {
        EM_ASM({
            alert("Called from C++!");
            console.log("Log from JS, triggered by C++");
        });
    }
}

登录后复制