WebAssembly (WASM) 简介
WebAssembly (WASM) 是一种基于堆栈的虚拟机的二进制指令格式，设计为高性能应用程序的便携式目标。在本文中，我们将探讨如何将简单的 C 程序编译为 WebAssembly，将其加载到 Web 浏览器中，并使用 JavaScript 与其交互。我们还将探索一些在开发容器环境之外使用 WASM 的有用工具和命令。
设置开发环境
为您的 WebAssembly 项目创建必要的文件夹结构和文件。
- 创建项目文件夹： 首先为您的项目创建一个新目录。在此文件夹中，您将添加必要的文件和配置。
mkdir wasm-web-example cd wasm-web-example
- 设置开发容器： 在 wasm-web-example 目录中，创建 .devcontainer 文件夹来存储 dev 容器配置文件。这些文件将设置一个安装了 Emscripten 的容器，用于将 C 代码编译成 WebAssembly。
在 .devcontainer 文件夹中，创建以下文件：
-
devcontainer.json
此文件将 VSCode 配置为使用具有必要扩展和环境设置的 Docker 容器。
{ "name": "Emscripten DevContainer", "build": { "dockerfile": "Dockerfile" }, "customizations": { "vscode": { "settings": { "terminal.integrated.shell.linux": "/bin/bash", "C_Cpp.default.configurationProvider": "ms-vscode.cmake-tools", "C_Cpp.default.intelliSenseMode": "gcc-x64" }, "extensions": [ "ms-vscode.cpptools", "ms-vscode.cmake-tools" ] } }, "postCreateCommand": "emcc --version" }登录后复制登录后复制 -
Dockerfile
Dockerfile 将设置 Emscripten 环境。这是该文件的内容：
# Use the official Emscripten image FROM emscripten/emsdk:3.1.74 # Set the working directory WORKDIR /workspace # Copy the source code into the container COPY . . # Install any additional packages if necessary (optional) # Ensure to clean up cache to minimize image size RUN apt-get update && \ apt-get install -y build-essential && \ apt-get clean && \ rm -rf /var/lib/apt/lists/*登录后复制登录后复制
- 创建 VSCode 设置： 在项目的根目录中，创建一个包含以下文件的 .vscode 文件夹：
-
c_cpp_properties.json
此文件配置 C IntelliSense 并包含项目的路径。
{ "configurations": [ { "name": "Linux", "includePath": [ "${workspaceFolder}/**", "/emsdk/upstream/emscripten/system/include" ], "defines": [], "compilerPath": "/usr/bin/gcc", "cStandard": "c17", "cppStandard": "gnu++17", "configurationProvider": "ms-vscode.cmake-tools" } ], "version": 4 }登录后复制登录后复制 -
settings.json
此文件包含语言关联的特定 VSCode 设置。
{ "files.associations": { "emscripten.h": "c" }, "[javascript]": { "editor.defaultFormatter": "vscode.typescript-language-features" }, "[typescript]": { "editor.defaultFormatter": "vscode.typescript-language-features" }, "[jsonc]": { "editor.defaultFormatter": "vscode.json-language-features" }, "[json]": { "editor.defaultFormatter": "vscode.json-language-features" }, "[html]": { "editor.defaultFormatter": "vscode.html-language-features" } }登录后复制
- 创建 C、JavaScript 和 HTML 文件： 现在，为您的项目创建以下文件：
-
test.c
这个 C 文件包含将被编译为 WebAssembly 的简单函数。
// test.c int add(int lhs, int rhs) { return lhs + rhs; }登录后复制 -
test.html
此 HTML 文件将使用 JavaScript 加载 WebAssembly 模块。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>WebAssembly Example</title> </head> <body> <h1>WebAssembly Example</h1> <div> </li> <li> <p><strong>test.js</strong><br><br> This JavaScript file will fetch the WebAssembly module and call the exported function.<br> </p> <pre class="brush:php;toolbar:false"> // test.js const wasmFile = 'test.wasm'; fetch(wasmFile) .then(response => response.arrayBuffer()) .then(bytes => WebAssembly.instantiate(bytes)) .then(({ instance }) => { const result = instance.exports.add(5, 3); // Call the WebAssembly function document.getElementById('output').textContent = `Result from WebAssembly: ${result}`; }) .catch(error => console.error('Error loading WebAssembly module:', error));登录后复制
现在您已经设置了所有必要的文件和配置，您可以继续编译 WebAssembly 并与 WebAssembly 交互。
使用 Emscripten 将 C 代码编译为 WebAssembly
基础 C 程序:
文件 test.c 包含一个简单的函数 add，用于将两个整数相加。我们将使用 Emscripten 将此 C 函数编译为 WebAssembly。Emscripten 命令:
在 dev 容器内，打开终端（在 VSCode 中使用 cmd j）并运行以下 Emscripten 命令将 C 代码编译为 WebAssembly：
mkdir wasm-web-example cd wasm-web-example
此命令将生成 test.wasm（WebAssembly 二进制文件），并确保导出 add 函数以在 JavaScript 中使用。
在浏览器中加载 WebAssembly 并与之交互
HTML 设置:
文件 test.html 包含一个简单的 HTML 页面，该页面使用 JavaScript 加载 WebAssembly 二进制文件。JavaScript 设置:
JavaScript 文件 test.js 加载 test.wasm 文件并调用导出的 add 函数：
在 macOS 上使用外部工具
在开发容器之外，您可以运行几个有用的命令来在 Mac 上使用 WebAssembly。
- 安装wabt： wabt（WebAssembly 二进制工具包）提供了用于使用 WebAssembly 的实用程序，包括将 .wasm 文件转换为人类可读的 WAT（WebAssembly 文本）格式。通过 Homebrew 安装：
{
"name": "Emscripten DevContainer",
"build": {
"dockerfile": "Dockerfile"
},
"customizations": {
"vscode": {
"settings": {
"terminal.integrated.shell.linux": "/bin/bash",
"C_Cpp.default.configurationProvider": "ms-vscode.cmake-tools",
"C_Cpp.default.intelliSenseMode": "gcc-x64"
},
"extensions": [
"ms-vscode.cpptools",
"ms-vscode.cmake-tools"
]
}
},
"postCreateCommand": "emcc --version"
}
- 将 WASM 转换为 WAT： 安装 wabt 后，您可以使用 wasm2wat 工具将 WebAssembly 二进制文件 (test.wasm) 转换为 WAT 格式：
# Use the official Emscripten image
FROM emscripten/emsdk:3.1.74
# Set the working directory
WORKDIR /workspace
# Copy the source code into the container
COPY . .
# Install any additional packages if necessary (optional)
# Ensure to clean up cache to minimize image size
RUN apt-get update && \
apt-get install -y build-essential && \
apt-get clean && \
rm -rf /var/lib/apt/lists/*
- 提供 HTML 页面： 要查看与 WebAssembly 模块交互的 HTML 页面，可以使用 Python 的简单 HTTP 服务器：
{
"configurations": [
{
"name": "Linux",
"includePath": [
"${workspaceFolder}/**",
"/emsdk/upstream/emscripten/system/include"
],
"defines": [],
"compilerPath": "/usr/bin/gcc",
"cStandard": "c17",
"cppStandard": "gnu++17",
"configurationProvider": "ms-vscode.cmake-tools"
}
],
"version": 4
}
结论
通过执行以下步骤，您可以设置一个开发环境，将 C 代码编译为 WebAssembly，使用 JavaScript 与其交互，并转换生成的二进制文件以供检查。使用 wabt 和 Python 的 HTTP 服务器等外部工具简化了 macOS 系统上的 WebAssembly 模块的管理和探索。
以上是WebAssembly (WASM) 简介的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
Python vs. JavaScript：学习曲线和易用性
Apr 16, 2025 am 12:12 AM
Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。
JavaScript和Web：核心功能和用例
Apr 18, 2025 am 12:19 AM
JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互；2)在用户提交数据前进行客户端验证，提高用户体验；3)通过AJAX技术实现与服务器的无刷新通信。
JavaScript在行动中：现实世界中的示例和项目
Apr 19, 2025 am 12:13 AM
JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用，涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。
了解JavaScript引擎：实施详细信息
Apr 17, 2025 am 12:05 AM
理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。
Python vs. JavaScript：社区，图书馆和资源
Apr 15, 2025 am 12:16 AM
Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。
Python vs. JavaScript：开发环境和工具
Apr 26, 2025 am 12:09 AM
Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda，适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack，适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。
C/C在JavaScript口译员和编译器中的作用
Apr 20, 2025 am 12:01 AM
C和C 在JavaScript引擎中扮演了至关重要的角色，主要用于实现解释器和JIT编译器。 1）C 用于解析JavaScript源码并生成抽象语法树。 2）C 负责生成和执行字节码。 3）C 实现JIT编译器，在运行时优化和编译热点代码，显着提高JavaScript的执行效率。
Python vs. JavaScript：比较用例和应用程序
Apr 21, 2025 am 12:01 AM
Python更适合数据科学和自动化，JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色，使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺，用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用，支持全栈开发。
