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

Um das gesamte Projekt in einer einzigen Binärdatei zu erstellen, sollten wir

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

Testen wir, ob es funktioniert, indem wir einfach den CPU-Auslastungswert auf dem Bildschirm anzeigen.

wails build -d
./cpustats

Ereignisse

Wir verwenden die Bindung, um den CPU-Nutzungswert an das Frontend zu senden. Jetzt versuchen wir einen anderen Ansatz: Erstellen wir einen Timer im Hintergrund, der im Hintergrund verwendet wird die Ereignismethode CPU-Auslastungswert senden. Anschließend können wir die Veranstaltung in Javascript abonnieren.

In Go können wir dies in der Funktion

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
}

In Vue.js können wir dieses Ereignis abonnieren, wenn die Komponente gemountet wird (oder irgendwo anders):

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

Messleiste

Es wäre schön, eine Messleiste zu haben, um die CPU-Auslastung anzuzeigen, daher werden wir eine Abhängigkeit von Drittanbietern einbeziehen, verwenden Sie einfach

:npm

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

und importieren Sie dann die

-Datei: main.js

import VueApexCharts from 'vue-apexcharts'

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

Jetzt können wir apexccharts verwenden, um die CPU-Auslastung anzuzeigen und den Wert der Komponente zu aktualisieren, indem wir Ereignisse vom Backend empfangen:

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

Um Stile zu ändern können wir

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

Zum Schluss erstellen und ausführen

wails build -d
./cpustats

Empfohlenes Tutorial: „

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!