Go Wails 框架建立桌面應用範例

#                                                        

上已知，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></apexchart>
</template>

<script>
export default {
  data() {
    return {
      series: [0],
      options: {
        labels: [&#39;CPU Usage&#39;]
      }
    };
  },
  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教學》

以上是Go Wails 框架建立桌面應用範例的詳細內容。更多資訊請關注PHP中文網其他相關文章！