简体中文

WebAssembly 教程

WebAssembly 教程：初学者指南

你好，未来的 WebAssembly 巫师们！我很高兴能成为你们在这令人兴奋的 WebAssembly 世界旅程中的向导。作为一名教授计算机科学多年的人（我们就说我对软盘时代还有记忆吧），我在这里让这次冒险尽可能有趣和易于接近。所以，拿起你最喜欢的饮料，舒服地坐好，让我们开始吧！

WebAssembly - Home

WebAssembly 是什么？

想象一下你在建造一座沙堡。JavaScript 就像用手一样——它灵活且易于开始，但可能不是建造巨大堡垒最快的方式。而 WebAssembly，另一方面，就像拥有一套专用工具——它可能需要更多的设置，但 boy，它建东西可真快！

WebAssembly，通常缩写为 Wasm，是一种为在网页浏览器中高效执行而设计的二进制指令格式。它就像浏览器理解的秘密代码，允许程序以接近本地速度运行。

为什么你应该关心？

  1. 速度：WebAssembly 快如闪电。它就像把你的网页应用从自行车升级到了跑车。
  2. 语言多样性：你不再局限于 JavaScript。C、C++、Rust——尽管来吧！
  3. 安全性：WebAssembly 在沙盒环境中运行，确保了事物的安全。

开始使用 WebAssembly

设置开发环境

在我们开始编码之前，我们需要设置我们的工作空间。这就像在烹饪美味大餐之前准备厨房。以下是你需要的：

  1. 一个现代的网页浏览器（Chrome、Firefox、Safari 或 Edge）
  2. 一个文本编辑器（我推荐 Visual Studio Code，但使用你熟悉的任何一个）
  3. Emscripten 工具包（我们将一起安装）

让我们安装 Emscripten：

# 克隆 Emscripten 仓库
git clone https://github.com/emscripten-core/emsdk.git

# 进入克隆的目录
cd emsdk

# 下载并安装最新的 SDK 工具
./emsdk install latest

# 激活最新的 SDK 工具
./emsdk activate latest

# 设置环境变量
source ./emsdk_env.sh

现在如果这看起来像是一堆乱码，别担心。把它想象成在创作杰作之前准备画布和颜料！

你的第一个 WebAssembly 程序

让我们从一个简单的 "Hello, World!" 程序开始。我们将用 C 语言编写它，然后将其编译为 WebAssembly。

第一步：编写 C 代码

创建一个名为 hello.c 的文件并添加以下代码：

#include <stdio.h>

int main() {
printf("Hello, WebAssembly World!\n");
return 0;
}

这就好比写一封信，我们要将其翻译成浏览器理解的语言。

第二步：编译为 WebAssembly

现在，让我们将我们的 C 代码转换为 WebAssembly。在终端运行以下命令：

emcc hello.c -s WASM=1 -o hello.html

这个命令就像把我们的信放入一个神奇的翻译机中。它创建了三个文件：

  • hello.wasm：WebAssembly 二进制文件
  • hello.js：JavaScript 粘合代码
  • hello.html：运行我们程序的 HTML 文件

第三步：运行你的 WebAssembly 程序

在网页浏览器中打开 hello.html 文件。你应该会在页面上看到 "Hello, WebAssembly World!" 被打印出来。恭喜！你刚刚运行了你的第一个 WebAssembly 程序！

理解魔法

让我们分解一下刚刚发生的事情：

  1. 我们编写了一个简单的 C 程序。
  2. 我们使用 Emscripten 将我们的 C 代码编译为 WebAssembly。
  3. Emscripten 还生成了一些 JavaScript 来加载并运行我们的 WebAssembly。
  4. 浏览器执行了我们的 WebAssembly 代码，打印出了我们的消息。

这就好比我们用英语（C）写了一封信，将其翻译成一种通用语言（WebAssembly），然后有一个翻译（JavaScript）大声朗读出来，让每个人（浏览器）都能理解。

进一步学习：一个简单的计算器

现在我们已经湿了脚，让我们尝试一些更具交互性的东西。我们将创建一个可以添加两个数字的简单计算器。

第一步：编写 C 代码

创建一个名为 calculator.c 的新文件：

#include <emscripten.h>

EMSCRIPTEN_KEEPALIVE
int add(int a, int b) {
return a + b;
}

在这里，EMSCRIPTEN_KEEPALIVE 就像在我们的函数上贴了一个巨大的 "重要" 标签。它告诉 Emscripten 保持这个函数可用，供 JavaScript 调用。

第二步：编译为 WebAssembly

编译我们的计算器：

emcc calculator.c -s WASM=1 -s EXPORTED_FUNCTIONS='["_add"]' -s EXPORTED_RUNTIME_METHODS='["ccall", "cwrap"]' -o calculator.js

这个命令有点复杂，但把它想象成给我们的翻译机具体指令。

第三步：创建 HTML 界面

创建一个名为 calculator.html 的文件：

<!DOCTYPE html>
<html>
<head>
<title>WebAssembly 计算器</title>
</head>
<body>
<h1>WebAssembly 计算器</h1>
<input type="number" id="num1" placeholder="输入第一个数字">
<input type="number" id="num2" placeholder="输入第二个数字">
<button onclick="calculateSum()">添加</button>
<p>结果: <span id="result"></span></p>

<script src="calculator.js"></script>
<script>
Module.onRuntimeInitialized = function() {
window.add = Module.cwrap('add', 'number', ['number', 'number']);
}

function calculateSum() {
var num1 = parseInt(document.getElementById('num1').value);
var num2 = parseInt(document.getElementById('num2').value);
var sum = add(num1, num2);
document.getElementById('result').textContent = sum;
}
</script>
</body>
</html>

这个 HTML 文件就像为我们的计算器创建一个用户友好的界面。它有两个数字输入框和一个 "添加" 按钮。

第四步：运行你的 WebAssembly 计算器

在浏览器中打开 calculator.html。你应该会看到两个输入框和一个 "添加" 按钮。输入两个数字，点击 "添加"，然后 voila！你的 WebAssembly 计算器现在起作用了！

结论

就是这样，伙计们！我们已经迈入了激动人心的 WebAssembly 世界的第一步。我们设置了环境，创建了一个 "Hello, World!" 程序，甚至构建了一个简单的计算器。

记住，学习 WebAssembly 就像学习骑自行车。一开始可能会有些摇晃，但随着练习，你很快就会在网页开发世界中自如地穿梭。继续实验，继续学习，最重要的是，享受乐趣！

在我们的下一课中，我们将更深入地探讨 WebAssembly 的功能，并探索如何优化性能。在此之前，祝你们编码愉快！

Credits: Image by storyset

 
下一教程:
WebAssembly - 概述