站長資訊網
眾所周知，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 將在啟動時調用它。這允許您在主應用程序啟動之前進行一些初始化。
在 main.go 中引入 sys 這個包，綁定 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() }
前端
我們從 Go 綁定了 stats 實例，它可以在前端被 window.backend.Stats 調用。如果我們想調用 GetCPUUsage() 函數 ，它會給我們返回一個應答。
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，或者在組件中定義它們。
最后，構建并運行
wails build -d ./cpustats
推薦教程：《Go教程》
