后端开发教程 - Java、Spring Boot 实战 - msg200.com
使用 Wails 在 Go 中构建桌面应用程序
这篇文章是packagemain #6：使用 Wails视频在 Go 中构建桌面应用程序的文本版本。
众所周知，Go 主要用于构建 API、Web 后端和 CLI 工具。但有趣的是，Go 还能用在我们意想不到的地方。
例如，我们可以使用Wails框架通过 Go 和 Vue.js 构建桌面应用程序。
这个框架很新并且仍处于测试阶段，但我很惊讶用它来开发、构建和打包应用程序是如此简单。
Wails 能够将 Go 代码和 Web 前端打包成一个二进制文件。Wails CLI 可以处理项目的创建、编译和打包，让您轻松完成此操作。
应用程序
我们将构建一个非常简单的应用程序来实时显示我机器的 CPU 使用率。如果你有时间并且像 Wails 一样，你可以想出一些更有创意、更复杂的功能。
安装
Wails CLI 可以通过 进行安装。安装后，您应该使用命令go get进行设置。wails setup
go get github.com/wailsapp/wails/cmd/wails
wails setup
然后让我们用以下名称引导我们的项目cpustats：
wails init
cd cpustats
我们的项目由 Go 后端和 Vue.js 前端组成。main.go将是我们的入口点，我们可以在其中包含任何其他依赖项，还有go.mod文件来管理它们。frontend文件夹包含 Vue.js 组件、webpack 和 CSS。
概念
后端和前端之间共享数据有两个主要组件：绑定和事件。
绑定是一种允许您将 Go 代码公开（绑定）到前端的单一方法。
此外，Wails 提供了一个类似于 JavaScript 原生事件系统的统一事件系统。这意味着 Go 或 JavaScript 发送的任何事件都可以被任意一方接收。数据可以随任何事件一起传递。这让你可以做一些巧妙的事情，比如在 Go 中运行后台进程，并将任何更新通知前端。
后端
我们先开发一个后端部分，获取CPU使用率，并使用bind方法将其发送到前端。
我们将创建一个新的包并定义一个我将向前端公开（绑定）的类型。
pkg/sys/sys.go：
package sys
import (
"math"
"time"
"github.com/shirou/gopsutil/cpu"
"github.com/wailsapp/wails"
)
// Stats .
type Stats struct {
log *wails.CustomLogger
}
// CPUUsage .
type CPUUsage struct {
Average int `json:"avg"`
}
// WailsInit .
func (s *Stats) WailsInit(runtime *wails.Runtime) error {
s.log = runtime.Log.New("Stats")
return nil
}
// GetCPUUsage .
func (s *Stats) GetCPUUsage() *CPUUsage {
percent, err := cpu.Percent(1*time.Second, false)
if err != nil {
s.log.Errorf("unable to get cpu stats: %s", err.Error())
return nil
}
return &CPUUsage{
Average: int(math.Round(percent[0])),
}
}
如果你的结构体有WailsInit方法，Wails 会在启动时调用它。这允许你在主应用程序启动之前进行一些初始化。
导入sys包main.go并将 Stats 实例绑定到前端：
package main
import (
"github.com/leaanthony/mewn"
"github.com/plutov/packagemain/cpustats/pkg/sys"
"github.com/wailsapp/wails"
)
func main() {
js := mewn.String("./frontend/dist/app.js")
css := mewn.String("./frontend/dist/app.css")
stats := &sys.Stats{}
app := wails.CreateApp(&wails.AppConfig{
Width: 512,
Height: 512,
Title: "CPU Usage",
JS: js,
CSS: css,
Colour: "#131313",
})
app.Bind(stats)
app.Run()
}
前端
我们stats从 Go 中绑定了一个实例，可以通过 callind 在前端使用它window.backend.Stats。如果我们想调用一个函数，GetCPUUsage()它会返回一个 Promise。
window.backend.Stats.GetCPUUsage().then(cpu_usage => {
console.log(cpu_usage);
})
要将整个项目构建成单个二进制文件，我们应该运行wails build，-d可以添加标志来构建可调试版本。它将创建一个与项目名称匹配的二进制文件。
让我们通过在屏幕上显示 CPU 使用率值来测试它是否有效：
wails build -d
./cpustats
活动
我们使用绑定将 CPU 使用率值发送到前端，现在让我们尝试不同的方法，在后端创建一个计时器，它将使用事件方法在后台发送 CPU 使用率值。然后我们可以用 JavaScript 订阅该事件。
在 Go 中我们可以在WailsInit函数中实现这一点：
func (s *Stats) WailsInit(runtime *wails.Runtime) error {
s.log = runtime.Log.New("Stats")
go func() {
for {
runtime.Events.Emit("cpu_usage", s.GetCPUUsage())
time.Sleep(1 * time.Second)
}
}()
return nil
}
在 Vue.js 中，我们可以在组件安装时（或任何其他地方）订阅此事件：
mounted: function() {
wails.events.on("cpu_usage", cpu_usage => {
if (cpu_usage) {
console.log(cpu_usage.avg);
}
});
}
量规杆
使用仪表栏显示 CPU 使用率会很好，因此我们将为此添加第三方依赖项，只需使用npm：
npm install --save apexcharts
npm install --save vue-apexcharts
然后将其导入到main.js文件：
import VueApexCharts from 'vue-apexcharts'
Vue.use(VueApexCharts)
Vue.component('apexchart', VueApexCharts)
现在我们可以使用 apexcharts 显示我们的 CPU 使用率，并通过接收来自后端的事件来更新组件的值：
<template>
<apexchart type="radialBar" :options="options" :series="series"></apexchart>
</template>
<script>
export default {
data() {
return {
series: [0],
options: {
labels: ['CPU Usage']
}
};
},
mounted: function() {
wails.events.on("cpu_usage", cpu_usage => {
if (cpu_usage) {
this.series = [ cpu_usage.avg ];
}
});
}
};
</script>
要改变样式，我们可以直接修改src/assets/css/main.css或在组件中定义它们。
最终构建和运行
wails build -d
./cpustats
结论
我真的很喜欢使用Wails，事件概念使得控制应用程序的状态变得非常容易。
请访问wails.app或 Github 上的github.com/wailsapp/wails查看
鏂囩珷鏉ユ簮锛�https://dev.to/der_gopher/building-desktop-app-in-go-using-wails-1poh