您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)Go Wails框架構(gòu)的安裝和使用,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個(gè)參考,希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。
眾所周知,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)工作。
我們將構(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),我們可以在其中包含任何其他依賴(lài)項(xiàng),還有 go.mod
文件來(lái)管理它們。frontend
文件夾包含 Vue.js 組件,webpack 和 CSS。
有兩個(gè)主要組件用于在后端和前端之間共享數(shù)據(jù):綁定和事件。
綁定是一個(gè)單一的方法,它允許你向前端公開(kāi)(綁定)你的 Go 代碼。
此外,Wails 還提供了一個(gè)統(tǒng)一的事件系統(tǒng),類(lèi)似于 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è)類(lèi)型,我將公開(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è)名稱(chēng)與項(xiàng)目名稱(chē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); } }); }
如果使用一個(gè)測(cè)量條來(lái)顯示 CPU 的使用情況就好了,因此我們將包含一個(gè)第三方依賴(lài)項(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
,或者在組件中定義它們。
wails build -d ./cpustats
關(guān)于Go Wails框架構(gòu)的安裝和使用就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。