简体中文

WebAssembly 教程

WebAssembly - 使用 Go 语言进行开发

你好，未来的编程巨星们！今天，我们将踏上一段激动人心的旅程，使用 Go 语言探索 WebAssembly 的世界。别担心，如果这些术语现在听起来像外星语言 - 到了这个教程结束时，你会流利地使用它们的！

WebAssembly - Working with Go

什么是 WebAssembly？

在我们深入代码之前，让我们了解一下 WebAssembly 是什么。想象你有一辆超级快速的赛车（那就是 WebAssembly），它能在任何赛道（网页浏览器）上以惊人的速度行驶。它是一种运行用 Go、C++ 或 Rust 等语言编写的程序直接在网页浏览器中的方式，使得网页应用更快、更强大。

为什么选择 WebAssembly 中的 Go？

今天我们选择的 Go 语言，就像是编程世界中的瑞士军刀。它简单、高效，而且现在多亏了 WebAssembly，它还能在网页浏览器中运行。这就好比给你的网页应用赋予了超能力！

设置我们的 Go 开发环境

首先，我们需要设置我们的 Go 开发环境。这就像在我们开始烹饪美味佳肴前准备厨房一样。

  1. 从官方网站（https://golang.org/）安装 Go
  2. 设置你的 GOPATH（安装过程中 Go 会引导你完成这一步）
  3. 安装一个代码编辑器（我推荐 Visual Studio Code，但你可以使用任何你习惯的编辑器）

我们的第一个 Go WebAssembly 程序

让我们从一个简单的 "Hello, WebAssembly!" 程序开始。别担心如果你现在还不理解所有内容 - 我们会一步一步地分解。

package main

import (
"fmt"
"syscall/js"
)

func main() {
fmt.Println("Hello, WebAssembly!")
js.Global().Set("greet", js.FuncOf(greet))
<-make(chan bool)
}

func greet(this js.Value, args []js.Value) interface{} {
name := args[0].String()
message := fmt.Sprintf("你好，%s！欢迎来到 WebAssembly。", name)
js.Global().Get("document").Call("getElementById", "greeting").Set("innerText", message)
return nil
}

让我们分解一下：

  1. package main：这告诉 Go 这是我们的程序的主包。
  2. import：我们导入了两个包 - fmt 用于打印，syscall/js 用于与 JavaScript 交互。
  3. func main()：这是我们的程序的入口点。
  4. js.Global().Set("greet", js.FuncOf(greet))：这使得我们的 greet 函数对 JavaScript 可用。
  5. <-make(chan bool)：这使我们的程序保持运行，等待 JavaScript 的调用。
  6. func greet：这个函数接收一个名字，并更新一个 HTML 元素以显示问候。

将我们的 Go 程序编译为 WebAssembly

现在，让我们将我们的 Go 代码转换为 WebAssembly。打开你的终端并运行：

GOOS=js GOARCH=wasm go build -o main.wasm

这个命令告诉 Go 为 JavaScript（GOOS=js）和 WebAssembly（GOARCH=wasm）编译我们的程序。

创建一个 HTML 页面来运行我们的 WebAssembly

我们需要一个 HTML 页面来加载并运行我们的 WebAssembly。这是一个简单的例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Go WebAssembly</title>
</head>
<body>
<h1>Go WebAssembly 演示</h1>
<input id="name" type="text" placeholder="输入你的名字">
<button onclick="greet(document.getElementById('name').value)">问候</button>
<p id="greeting"></p>
<script src="wasm_exec.js"></script>
<script>
const go = new Go();
WebAssembly.instantiateStreaming(fetch("main.wasm"), go.importObject).then((result) => {
go.run(result.instance);
});
</script>
</body>
</html>

这个 HTML 文件：

  1. 创建了一个输入字段来输入名字
  2. 有一个按钮，点击时会调用我们的 greet 函数
  3. 加载了 WebAssembly 运行时（wasm_exec.js）
  4. 加载并运行我们的 WebAssembly 文件（main.wasm）

运行我们的 WebAssembly 应用

为了运行这个应用，我们需要一个网页服务器。这里有一个简单的 Python 命令来启动一个：

python -m http.server

现在，打开你的浏览器并访问 http://localhost:8000。你应该能看到我们的页面！

理解输出

当你输入你的名字并点击 "问候" 时，你会看到个性化的问候出现。这是我们的 Go 函数在浏览器中运行，多亏了 WebAssembly！

结论

恭喜你！你刚刚创建了你的第一个 Go WebAssembly 应用。我们在这里只是浅尝辄止，但我希望这激发了你的好奇心，去探索更多。

记住，学习编程就像学习一门新语言或乐器。它需要练习、耐心和毅力。但随着每一步，你都在解锁新的可能性，扩展你的创造潜力。

继续编码，继续探索，最重要的是，享受乐趣！

方法 描述
js.Global() 访问全局 JavaScript 对象
js.FuncOf() 将 Go 函数转换为 JavaScript 函数
js.Value 表示一个 JavaScript 值
Call() 调用一个 JavaScript 方法
Set() 设置一个 JavaScript 属性
Get() 获取一个 JavaScript 属性
String() 将一个 JavaScript 值转换为 Go 字符串

这个表格总结了我们用来在 Go 和 JavaScript 之间交互的关键方法。在你继续你的 WebAssembly 之旅时，你会发现这些方法非常有用！

Credits: Image by storyset

上一教程:
WebAssembly - 与Rust一起工作
下一教程:
WebAssembly - 与Node.js协作