使用 Wails 和 Vue 构建桌面应用程序

大家好！
这篇文章里，我想展示如何使用这个超棒的 Go 库Wails快速搭建一个桌面应用。

基本上，Wails 允许使用 Angular、React、Vue、Svelte 等 Web 技术编写桌面软件。

安装 Wails

开始使用这个库非常容易，如果您满足所有先决条件，您只需运行go get将其安装在您的本地机器上，如果您需要详细信息，这将把 wails 添加到您的GOPATH的pkg目录中。

继续运行以下命令：

go get -u github.com/wailsapp/wails/cmd/wails

一旦安装完毕，您就可以运行wails init并创建一个新的 wails 应用程序。

Wails 的工作原理

通常，wails init命令会提示您一些问题，例如您的应用程序的名称以及您想要使用的前端技术。

我已经为我的应用程序命名randomapp，并选择VueJS作为前端框架。

这将生成您开始所需的所有文件。

我发现非常酷的是wails允许你将后端逻辑连接到前端的方式。

有一个名为 wails 的函数bind可以为您完成所有工作，正如您在打开时在其示例中看到的那样main.go。

这里app.Bind(basic)绑定了basic函数，我们可以从前端访问它。

让我们为应用程序提供服务，这样我就可以向您展示如何为开发提供服务，为该应用程序提供服务的最佳方式是打开两个终端窗口。

一个放置在项目根目录中，使用以下命令运行后端：

wails serve

第二个放置在前端目录中，使用以下命令运行前端：

npm run serve

现在如果我们访问http://localhost:8080，我们可以看到我们的应用程序

好！让我们在浏览器中打开一个控制台，通过简单的调用来获取后端数据backend.basic()。

我们可以看到，我们可以访问从后端绑定的基本函数，该函数返回“Hello, World!”字符串。

Wails 的工作原理基本就是这样的。现在，让我们将所有这些付诸实践，构建一个随机应用程序。

构建实际应用程序

后端

从后端开始，我将移除basic绑定和函数。此外，我还将在配置中添加一个可调整大小的选项，并将其设置为 true，wails.CreateApp这样我们的窗口稍后就可以调整大小了 🙂。

因此，我不会使用那个基本函数，而是创建一个非常简单的包，server并用一个server.go文件来命名它。

我将在那里创建一个struct函数New来返回我的结构的实例server。

接下来，我将添加一个服务器接收器函数，它将返回一些随机数据。

app.Bind现在最后一步是在我们的main.go文件中绑定它。

这就是我们对后端数据所要做的全部工作，我们将其保持简单。

前端

现在让我们跳转到我们的前端目录，这是一个 VueJs 应用程序，其中已经有一些组件，我们有一个主页和一个关于页面。

为了简单起见，我将删除components、store和views文件夹。我们只需要App.vue。

确保从文件中删除不必要的 html 标签，并从创建应用程序挂载函数中App.vue删除use(store)和。use(router)main.js

好的，接下来让我们在模板中添加一个按钮，并将点击事件绑定到fetchData。

该fetchData方法将调用我们的后端，就像我们之前在浏览器控制台中所做的那样。对于我们使用的window.backend，我们可以访问我们的Server（因为我们绑定了它💪🏻）及其GetRandomData()函数。

结果GetRandomData将被分配给模板变量，工作就完成了！

让我们打包我们的代码来将其作为桌面应用程序进行测试。

打包最终应用程序

最后一步是简单地打包应用程序，或者构建可供使用的桌面应用程序。

为此，我们可以停止在终端窗口中运行的开发进程，而是在项目根目录中运行以下命令：

wails build -p

现在，如果您转到build项目目录，您将拥有一个.app或.exe取决于您使用的操作系统。

您只需打开它并测试我们的应用程序！！

*快速说明：*我已将颜色属性更改main.go为白色背景，然后wails build -p再次运行🙂

看起来效果很好👍🏼

结论

这就是这篇文章的全部内容，现在您已经知道如何使用这个Golang框架构建您的下一个桌面应用程序了。

希望这会有帮助😀

很快再见👋🏼