WebAssembly 入门教程：使用 C++、Go 和 Python 编译 WASM
WebAssembly (WASM) 是一种新兴的web技术，允许在浏览器中以接近原生的速度运行代码。它是一种低级字节码格式，可以由多种编程语言编译生成。本文将介绍如何使用 C++、Go 和 Python 编写代码并编译成 WebAssembly。
1. C++ 编译 WebAssembly
首先，我们需要安装 Emscripten，这是一个将 C/C++ 代码编译成 WebAssembly 的工具链。
安装 Emscripten
请访问 Emscripten 官网，根据说明进行安装。安装完成后，可以验证是否成功：
emcc -v
编写 C++ 代码
下面是一个简单的 C++ 代码示例，该代码将两个数相加并返回结果。
// add.cpp
extern "C" {
int add(int a, int b) {
return a + b;
}
}
编译为 WASM
使用 Emscripten 编译 C++ 代码：
emcc add.cpp -s WASM=1 -o add.wasm
使用 JavaScript 调用 WASM
为了能够在网页中调用该 WebAssembly，可以使用以下 JavaScript 代码：
<!DOCTYPE html>
<html>
<head>
<title>WASM Add Example</title>
</head>
<body>
<script>
WebAssembly.instantiateStreaming(fetch('add.wasm'))
.then(obj => {
console.log('1 + 2 =', obj.instance.exports.add(1, 2));
});
</script>
</body>
</html>
2. Go 编译 WebAssembly
Go 也支持将代码编译为 WebAssembly。你需要安装 Go 1.11 及以上版本。
编写 Go 代码
创建一个名为 add.go 的文件，内容如下：
// add.go
package main
import "syscall/js"
func add(this js.Value, p []js.Value) interface{} {
return js.ValueOf(p[0].Int() + p[1].Int())
}
func registerCallbacks() {
js.Global().Set("add", js.FuncOf(add))
}
func main() {
c := make(chan struct{}, 0)
registerCallbacks()
<-c // Keep the program running
}
编译为 WASM
使用以下命令编译：
GOOS=js GOARCH=wasm go build -o add.wasm add.go
使用 JavaScript 调用 WASM
你可以使用类似于 C++ 的 JavaScript 代码来调用这个 WASM 模块：
<!DOCTYPE html>
<html>
<head>
<title>WASM Add Example</title>
</head>
<body>
<script>
const go = new Go(); // 创建 Go 对象
WebAssembly.instantiateStreaming(fetch('add.wasm'), go.importObject).then(result => {
go.run(result.instance);
console.log('3 + 4 =', add(3, 4));
});
</script>
</body>
</html>
3. Python 编译 WebAssembly
Python 也可以编译为 WebAssembly，常用的工具是 Pyodide，它是一个将 Python 运行在 WebAssembly 上的项目。
使用 Pyodide 编写 Python 代码
你可以用简单的 Python 代码实现相同的功能：
# add.py
def add(a, b):
return a + b
加载 Pyodide 并运行代码
通过以下 HTML 文件可以加载并使用 Pyodide：
<!DOCTYPE html>
<html>
<head>
<title>WASM Add Example with Pyodide</title>
<script src="https://cdn.jsdelivr.net/pyodide/v0.17.0/full/pyodide.js"></script>
</head>
<body>
<script>
async function main() {
let pyodide = await loadPyodide();
await pyodide.loadPackage("numpy"); // 可选，如果你需要使用 numpy
await pyodide.runPythonAsync(`
def add(a, b):
return a + b
`);
let result = await pyodide.runPythonAsync('add(5, 6)');
console.log('5 + 6 =', result);
}
main();
</script>
</body>
</html>
结论
通过上述步骤，我们已经成功展示了如何使用 C++、Go 和 Python 编写代码并将其编译为 WebAssembly。WebAssembly 的出现为 Web 开发带来了更多的可能性，使得在浏览器中运行高性能的代码成为现实。希望这篇入门教程能够帮助你快速入门并掌握 WebAssembly 的基本用法。
