眾所周知，Go 主要用于構(gòu)建 API、web 后端和 CLI 工具。但有趣的是，Go 可以用在我們沒(méi)有預(yù)料到的地方。

例如，我們可以使用 Wails 框架用 Go 和 Vue.js 構(gòu)建一個(gè)桌面應(yīng)用程序。

這是一個(gè)新框架，還在測(cè)試階段，但我很驚訝，用它可以很容易的開(kāi)發(fā)，建立應(yīng)用程序。

Wails 提供了將 Go 代碼和 web 前端打包成單一二進(jìn)制文件的能力。Wails CLI 通過(guò)處理項(xiàng)目創(chuàng)建、編譯和打包，使您可以輕松地完成這項(xiàng)工作。

應(yīng)用程序

我們將構(gòu)建一個(gè)非常簡(jiǎn)單的應(yīng)用程序來(lái)實(shí)時(shí)顯示我的機(jī)器的 CPU 使用情況。如果你有時(shí)間，喜歡 Wails，你可以想出一些更有創(chuàng)意和更復(fù)雜的東西。

安裝

Wails CLI 可以使用 go get 安裝。安裝之后，你應(yīng)該使用 wails setup 命令進(jìn)行設(shè)置。

go get github.com/wailsapp/wails/cmd/wails wails setup

然后讓我們用 cpustats 來(lái)啟動(dòng)我們的項(xiàng)目:

wails init cd cpustats

我們的項(xiàng)目包括 Go 后端和 Vue.js 前端。main.go 將是我們的入口點(diǎn)，我們可以在其中包含任何其他依賴項(xiàng)，還有 go.mod 文件來(lái)管理它們。frontend 文件夾包含 Vue.js 組件，webpack 和 CSS。

概念

有兩個(gè)主要組件用于在后端和前端之間共享數(shù)據(jù)：綁定和事件。

綁定是一個(gè)單一的方法，它允許你向前端公開(kāi)(綁定)你的 Go 代碼。

此外，Wails 還提供了一個(gè)統(tǒng)一的事件系統(tǒng)，類似于 Javascript 的本地事件系統(tǒng)。這意味著從 Go 或 Javascript 發(fā)送的任何事件都可以由任何一方接收。數(shù)據(jù)可以隨任何事件一起傳遞。這允許你做一些優(yōu)雅的事情，比如讓后臺(tái)進(jìn)程在 Go 中運(yùn)行，并通知前端任何更新。

后端

讓我們先開(kāi)發(fā)一個(gè)后端部分，獲取 CPU 使用情況，然后使用 bind 方法將其發(fā)送到前端。

我們將創(chuàng)建一個(gè)新的包，并定義一個(gè)類型，我將公開(kāi)(綁定)到前端。

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])),     } }

如果你的結(jié)構(gòu)體有一個(gè) WailsInit 方法，Wails 將在啟動(dòng)時(shí)調(diào)用它。這允許您在主應(yīng)用程序啟動(dòng)之前進(jìn)行一些初始化。

在 main.go 中引入 sys 這個(gè)包，綁定 Stats 實(shí)例返回給前端：

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 實(shí)例，它可以在前端被 window.backend.Stats 調(diào)用。如果我們想調(diào)用 GetCPUUsage() 函數(shù) ，它會(huì)給我們返回一個(gè)應(yīng)答。

window.backend.Stats.GetCPUUsage().then(cpu_usage => {     console.log(cpu_usage); })

要將整個(gè)項(xiàng)目構(gòu)建成單一的二進(jìn)制文件，我們應(yīng)該運(yùn)行 wails build，可以添加 -d 標(biāo)志來(lái)構(gòu)建一個(gè)可調(diào)試的版本。它將創(chuàng)建一個(gè)名稱與項(xiàng)目名稱匹配的二進(jìn)制文件。

讓我們通過(guò)簡(jiǎn)單地在屏幕上顯示 CPU 使用值來(lái)測(cè)試它是否工作。

wails build -d ./cpustats

事件

我們使用綁定將 CPU 使用值發(fā)送到前端，現(xiàn)在讓我們嘗試不同的方法，讓我們?cè)诤笈_(tái)創(chuàng)建一個(gè)計(jì)時(shí)器，它將使用事件方法在后臺(tái)發(fā)送 CPU 使用值。然后我們可以訂閱 Javascript 中的事件。

在 Go 中，我們可以在 WailsInit 函數(shù)中實(shí)現(xiàn)：

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 中，我們可以在組件掛載(或任何其他地方)時(shí)訂閱此事件：

mounted: function() {     wails.events.on("cpu_usage", cpu_usage => {         if (cpu_usage) {             console.log(cpu_usage.avg);         }     }); }

測(cè)量條

如果使用一個(gè)測(cè)量條來(lái)顯示 CPU 的使用情況就好了，因此我們將包含一個(gè)第三方依賴項(xiàng)，只需使用 npm 即可：

npm install --save apexcharts npm install --save vue-apexcharts

然后導(dǎo)入 main.js 文件:

import VueApexCharts from 'vue-apexcharts'  Vue.use(VueApexCharts) Vue.component('apexchart', VueApexCharts)

現(xiàn)在，我們可以使用 apexcharts 顯示 CPU 使用情況，并通過(guò)從后端接收事件來(lái)更新組件的值:

<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，或者在組件中定義它們。

最后，構(gòu)建并運(yùn)行

wails build -d ./cpustats

推薦教程：《Go教程》