Go 语言 WebAssembly 演练 - 编译 Go 代码到浏览器运行

打开演练场页面后，您会看到代码编辑器和预设示例选择区域。在预设示例下拉菜单或按钮组中选择一个示例加载到编辑器中。建议从Hello WASM示例开始，这是最简单的入门示例。选择预设示例后，编辑器会自动填充对应的Go源代码。您可以在编辑器中查看和修改代码，观察不同修改对运行结果的影响。每个预设示例都包含详细的代码注释，帮助您理解每一行代码的作用。

package main

import "syscall/js"

func main() {
    // 获取console对象
    console := js.Global().Get("console")
    // 调用console.log输出消息
    console.Call("log", "Hello from Go WASM!")
}

选择预设示例后，编辑器下方会显示该示例的运行说明，包括功能描述、关键API解释、以及预期输出结果。阅读这些说明有助于您在运行代码前建立正确的心理模型。

在编辑器中加载或编写Go代码后，点击页面上的"运行"按钮即可启动编译和执行过程。演练场会在后台将您的Go代码编译为WebAssembly格式，然后在浏览器的JavaScript运行时中加载和执行。编译过程通常需要几秒钟时间，具体取决于代码的复杂度。编译完成后，执行结果会显示在输出面板中。对于Hello WASM示例，您应该能在控制台输出区域看到"Hello from Go WASM!"的消息。对于DOM操作示例，输出面板会显示页面元素的实时变化效果。对于计算密集型示例（如斐波那契数列），输出面板会显示计算结果和执行时间。

运行完成后，查看输出面板中的结果信息。输出面板分为两个区域：标准输出区域显示fmt.Println等函数的输出内容，标准错误区域显示错误日志和调试信息。对于不同类型的结果，输出面板会采用不同的显示方式。纯文本结果直接显示，HTML渲染结果（如DOM操作示例的输出）会以可视化方式呈现。您可以使用输出面板上方的工具栏清除输出内容、切换显示模式、或复制输出文本。如果运行过程中出现错误，错误信息会以红色高亮显示，并附带错误发生位置和原因说明，帮助您快速定位和修复问题。

在查看输出结果的同时，建议同步阅读编辑器中的代码注释，理解代码逻辑与输出结果之间的对应关系。这种代码-结果对照的学习方式能够加深您对Go WASM开发模式的理解。

在理解预设示例的基础上，尝试修改代码并观察结果变化。例如在Hello WASM示例中，修改console.log输出的消息内容，或尝试调用其他浏览器API。在DOM操作示例中，修改按钮点击事件的处理逻辑，或尝试创建新的DOM元素。修改完成后点击运行按钮重新编译执行，观察输出结果是否符合预期。通过这种"阅读-修改-运行"的循环学习方式，您可以快速积累Go WASM开发的实践经验。如果遇到编译错误，错误信息会指出具体的代码位置和错误原因，帮助您理解Go语言的语法规则。

// 示例：修改Hello WASM输出
console.Call("log", "你好，WebAssembly世界！")
console.Call("log", "当前时间：", js.Global().Get("Date").New().Call("toLocaleString"))

每次修改代码后建议先思考预期结果，然后通过运行验证实际结果是否与预期一致。当预期与实际不符时，仔细分析原因可以加深对Go WASM运行机制的理解。

当您对Go WASM开发有了一定了解后，可以将演练场中的代码导出到本地项目中继续开发。点击"生成编译命令"按钮获取完整的go build命令，复制该命令在本地终端执行即可编译出.wasm文件。点击"生成HTML模板"按钮获取用于加载WASM文件的HTML页面代码，将该代码保存为index.html文件。确保您的本地Go版本支持WASM编译（Go 1.11及以上版本）。编译完成后，将生成的.wasm文件和index.html放在同一目录下，使用HTTP服务器（如python -m http.server）启动本地服务，在浏览器中打开即可运行Go WASM程序。演练场导出的代码结构清晰、注释完整，可以直接作为Go WASM项目的起点进行后续开发。

# 本地编译和运行Go WASM
set GOOS=js
set GOARCH=wasm
go build -o main.wasm ./cmd/wasm

# 使用Python启动本地HTTP服务器
python -m http.server 8080