Golang编译WebAssembly浏览器运行教程

本篇文章给大家分享《Golang编译WebAssembly，浏览器运行指南》，覆盖了Golang的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

用Golang编写WebAssembly前端可通过以下步骤实现：1.安装Go环境并确认版本；2.编写Go代码（如输出字符串）；3.使用GOOS=js和GOARCH=wasm编译生成main.wasm文件；4.复制wasm_exec.js并创建HTML加载WASM文件；5.通过本地HTTP服务器运行页面。此外，可通过js.FuncOf暴露Go函数供JS调用，但需注意包体积、兼容性和调试问题。

用 Golang 编写 WebAssembly 前端，其实已经不是什么新鲜事了。Go 官方从 1.11 开始就支持将 Go 代码编译成 WebAssembly，直接在浏览器中运行。虽然它不能完全替代 JavaScript，但在一些特定场景下（比如高性能计算、加密解密、游戏逻辑等）非常有用。

下面我来一步步讲讲怎么把 Go 代码编译成 WebAssembly，并让它在浏览器里跑起来。

准备工作：安装 Go 环境

首先你得装好 Go 环境，推荐使用最新稳定版（比如 1.20 或以上）。你可以去 Go 官网 下载对应系统的版本。

确认安装成功：

go version

接着确保你的环境变量配置正确，尤其是 GOPATH 和 GOROOT（如果你是新版 Go，可能默认就不需要特别设置 GOPATH 了）。

第一步：编写一个简单的 Go 文件

我们先写个简单的例子，比如一个能被 JS 调用的函数，用来返回字符串。

新建文件 main.go：

package main

import (
    "fmt"
)

func main() {
    fmt.Println("Hello from Go in WebAssembly!")
}

这个程序很简单，但它会在浏览器控制台输出一句话。接下来我们要把它编译成 .wasm 文件。

第二步：编译 Go 到 WebAssembly

执行以下命令进行编译：

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

解释一下：

• GOOS=js 表示目标操作系统是 JavaScript 环境。
• GOARCH=wasm 指定架构为 WebAssembly。
• 输出文件是 main.wasm。

编译完成后你会看到一个 main.wasm 文件。

第三步：准备 HTML 和 JS 运行环境

Go 提供了一个配套的 JS 脚本，帮助你在浏览器中加载和运行这个 wasm 文件。你需要把这个脚本复制到你的项目目录下。

找到 $GOROOT/misc/wasm/wasm_exec.js 文件，复制到当前目录：

cp "$(go env GOROOT)/misc/wasm/wasm_exec.js" .

然后创建一个 index.html 文件：

第四步：用本地服务器运行页面

注意：WebAssembly 需要通过 HTTP 服务加载，不能直接打开 HTML 文件。你可以用 Python 快速启动一个本地服务器：

python3 -m http.server 8000

然后访问 http://localhost:8000，打开控制台就能看到输出：

Hello from Go in WebAssembly!

附加技巧：让 Go 函数可以被 JS 调用

如果你想暴露一些函数给 JS 使用，可以这样做：

package main

import (
    "syscall/js"
)

func add(this js.Value, args []js.Value) any {
    a := args[0].Int()
    b := args[1].Int()
    return a + b
}

func main() {
    c := make(chan struct{}, 0)
    js.Global().Set("addFromGo", js.FuncOf(add))
    <-c // 阻塞住，防止程序退出
}

然后在 JS 中这样调用：

console.log(window.addFromGo(5, 7)); // 输出 12

常见问题提醒

• 性能问题：Go 的 WASM 包体积较大，因为包含了运行时。适合复杂任务，不适合轻量级逻辑。
• 兼容性：现代浏览器都支持 WASM，但移动端低版本可能有问题。
• 调试麻烦：目前调试 Go 的 WASM 代码不如 JS 方便，建议多打日志。

基本上就这些。整个过程不算太难，只是细节容易出错，比如路径不对、JS 加载顺序、跨域问题等。只要一步一步来，基本都能搞定。

到这里，我们也就讲完了《Golang编译WebAssembly浏览器运行教程》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！