Electron-Einstiegsbeispiel

Im vorherigen Kapitel haben wir gelernt, wie man Electron installiert.

In diesem Abschnitt zeigen wir Schritt für Schritt, wie man eine einfache Electron-Instanz erstellt.

1. Projektverzeichnis erstellen

Öffnen Sie das Terminal und führen Sie die folgenden Befehle nacheinander aus:

mkdir my-electron-app
cd my-electron-app
npm init -y
npm install electron --save-dev

Die generierte Struktur sieht wie folgt aus:

my-electron-demo/
├─ package.json
├─ main.js
└─ index.html

2. package.json konfigurieren

Öffnen Sie package.json und ändern Sie den Inhalt wie folgt:

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "EXAMPLE Electron 测试",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "latest"
  }
}

Beschreibung:

Fields Funktion
"main" Geben Sie die Hauptprozessdatei an, die beim Start von Electron ausgeführt werden soll.
"scripts.start" Definitionnpm startInhalt der Befehlsausführung
"electron ." Gibt an, dass Electron die Anwendung im aktuellen Verzeichnis ausführen soll
"devDependencies" Entwicklungsabhängigkeiten, die nicht in die endgültige App gepackt werden.

3. Schreiben Sie die Hauptprozessdatei main.js.

Dies ist das zentrale Steuerzentrum von Electron, zuständig für das Erstellen von App-Fenstern und das Laden von Seiten.

Erstellen Sie die Datei main.js und geben Sie den folgenden vollständigen Code ein (mit ausführlichen Kommentaren):

Beispiel

// main.js — Electron-Hauptprozessdatei

// Importiere app (steuert den Anwendungslebenszyklus) und BrowserWindow (erstellt Fenster) aus dem electron-Modul.
const { app, BrowserWindow } = require('electron');

// In Node.js integriertes Modul zum Zusammenfügen von Dateipfaden
const path = require('path');

// Erstelle eine Funktion zum Erzeugen des Hauptfensters
function createWindow() {
  // Eine neue Fensterinstanz erstellen
  const win = new BrowserWindow({
    width: 800,          // Fensterbreite (Pixel)
    height: 600,         // Fensterhöhe (Pixel)
    resizable: true,     // Ob Benutzer das Fenster ziehen und in der Größe ändern dürfen (Standard: true)
    title: "EXAMPLE Electron Test",  // Fenstertitel, in der Titelleiste angezeigt
    webPreferences: {    
      // Laufzeitkonfiguration für Webseiten
      contextIsolation: true,  // Kontextisolierung aktivieren (für Sicherheit empfohlen)
      nodeIntegration: false,  // Node.js nicht direkt in Webseiten verwenden
    }
  });

  // Lade die lokale Datei index.html in das Fenster
  // path.join(__dirname, 'index.html') gibt den Pfad zu index.html im aktuellen Verzeichnis zurück
  win.loadFile(path.join(__dirname, 'index.html'));

  // Entwicklertools öffnen (optional, praktisch zum Debuggen)
  // win.webContents.openDevTools();
}

// Wenn die Electron-Initialisierung abgeschlossen ist, wird das ready-Ereignis der App ausgelöst.
// app.whenReady() gibt ein Promise zurück; nachdem es aufgelöst wurde, createWindow() aufrufen
app.whenReady().then(createWindow);

// Wird ausgelöst, wenn alle Fenster geschlossen sind (gilt nur außerhalb von macOS)
app.on('window-all-closed', () => {
  // process.platform gibt die Plattform des Betriebssystems zurück
  // Der Plattformwert für macOS ist 'darwin'; unter macOS wird das Programm in der Regel weiter ausgeführt.
  if (process.platform !== 'darwin') {
    app.quit(); // Anwendung beenden
  }
});

// macOS-Speziallogik: Fenster neu erstellen, wenn auf das Dock-Symbol geklickt wird
app.on('activate', () => {
  // Wenn derzeit kein Fenster geöffnet ist, ein neues erstellen
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

Beschreibung:

Konzepte Beschreibung
Hauptprozess Das Skript, das nach dem Start von Electron zuerst ausgeführt wird und für Fenstererstellung, Menüsteuerung, System-APIs usw. verantwortlich ist.
BrowserWindow Wird verwendet, um ein Browserfenster zu erstellen, das Webinhalte (HTML-Dateien oder URLs) lädt.
app.whenReady() Stellen Sie sicher, dass das Fenster erst nach Abschluss der Electron-Initialisierung erstellt wird; andernfalls können Fehler auftreten.
win.loadFile() Laden Sie eine lokale HTML-Datei. Sie können auchwin.loadURL('https://example.com')Website laden.
contextIsolation Isoliert Webseitenskripte von der Node-Umgebung, um die Sicherheit zu verbessern (offiziell empfohlen).
nodeIntegration falls gesetzt auftrue, wodurch Sie Node.js direkt in der Seite verwenden können (aber mit Sicherheitsrisiken).
window-all-closed Beendet die App, wenn alle Fenster geschlossen sind (wirksam unter Windows/Linux).

4. Schreiben Sie die Renderer-Seite index.html

Erstellen Sie die Datei index.html und geben Sie den folgenden Inhalt ein:

Beispiel

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Beispiel (example.com)</title>
  <style>
    body {
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      font-family: "Segoe UI", Arial, sans-serif;
      background: #f5f7fa;
    }
    .box {
      text-align: center;
      background: white;
      padding: 40px 60px;
      border-radius: 12px;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    }
    h1 {
      margin: 0 0 10px;
      color: #333;
    }
    p {
      margin: 0;
      color: #666;
    }
  </style>
</head>
<body>
  <div class="box">
    <h1>Hallo, Electron!</h1>
    <p>BEISPIEL Electron-Test. Dies ist die erste Electron-Desktop-Anwendung, die Sie erstellt haben.&#x1f389;</p>
  </div>
</body>
</html>

5. Projekt ausführen

Kehren Sie zum Terminal zurück und führen Sie aus:

npm start

Nach dem Ausführen sehen Sie ein Desktop-Fenster, das Folgendes anzeigt:

Hello, Electron!
EXAMPLE Electron 测试。这是你创建的第一个 Electron 桌面应用 &#x1f389;

Weitere Erweiterungen