0

0

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

P粉602998670

P粉602998670

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

|

351人浏览过

|

来源于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

接着确保你的环境变量配置正确,尤其是 GOPATHGOROOT(如果你是新版 Go,可能默认就不需要特别设置 GOPATH 了)。


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

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

新建文件 main.go

package main

import (
    "fmt"
)

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

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


第二步:编译 Go 到 WebAssembly

执行以下命令进行编译:

AIPAI
AIPAI

AI视频创作智能体

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




    
    Go + WebAssembly


    
    


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

注意: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工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

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

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

182

2024.02.23

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

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

229

2024.02.23

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

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

343

2024.02.23

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

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

210

2024.03.05

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

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

396

2024.05.21

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

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

240

2025.06.09

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

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

194

2025.06.10

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

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

458

2025.06.17

C++ 设计模式与软件架构
C++ 设计模式与软件架构

本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。

8

2026.01.30

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
最新Python教程 从入门到精通
最新Python教程 从入门到精通

共4课时 | 22.4万人学习

Django 教程
Django 教程

共28课时 | 3.7万人学习

SciPy 教程
SciPy 教程

共10课时 | 1.3万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号