Looking for electron Answers? Try Ask4KnowledgeBase
Looking for electron Keywords? Try Ask4Keywords

electronErste Schritte mit Elektron


Bemerkungen

Was ist Elektron?

Electron ist ein Open-Source-Framework , das zur Erstellung von Desktop-Anwendungen mit HTML , CSS und JavaScript verwendet wird . Im Inneren funktioniert es dank Chromium und Node.js.

Der ursprüngliche Entwickler GitHub arbeitet mit einer breiten Community von Entwicklern zusammen, um das Projekt zu pflegen, das hier zu finden ist .

Einer der Hauptvorteile bei der Verwendung von Electron besteht darin, dass es auf der Grundlage von Web-Technologien plattformübergreifend ist und Anwendungen mit Linux, MacOS und Windows mit demselben Code bereitstellen kann.

Es enthält auch native Elemente wie Menüs und Benachrichtigungen sowie nützliche Entwicklungstools für das Debugging und Absturzberichte.

Apps, die auf Electron basieren

Beispiele für Anwendungen, die dieses Framework verwenden, sind:

... und viele andere

Versionen

Ausführung Bemerkungen Veröffentlichungsdatum
1.0.0 2016-05-09
1.0.1 2016-05-11
1.0.2 2016-05-13
1.1.0 2016-05-13
1.1.1 2016-05-20
1.1.2 2016-05-24
1.1.3 2016-05-25
1.2.0 2016-05-26
1.2.1 2016-06-01
1.2.2 2016-06-08
1.2.3 Es gibt mehr zwischen diesem und
1.4.7, aber es waren zu viele
auflisten
2016-06-16
1.4.7 Letzte Version ab 19. November 2016 2016-11-19
1.6.11 2017-05-25
1.7.3 Letzte Version ab 19. Juni 2017 2017-06-19

Hallo Welt!

Konfiguration

Eine Electron-Projektstruktur sieht normalerweise so aus:

hello-world-app/
├── package.json
├── index.js
└── index.html
 

Nun erstellen wir die Dateien und initialisieren unsere package.json .

$ mkdir hello-world-app && cd hello-world-app
$ touch index.js
$ touch index.html
$ npm init
 

Hinweis: Wenn der main nicht in package.json angegeben package.json , verwendet Electron index.js als Standardeinstiegspunkt.

Der Hauptprozess

In Electron wird der Prozess, der das package.json , als Hauptprozess bezeichnet . Hier können wir eine GUI anzeigen, indem Sie BrowserWindow Instanzen BrowserWindow .

Fügen Sie Folgendes zu index.js :

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

// Global reference to the window object
let win

// This method will be called when Electron has finished
// initialization and is ready to create browser windows
app.on('ready', function(){
    // Create the window
    win = new BrowserWindow({width: 800, height: 600})

    // Open and load index.html to the window
    win.loadURL('file://' + __dirname + '/index.html')

    // Emitted when the window is closed.
    win.on('closed', () => {
        // Dereference the window object
        win = null
    });
})

// Quit the app if all windows are closed
app.on('window-all-closed', () => {
    app.quit()
})
 

HTML Template & Renderer Prozess

Als Nächstes erstellen wir die GUI für die App. Electron verwendet Webseiten als GUI, die jeweils in einem eigenen Prozess ausgeführt werden, der als Renderer-Prozess bezeichnet wird .

Fügen Sie den folgenden Code zu index.html :

<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>
 

App ausführen

Es gibt mehrere Möglichkeiten, eine Electron App auszuführen.

Mit electron-prebuilt Installation weltweit

Vergewissern Sie sich zunächst, dass Sie ein electron-prebuilt installiert haben .

Jetzt können wir die App mit diesem Befehl testen:

$ electron .
 

Methode 2 - Ohne electron-prebuilt System

Zuerst müssen wir den Ordner Ihrer App eingeben (den Ordner, in dem package.json ist).

Öffnen Sie dort ein Terminal- / Eingabeaufforderungsfenster und geben Sie npm install , um die erforderlichen Dateien im Ordner dieser App zu installieren.

npm start , um die App auszuführen. package.json Sie, dass Ihre package.json noch ein package.json angeben muss.

Wenn alles richtig funktioniert hat, sollten Sie so etwas sehen:

Geben Sie hier die Bildbeschreibung ein

Herzliche Glückwünsche! Sie haben erfolgreich Ihre erste Electron-App erstellt.

Installation von Electron

Abhängigkeiten

Um ein Elektron zu installieren, müssen Sie zuerst Node.js installieren, das mit npm geliefert wird .

Wie installiere ich es?

Npm verwenden :

# Install the `electron` command globally in your $PATH
npm install electron -g

# OR

# Install as a development dependency
npm install electron --save-dev