讲师中心 微信公众号
AI工具推荐 视频效率加速

C++如何编写WebAssembly(WASM)并在浏览器中运行

落晨大大_7500

落晨大大_7500

发布时间:2026-10-31 12:02:31

|

878人浏览过

|

来源于php中文网

原创

最小可行流程是:安装Emscripten后执行emcc hello.cpp -o hello.html,生成hello.html、hello.js、hello.wasm三文件;须用本地服务器(如npx http-server)运行,不可双击打开。

c++如何编写webassembly(wasm)并在浏览器中运行

用 Emscripten 编译 C++ 到 WASM 的最小可行流程

直接编译能跑就行,不需要额外框架。Emscripten 是目前最稳定、兼容性最好的工具链,它把 C++ 代码转成 .wasm 文件 + 一个 JS 胶水脚本(xxx.js),两者缺一不可。

安装后执行:

emcc hello.cpp -o hello.html
就会生成 hello.html、hello.js、hello.wasm 三个文件。直接双击打开 hello.html 会失败——因为浏览器禁止本地加载 .wasm,必须起一个本地服务,比如:
npx http-server

  • emcc 默认启用 -O2 优化,调试时加 -g 和 --profiling 才能保留符号和调用栈
  • 不加 -o xxx.html 而用 -o xxx.js,只会生成 JS + WASM,不带 HTML 容器,适合集成进现有页面
  • 如果只想要纯 WASM(无 JS 胶水),得加 --standalone-wasm,但此时无法调用 console.log 或 DOM,连 printf 都要自己实现底层输出

从 JavaScript 主动调用 C++ 函数的典型写法

默认生成的胶水 JS 会把 C++ 全局函数暴露在 Module.cwrap 或 Module.ccall 下,前提是函数用 extern "C" 声明并避免 C++ 名字修饰。

例如 C++ 中写:

extern "C" {  
  int add(int a, int b) { return a + b; }  
}
然后编译:
emcc math.cpp -o math.js -s EXPORTED_FUNCTIONS='["_add"]' -s EXPORTED_RUNTIME_METHODS='["ccall","cwrap"]'

  • EXPORTED_FUNCTIONS 必须带下划线前缀(_add),这是 Emscripten 的符号命名规则
  • EXPORTED_RUNTIME_METHODS 不加的话,Module.ccall 会是 undefined
  • JS 里调用:
    const add = Module.cwrap('add', 'number', ['number', 'number']);  
    console.log(add(3, 5)); // → 8
  • 如果函数参数含指针(比如 char*),要用 Module.allocate 或 Module.stringToUTF8 手动管理内存,别直接传 JS 字符串

常见报错:wasm validation error / RuntimeError: abort

这类错误基本都源于内存模型不匹配或导出配置遗漏,不是语法问题。

page-agent 浏览器控制(CDP)
page-agent 浏览器控制(CDP)

使用 page-agent CLI(CDP)控制浏览器;CLI只能通过 GitHub Release 的 .tgz 安装,npm 官方包暂未发布。

下载

立即学习“C++免费学习笔记(深入)”;

  • LinkError: WebAssembly.instantiate(): Import #0 module="env" error: module is not an object → 没用 Emscripten 生成的 JS 加载,而是手动 WebAssembly.instantiateStreaming 加了原始 WASM 文件;原始 WASM 依赖 env 模块,必须走胶水 JS 初始化
  • RuntimeError: abort(Assertion failed: undefined) → 多半是 C++ 里用了未初始化的全局变量,或 std::string 构造在 main 外触发(Emscripten 的 global ctors 支持有限)
  • Uncaught (in promise) TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type → 本地服务器没配对 .wasm 的 application/wasm 类型,http-server 默认支持,Python 的 python -m http.server 不支持,得换

绕过胶水 JS:用 WebAssembly.instantiateStreaming 手动加载(适合高级控制)

