Zum Inhalt springen
Wails Blog

Deine erste Anwendung

Dieser Leitfaden zeigt dir, wie du deine erste Wails v3-Anwendung erstellst, einschließlich Projektsetup, Build-Prozess und Entwicklungsumgebung.



  1. Erstellen eines neuen Projekts

    Abschnitt betitelt „Erstellen eines neuen Projekts“

    Öffne dein Terminal und führe den folgenden Befehl aus, um ein neues Wails-Projekt zu erstellen:

    Terminal-Fenster
    wails3 init -n myfirstapp

    Dieser Befehl erstellt ein neues Verzeichnis namens myfirstapp mit allen notwendigen Dateien.

  2. Erkunden der Projektstruktur

    Abschnitt betitelt „Erkunden der Projektstruktur“

    Wechsle in das Verzeichnis myfirstapp. Du findest dort mehrere Dateien und Ordner:

    • Ordnerbuild/ Enthält Dateien, die vom Build-Prozess verwendet werden
      • appicon.png Das Anwendungsicon
      • config.yml Build-Konfiguration
      • Taskfile.yml Build-Aufgaben
      • Ordnerdarwin/ macOS-spezifische Build-Dateien
        • Info.dev.plist Entwicklungskonfiguration
        • Info.plist Produktionskonfiguration
        • Taskfile.yml macOS-Build-Aufgaben
        • icons.icns macOS-Anwendungsicon
      • Ordnerlinux/ Linux-spezifische Build-Dateien
        • Taskfile.yml Linux-Build-Aufgaben
        • Ordnerappimage/ AppImage-Paketierung
          • build.sh AppImage-Build-Skript
        • Ordnernfpm/ NFPM-Paketierung
          • nfpm.yaml Paketkonfiguration
          • Ordnerscripts/ Build-Skripte
            • …
      • Ordnerwindows/ Windows-spezifische Build-Dateien
        • Taskfile.yml Windows-Build-Aufgaben
        • icon.ico Windows-Anwendungsicon
        • info.json Anwendungsmetadaten
        • wails.exe.manifest Windows-Manifestdatei
        • Ordnernsis/ NSIS-Installer-Dateien
          • project.nsi NSIS-Projektdatei
          • wails_tools.nsh NSIS-Hilfsskripte
    • Ordnerfrontend/ Frontend-Anwendungsdateien
      • index.html Haupt-HTML-Datei
      • main.js Haupt-JavaScript-Datei
      • package.json NPM-Paketkonfiguration
      • Ordnerpublic/ Statische Assets
        • …
      • Inter Font License.txt Schriftlizenz
    • .gitignore Git-Ignorier-Datei
    • README.md Projektdokumentation
    • Taskfile.yml Projektaufgaben
    • go.mod Go-Modul-Datei
    • go.sum Go-Modul-Checksummen
    • greetservice.go Begrüßungsdienst
    • main.go Hauptanwendungscode

    Nimm dir einen Moment Zeit, um diese Dateien zu erkunden und dich mit der Struktur vertraut zu machen.

  3. Erstellen deiner Anwendung

    Abschnitt betitelt „Erstellen deiner Anwendung“

    Um deine Anwendung zu erstellen, führe folgenden Befehl aus:

    Terminal-Fenster
    wails3 build

    Dieser Befehl kompiliert eine Debug-Version deiner Anwendung und speichert sie in einem neuen bin-Verzeichnis.

    Nach dem Erstellen kannst du sie wie jede normale Anwendung ausführen:

    Terminal-Fenster
    ./bin/myfirstapp

    Du siehst eine einfache Benutzeroberfläche, den Ausgangspunkt für deine Anwendung. Da es sich um die Debug-Version handelt, siehst du auch Protokolle im Konsolenfenster. Dies ist für Debugging-Zwecke nützlich.

  4. Entwicklungsmodus

    Abschnitt betitelt „Entwicklungsmodus“

    Wir können die Anwendung auch im Entwicklungsmodus ausführen. Dieser Modus ermöglicht es dir, Änderungen an deinem Frontend-Code vorzunehmen und diese Änderungen in der laufenden Anwendung zu sehen, ohne die gesamte Anwendung neu erstellen zu müssen.

    1. Öffne ein neues Terminalfenster.
    2. Führe wails3 dev aus. Die Anwendung wird im Debug-Modus kompiliert und ausgeführt.
    3. Öffne frontend/index.html in deinem bevorzugten Editor.
    4. Ändere den Code und ersetze Please enter your name below durch Please enter your name below!!!.
    5. Speichere die Datei.

    Diese Änderung wird sofort in deiner Anwendung sichtbar.

    Änderungen am Backend-Code lösen einen Neuaufbau aus:

    1. Öffne greetservice.go.
    2. Ändere die Zeile mit return "Hello " + name + "!" zu return "Hello there " + name + "!".
    3. Speichere die Datei.

    Die Anwendung wird innerhalb weniger Sekunden aktualisiert.

  5. Paketierung deiner Anwendung

    Abschnitt betitelt „Paketierung deiner Anwendung“

    Sobald deine Anwendung bereit zur Verteilung ist, kannst du plattformspezifische Pakete erstellen:

    Um ein .app-Bundle zu erstellen:

    Terminal-Fenster
    wails3 package

    Dies erstellt einen Produktionsbuild und verpackt ihn in ein .app-Bundle im bin-Verzeichnis.

    Für detailliertere Informationen zu Paketierungsoptionen und -konfigurationen schaue dir unseren Packaging Guide an.

  6. Einrichten von Versionskontrolle und Modulname

    Abschnitt betitelt „Einrichten von Versionskontrolle und Modulname“

    Dein Projekt wird mit dem Platzhalter-Modulnamen changeme erstellt. Es wird empfohlen, diesen an deine Repository-URL anzupassen:

    1. Erstelle ein neues Repository auf GitHub (oder deinem bevorzugten Git-Host)
    2. Initialisiere git in deinem Projektverzeichnis:
      Terminal-Fenster
      git init
      git add .
      git commit -m "Initial commit"
    3. Lege dein Remote-Repository fest (ersetze durch deine Repository-URL):
      Terminal-Fenster
      git remote add origin https://github.com/username/myfirstapp.git
    4. Aktualisiere deinen Modulnamen in go.mod, um ihn an deine Repository-URL anzupassen:
      Terminal-Fenster
      go mod edit -module github.com/username/myfirstapp
    5. Push deinen Code:
      Terminal-Fenster
      git push -u origin main

    Dies stellt sicher, dass der Name deines Go-Moduls den Go-Modul-Namenskonventionen entspricht und das Teilen deines Codes erleichtert.

Herzlichen Glückwunsch!

Abschnitt betitelt „Herzlichen Glückwunsch!“

Sie haben gerade Ihre erste Wails-Anwendung erstellt, entwickelt und gepackt. Dies ist nur der Anfang dessen, was Sie mit Wails v3 erreichen können.

Nächste Schritte

Abschnitt betitelt „Nächste Schritte“

Wenn Sie neu bei Wails sind, empfehlen wir Ihnen, unsere Tutorials durchzulesen, die als praktische Anleitung durch die verschiedenen Funktionen von Wails führen. Das erste Tutorial ist Erstellen eines Services.

Wenn Sie ein fortgeschrittener Benutzer sind, werfen Sie einen Blick auf unsere Anleitungen, um detailliertere Informationen darüber zu erhalten, wie Sie Wails verwenden.