Electron-Tutorial

Electron (früher Atom Shell) ist ein quelloffenes, plattformübergreifendes Framework zur Entwicklung von Desktop-Anwendungen, das von GitHub entwickelt wurde.

Electron ist ein Open-Source-Framework, das speziell für die Erstellung plattformübergreifender Desktop-Anwendungen mit Webtechnologien (HTML, CSS und JavaScript) entwickelt wurde.

Electron ermöglicht es uns, Desktop-Anwendungen genauso zu schreiben wie Webseiten, z. B. .exe unter Windows, .app unter macOS und ausführbare Dateien unter Linux.

Electron = Chromium (Browser-Engine) + Node.js (Backend-Funktionen) + Desktop-Anwendungsshell.

Welche Grundkenntnisse sind erforderlich, um Electron zu lernen?

Bevor du Electron lernst, reicht es, diese wenigen Dinge zu beherrschen:

  • Kennen Sie sich ein wenig mitJavaScript aus。
  • Wisse, wie manNode.jsundnpm verwendet,um das Skript auszuführen.
  • Ein wenig verstehenHTMLund Selektoren(zum Beispiel#id、.class）；
  • Das Terminal verwenden könnenBefehle ausführen.

Kernkonzepte

Stell dir vor, wenn du normalerweise einen Browser benutzt, um Websites zu besuchen, siehst du Seiten, die mit HTML erstellt, mit CSS gestaltet und mit JavaScript interaktiv gemacht wurden. Electron ist wie das Verpacken eines Browsers und dessen Bündelung, sodass er unabhängig ausgeführt werden kann, ohne dass Benutzer manuell einen Browser öffnen müssen.

Technologie-Stack：

  • Chromium: Bietet eine Seiten-Rendering-Engine, die sicherstellt, dass deine Anwendungsoberfläche korrekt angezeigt wird.
  • Node.js: Bietet systemnahe APIs, mit denen du auf Low-Level-Funktionen wie das Dateisystem und das Netzwerk zugreifen kannst.
  • Native APIs: Ermöglicht das Aufrufen nativer Betriebssystemfunktionen wie Menüs und Dialogfelder.

Warum Electron wählen?

Entwicklungsvorteile

1. Einheitlicher Technologie-Stack

  • Mit vertrauten Webtechnologien entwickeln
  • Frontend-Entwickler können schnell einsteigen
  • Ein reichhaltiges Ökosystem an Webressourcen steht zur Verfügung

2. Plattformübergreifende Unterstützung

  • Einmal entwickeln, auf mehreren Plattformen ausführen
  • Unterstützt Windows, macOS, Linux
  • Die Oberfläche und Funktionalität bleiben auf verschiedenen Systemen konsistent.

3. Hohe Entwicklungseffizienz

  • Hot-Reload-Funktionalität für die Echtzeitvorschau von Änderungen
  • Debugging-Tools sind ausgereift, und du kannst Chrome DevTools verwenden.
  • Aktive Community mit schneller Problemlösung

Beispiel

Angenommen, wir möchten eine Notepad-Anwendung erstellen.

In Electron benötigen Sie nur:

npm install electron

Erstelle eine main.js:

Beispiel

const { app, BrowserWindow } = require('electron');

app.whenReady().then(() => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  });
  win.loadFile('index.html'); // Dies ist deine Weboberfläche
});

Dann ist index.html einfach eine gewöhnliche Webseite:

Beispiel

<h1>Mein Desktop-Notizblock</h1>
<textarea></textarea>

Ausführen:

npx electron .

Auf diese Weise wird unsere Webseite in eine Desktop-Anwendung umgewandelt!

Referenzressourcen

Weitere Erweiterungen