想自己管理内存、自定义导入对象、或对接 Rust/Go 生成的 WASM 时,就得跳过 Emscripten 胶水,直连底层 API。但 Emscripten 默认生成的 WASM 是“动态链接”模式,不能直接用。

  • 必须加编译参数:
    -s STANDALONE_WASM=1 -s EXPORTED_FUNCTIONS='["_add"]' -s EXPORT_NAME='MyModule'
    ,这样生成的是可独立加载的 WASM
  • WASM 导出的函数名仍带下划线,JS 中要写 instance.exports._add(3, 5)
  • 没有 malloc 和 free,所有内存操作得靠 WebAssembly.Memory 实例 + Uint8Array 手动读写,std::vector 这类容器基本不可用
  • 若需字符串交互,得约定内存布局:比如 C++ 把字符串写入线性内存某段,JS 用 TextDecoder 解码;反过来 JS 写入,C++ 用 strlen 判断长度

真正麻烦的从来不是编译命令,而是 C++ 和 JS 之间那层薄薄的 ABI 边界——类型怎么对齐、内存谁来管、错误怎么传、生命周期怎么同步。Emscripten 胶水帮你挡掉了 80% 的坑,但一旦想绕开它,每个字节都得亲手校验。

热门AI工具

更多
火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

创客贴AI

创客贴AI是一款AI图像与设计工具,AI辅助的智能在线设计工具。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

超级麦吉

一款通过数字员工协作完成调研、数据分析与文档制作的AI办公平台。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

相关专题

更多
c++和c语言的区别有哪些
c++和c语言的区别有哪些

c++和c语言的区别:1、面向对象编程(OOP)支持不同;2、新增特性不同;3、标准库不同;4、编译方式不同;5、命名空间不同等等。想了解更多c++的相关内容,可以阅读本专题下面的文章。

2268

2024.03.14

c++和python学习顺序推荐
c++和python学习顺序推荐

一般建议先学习C++,再学习Python,因为这样可以逐步从较为底层的编程语言向更高级的语言过渡。想了解更多python的相关内容,可以阅读本专题下面的文章。

1039

2024.03.14

python和c++学习性价比分析
python和c++学习性价比分析

Python易于学习,广泛应用于Web开发、数据科学和人工智能等领域,但性能较低。C语言性能高,适用于对性能要求较高的场景,如游戏开发和系统编程,但学习曲线陡峭,错误处理复杂。想了解更多python的相关内容,可以阅读本专题下面的文章。

447

2024.03.14

c语言和c++一样吗
c语言和c++一样吗

c语言和c++是两种不同的编程语言,虽然有相似之处,但存在显著差异。c语言专注于过程式编程和系统级开发,以简洁、高效著称。c++作为c语言的超集,引入了面向对象编程,增强了代码组织和管理能力,但学习曲线也更陡峭。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

347

2024.03.14

c语言和c++先学哪个好
c语言和c++先学哪个好

初学者选择学习c语言还是c++语言,需要根据个人学习目标、背景以及编程兴趣和预期应用方向来决定。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

426

2024.03.14

c语言和c++的区别和联系
c语言和c++的区别和联系

c语言和c++是计算机科学领域应用广泛的编程语言。虽然它们有着相似的基础,但它们在语言类型、语法功能和内存管理方面存在着显著差异。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

600

2024.03.14

c++软件中文更改教程
c++软件中文更改教程

对于 ide,可通过打开设置,找到语言设置,选择中文,并保存更改。对于非 ide 应用程序,可查找设置或选项,选择语言设置,更改为中文,并保存更改。想了解更多c++的相关内容,可以阅读本专题下面的文章。

1429

2024.03.21

python和java和c++学习性价比分析
python和java和c++学习性价比分析

Python以其易学性、丰富的库和活跃的社区而著称,适合数据科学、人工智能和Web开发。Java以其跨平台性、企业级应用开发和Android应用开发而闻名。C++以其底层控制能力、高效性能和游戏开发而著称。选择哪种语言取决于个人兴趣、职业方向和特定需求。想了解更多python和java和c++的相关内容,可以阅读本专题下面的文章。

1237

2024.03.22

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

60

2026.10.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn