Electron - Hello World
Abbiamo creato un file package.jsonfile per il nostro progetto. Ora creeremo la nostra prima app desktop utilizzando Electron.
Creare un nuovo file chiamato main.js . Inserisci il seguente codice in esso -
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)Crea un altro file, questa volta un file HTML chiamato index.html . Inserisci il seguente codice in esso.
<!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>Esegui questa app utilizzando il seguente comando:
$ electron ./main.jsSi aprirà una nuova finestra. Sarà simile al seguente:
Come funziona questa app?
Abbiamo creato un file principale e un file HTML. Il file principale utilizza due moduli: app e BrowserWindow . Il modulo app viene utilizzato per controllare il ciclo di vita degli eventi dell'applicazione mentre il modulo BrowserWindow viene utilizzato per creare e controllare le finestre del browser.
Abbiamo definito una funzione createWindow , dove stiamo creando una nuova BrowserWindow e allegando un URL a questa BrowserWindow. Questo è il file HTML che viene visualizzato e mostrato quando eseguiamo l'app.
Abbiamo utilizzato un processo nativo di oggetti Electron nel nostro file html. Questo oggetto è esteso dall'oggetto del processo Node.js e include tutti i filet=its funzionalità aggiungendone molte altre.