Electron - Bonjour le monde
Nous avons créé un package.jsonfichier pour notre projet. Nous allons maintenant créer notre première application de bureau en utilisant Electron.
Créer un nouveau fichier appelé main.js . Entrez le code suivant -
const {app, BrowserWindow} = require('electron')
const url = require('url')
const path = require('path')
let win
function createWindow() {
win = new BrowserWindow({width: 800, height: 600})
win.loadURL(url.format ({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
}
app.on('ready', createWindow)Créez un autre fichier, cette fois un fichier HTML appelé index.html . Saisissez-y le code suivant.
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>Exécutez cette application à l'aide de la commande suivante -
$ electron ./main.jsUne nouvelle fenêtre s'ouvrira. Cela ressemblera à ce qui suit -
Comment fonctionne cette application?
Nous avons créé un fichier principal et un fichier HTML. Le fichier principal utilise deux modules - app et BrowserWindow . Le module d'application est utilisé pour contrôler le cycle de vie des événements de votre application tandis que le module BrowserWindow est utilisé pour créer et contrôler les fenêtres du navigateur.
Nous avons défini une fonction createWindow , dans laquelle nous créons une nouvelle BrowserWindow et attachons une URL à cette BrowserWindow. Il s'agit du fichier HTML qui nous est rendu et qui nous est montré lorsque nous exécutons l'application.
Nous avons utilisé un processus d'objet Electron natif dans notre fichier html. Cet objet est étendu à partir de l'objet de processus Node.js et comprend tous lest=its fonctionnalités tout en ajoutant beaucoup plus.