讲师中心 微信公众号
AI工具推荐 视频效率加速

怎样用Golang实现WebAssembly前端 编译Go代码到浏览器运行

千杰酱_4459

千杰酱_4459

发布时间:2025-07-14 08:53:01

|

411人浏览过

|

来源于php中文网

原创

用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代码到浏览器运行

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

怎样用Golang实现WebAssembly前端 编译Go代码到浏览器运行

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

怎样用Golang实现WebAssembly前端 编译Go代码到浏览器运行

准备工作:安装 Go 环境

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

立即学习“go语言免费学习笔记(深入)”;

确认安装成功:

怎样用Golang实现WebAssembly前端 编译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

执行以下命令进行编译:

Li Python Sec Check
Li Python Sec Check

Python 安全规范检查工具:基于 CloudBase 规范、腾讯安全指南,LLM 智能分析(默认禁用,优先本地执行)

下载
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 文件:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Go + WebAssembly</title>
</head>
<body>
    <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>

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

注意: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 加载顺序、跨域问题等。只要一步一步来,基本都能搞定。

热门AI工具

更多
立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

相关专题

更多
golang如何定义变量
golang如何定义变量

golang定义变量的方法:1、声明变量并赋予初始值“var age int =值”;2、声明变量但不赋初始值“var age int”;3、使用短变量声明“age :=值”等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

499

2024.02.23

golang有哪些数据转换方法
golang有哪些数据转换方法

golang数据转换方法:1、类型转换操作符;2、类型断言;3、字符串和数字之间的转换;4、JSON序列化和反序列化;5、使用标准库进行数据转换;6、使用第三方库进行数据转换;7、自定义数据转换函数。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

596

2024.02.23

golang常用库有哪些
golang常用库有哪些

golang常用库有:1、标准库;2、字符串处理库;3、网络库;4、加密库;5、压缩库;6、xml和json解析库;7、日期和时间库;8、数据库操作库;9、文件操作库;10、图像处理库。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

1036

2024.02.23

golang和python的区别是什么
golang和python的区别是什么

golang和python的区别是:1、golang是一种编译型语言,而python是一种解释型语言;2、golang天生支持并发编程,而python对并发与并行的支持相对较弱等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

771

2024.03.05

golang是免费的吗
golang是免费的吗

golang是免费的。golang是google开发的一种静态强类型、编译型、并发型,并具有垃圾回收功能的开源编程语言,采用bsd开源协议。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

1526

2024.05.21

golang结构体相关大全
golang结构体相关大全

本专题整合了golang结构体相关大全,想了解更多内容,请阅读专题下面的文章。

4234

2025.06.09

golang相关判断方法
golang相关判断方法

本专题整合了golang相关判断方法,想了解更详细的相关内容,请阅读下面的文章。

1914

2025.06.10

golang数组使用方法
golang数组使用方法

本专题整合了golang数组用法,想了解更多的相关内容,请阅读专题下面的文章。

3846

2025.06.17

LLVM自定义Pass怎么写
LLVM自定义Pass怎么写

本专题聚焦LLVM自定义Pass开发,整理Pass类结构、run()方法、PreservedAnalyses、CMake构建、插件注册、-load-pass-plugin加载和测试用例编写流程。

60

2026.09.30

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn