仅需简单 5 步，给你的 Golang 程序添加 GUI

首发于：https://studygolang.com/articles/12065

创建一个 Golang app 是一件简单又轻松的事情，但是有时候你想给你的应用锦上添花：创建一个 GUI！

在本篇文章中，我将通过使用 astilectron 工具中的 bootstrap 以及 bundler 给一个简单的 Golang 程序添加 GUI。

我们的带有 GUI 的 Golang app 能够打开一个文件夹并且展示其中的内容。

你可以在这里找到完成后的 代码 ：

第一步：组织项目结构

文件夹结构如下：

你将看到，我们需要 3 种不同格式的图标以完成不同平台的编译： 用于 平台、 用于 平台、 用于 平台。

我们将使用以下 CSS/JS 库：

astiloader

astimodaler

astinotifier

chartjs

fontAwesome

第二步：搭建基础架构

Go

首先我们需要在 中导入 astilectron 的 bootstrap 源码包 :

2 个全局变量 和 将会通过 bundler 打包自动添加进去。

随后我们将发现我们的主页变成了 ，我们将有一个含有 2 个项目( 和 )的菜单并且会出现一个 , ， 背景色的窗口。

我们要在 go 上添加 选项，因为我们需要使用 HTML/JS/CSS 调试工具。

最后我们将指向 的指针存入全局变量 ，以备后续在使用 选项时，它包含一个在窗口、菜单及其他所有对象被创建时立即执行的回调函数。

HTML

现在我们需要在 中创建我们的 HTML 主页：

这里没什么特殊的地方，我们声明我们的 和 文件，我们设置 html 文件结构并且需要确保我们的 脚本通过 进行了初始化

CSS

现在需要在 文件中创建我们的 CSS：

JS

然后我们在 中创建 JS ：

通过 方法正确的将库初始化。

第三步：建立起 Go 与 Javascript 间的通信

万事俱备，只欠东风：我们需要将 Go 与 Javascript 建立起通信。

Javascript 通信 Go

为了让 Javascript 与 Go 进行通信，首先从 Javascript 向 Go 发送一条消息，并且在 GO 接受到消息后执行回调函数：

同时我们在 Go 中监听来自 Javascript 的消息，并且通过 bootstrap 的 给 Javascript 发送消息：

这是一个简单的例子，将在 js 的输出中打印出 。

在这种情形中，我们需要更多的逻辑因为我们想要允许打开一个文件夹并且展示其中的内容。

因此我们将下面的代码加入到 中：

一旦 Javascript 的 命名空间准备好，它执行新的 方法，该方法会给 Go 发送一条消息，接收返回的信息，并且更新相应的 HTML 。

然后我们将下面代码加入到 中：

在接收到正确的信息时，它将执行新的 方法，并返回关于目录的有价值的信息。

建立从 Go 向 Javascript 通信

为了建立从 Go 向 Javascript 的通信，我们首先需要从 Go 中向 Javascript 发送一条消息并且在 Javascript 收到消息后执行回调。

同时我们在 Javascript 中监听来自 Go 的消息并发送一个选项消息给 Go：

这个简单的例子将在 Go 的输出中打印 。在我们的项目里，我们先将下面的代码加入到 中：

它使得 关于 选项变成可点击的，并且渲染出一个有合适内容的模态框，在 Go app 完成初始化 5s 后它会显示一个提示框。

最后我们将下面的代码加入到 中：

它将监听 Go 发送过来的消息并做出相应的反应。

第四步: 打包到 app

现在代码已经完成，我们需要确保我们能够以最好的方式把 Golang GUI app 呈现给我们的用户：

一个 MacOSX app 给 用户

一个含有好看图标的 给 用户

一个简单的源码文件给 用户

幸运的是，我们可以通过 astilectron 的 bundler 来进行操作。

首先我们通过下面命令进行安装：

然后我们在 中给 bootstrap 添加配置项：

然后我们创建配置文件，命名为 ：

最后我们在项目文件夹下运行下面的命令（确保 在你的 中）

第五步： 实际效果

啊哈！结果在 文件夹下，快来去试一试 :)

你当然可以打包你的 Golang GUI app 给其他环境，在 bundler 打包文档中查看如何将程序打包到其他环境。

结论

感谢 astilectron 的 bootstrap 和 bundler ，有了一点点的组织和结构，给你的 Golang 程序添加 GUI 从未如此简单。

需要指出的是这种方法有 2 个主要的缺点：

代码包的大小至少有 50 MB，第一次执行后，文件大小至少将有 200 MB

内存的消耗有些疯狂，因为 Electron 并不擅长对内存的管理

但是如果你准备掌握它，那么你在给你的程序添加 GUI 时将非常便利！

享受 GUI 编码的快乐吧！

via: https://medium.com/@social_57971/how-to-add-a-gui-to-your-golang-app-in-5-easy-steps-c25c99d4d8e0

作者：Asticode

译者：fengchunsgit

校对：rxcai,polaris1119

本文由 GCTT 原创编译，Go 中文网 荣誉推出