electronAan de slag met electron


Opmerkingen

Wat is Electron?

Electron is een open-source framework , dat wordt gebruikt om desktop-applicaties te maken met HTML , CSS en JavaScript . Aan de binnenkant werkt het dankzij Chromium en Node.js.

De oorspronkelijke maker, GitHub , werkt met een brede gemeenschap van ontwikkelaars om het project te onderhouden, dat hier te vinden is .

Een van de belangrijkste voordelen van het gebruik van Electron is dat, omdat het is gebaseerd op webtechnologieën, het platformoverschrijdend is , waardoor toepassingen voor Linux, MacOS en Windows met dezelfde code kunnen worden geïmplementeerd.

Het bevat ook native elementen zoals menu's en meldingen, evenals handige ontwikkeltools voor foutopsporing en crashrapportage.

Apps gebouwd op Electron

Enkele voorbeelden van toepassingen die dit framework gebruiken, zijn:

... en vele anderen .

versies

Versie Opmerkingen Publicatiedatum
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 Er zijn meer tussen dit en
1.4.7, maar er waren er teveel
om op te sommen
2016/06/16
1.4.7 Laatste versie vanaf 19 november 2016 2016/11/19
1.6.11 2017/05/25
1.7.3 Laatste versie vanaf 19 juni 2017 2017/06/19

Hallo Wereld!

Opstelling

Een Electron-projectstructuur ziet er meestal zo uit:

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

Laten we nu de bestanden maken en ons package.json initialiseren.

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

Opmerking: als de main niet is opgegeven in package.json , gebruikt Electron index.js als standaardinvoerpunt.

Het hoofdproces

In Electron wordt het proces dat het package.json uitvoert, het hoofdproces genoemd . Hier kunnen we een GUI weergeven door BrowserWindow instanties te maken.

Voeg het volgende toe aan 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-sjabloon & Renderer-proces

Vervolgens maken we de GUI voor de app. Electron gebruikt webpagina's als zijn GUI, die elk in hun eigen proces draaien dat het rendererproces wordt genoemd .

Voeg de volgende code toe aan index.html :

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

De app uitvoeren

Er zijn meerdere manieren om een Electron-app uit te voeren.

Met electron-prebuilt geïnstalleerde electron-prebuilt Globally

Zorg er eerst voor dat electron-prebuilt geïnstalleerd .

Nu kunnen we de app testen met deze opdracht:

$ electron .
 

Methode 2 - Zonder electron-prebuilt geïnstalleerde electron-prebuilt

Eerst moeten we de map van uw app invoeren (de map waar package.json is).

Open daar een Terminal / Command Prompt-venster en typ npm install om het benodigde in de map van die app te installeren.

Voer daarna npm start in om de app te starten. Houd er rekening mee dat uw package.json nog steeds een 'start'-script moet specificeren.

Als alles correct werkte, zou je zoiets moeten zien:

voer hier de afbeeldingsbeschrijving in

Gefeliciteerd! U hebt met succes uw eerste Electron-app gemaakt.

Installatie van Electron

afhankelijkheden

Om elektron te installeren, moet u eerst Node.js installeren, dat wordt geleverd met npm .

Hoe installeer ik het?

Gebruik npm :

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

# OR

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