Beispiel für die Erstellung einer Desktop-Anwendung mit dem Go Wails-Framework

Wie wir alle wissen, ist Go Wird hauptsächlich zum Erstellen von APIs, Web-Backends und CLI-Tools verwendet. Aber das Interessante ist, dass Go an Orten eingesetzt werden kann, die wir nicht erwartet haben.

Zum Beispiel können wir mithilfe des Wails-Frameworks eine Desktop-Anwendung mit Go und Vue.js erstellen.

Dies ist ein neues Framework, noch in der Betaphase, aber ich war überrascht, wie einfach es ist, Anwendungen zu entwickeln und zu erstellen.

Wails bietet die Möglichkeit, Go-Code und Web-Frontend in einer einzigen Binärdatei zu packen. Wails CLI erleichtert Ihnen dies, indem es die Erstellung, Kompilierung und Verpackung von Projekten übernimmt.

Anwendung

Wir werden eine sehr einfache App erstellen, um die CPU-Auslastung meiner Maschine in Echtzeit anzuzeigen. Wenn Sie Zeit haben und Wails mögen, können Sie sich etwas Kreativeres und Komplexeres einfallen lassen.

Installation

Die Wails-CLI kann mit go get installiert werden. Nach der Installation sollten Sie zum Einrichten den Befehl wails setup verwenden.

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

Dann lasst uns unser Projekt starten mit cpustats:

wails init
cd cpustats

Unser Projekt umfasst ein Go-Backend und ein Vue.js-Frontend. main.go wird unser Einstiegspunkt sein, an dem wir alle anderen Abhängigkeiten zusammen mit go.mod Dateien zu deren Verwaltung einbinden können. Der Ordner frontend enthält Vue.js-Komponenten, Webpack und CSS.

Konzepte

Es gibt zwei Hauptkomponenten für den Datenaustausch zwischen Backend und Frontend: Bindungen und Ereignisse.

Bindung ist eine einzelne Methode, mit der Sie Ihren Go-Code am Frontend verfügbar machen (binden) können.

Darüber hinaus bietet Wails auch ein einheitliches Ereignissystem, ähnlich dem lokalen Ereignissystem von Javascript. Dies bedeutet, dass jedes von Go oder Javascript gesendete Ereignis von beiden Parteien empfangen werden kann. Daten können zusammen mit jedem Ereignis übergeben werden. Dies ermöglicht Ihnen elegante Dinge wie die Ausführung eines Hintergrundprozesses in Go und die Benachrichtigung des Frontends über alle Aktualisierungen.

Backend

Lassen Sie uns zunächst einen Backend-Teil entwickeln, der die CPU-Auslastung erfasst und diese dann mithilfe der bind-Methode an das Frontend sendet.

Wir werden ein neues Paket erstellen und einen Typ definieren, den ich dem Frontend zur Verfügung stellen (binden) werde.

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

Wenn Ihre Struktur eine WailsInit-Methode hat, ruft Wails diese beim Start auf. Dadurch können Sie vor dem Start der Hauptanwendung einige Initialisierungen durchführen.

Führen Sie das main.go-Paket in sys ein und binden Sie die Stats-Instanz wieder an das Front-End:

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()
}

Front-end

Wir haben -Instanz, die im Frontend stats aufgerufen werden kann. Wenn wir die Funktion window.backend.Stats aufrufen möchten, erhalten wir eine Antwort. GetCPUUsage()

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

ausführen. Dies kann durch Hinzufügen des Flags wails build erfolgen, um eine debuggbare Version zu erstellen. Es wird eine Binärdatei mit einem Namen erstellt, der mit dem Projektnamen übereinstimmt. -d

wails build -d
./cpustats

tun: 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
}

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

:npm

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

-Datei: main.js

import VueApexCharts from 'vue-apexcharts'

Vue.use(VueApexCharts)
Vue.component('apexchart', VueApexCharts)

<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>

direkt ändern oder in Komponenten definieren. src/assets/css/main

wails build -d
./cpustats

Nach dem Login kopieren

Nach dem Login kopieren

Go Tutorial“

Das obige ist der detaillierte Inhalt vonBeispiel für die Erstellung einer Desktop-Anwendung mit dem Go Wails-Framework. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!