Electron - Hola mundo

Hemos creado un package.jsonarchivo para nuestro proyecto. Ahora crearemos nuestra primera aplicación de escritorio usando Electron.

Crear un nuevo archivo llamado main.js . Ingrese el siguiente código en él:

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)

Cree otro archivo, esta vez un archivo HTML llamado index.html . Ingrese el siguiente código en él.

<!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>

Ejecute esta aplicación con el siguiente comando:

$ electron ./main.js

Se abrirá una nueva ventana. Se verá así:

¿Cómo funciona esta aplicación?

Creamos un archivo principal y un archivo HTML. El archivo principal utiliza dos módulos: app y BrowserWindow . El módulo de la aplicación se usa para controlar el ciclo de vida de eventos de su aplicación, mientras que el módulo BrowserWindow se usa para crear y controlar las ventanas del navegador.

Definimos una función createWindow , donde estamos creando una nueva BrowserWindow y adjuntando una URL a esta BrowserWindow. Este es el archivo HTML que se representa y se nos muestra cuando ejecutamos la aplicación.

Hemos utilizado un proceso de objeto nativo Electron en nuestro archivo html. Este objeto se extiende desde el objeto de proceso Node.js e incluye todos lost=its funcionalidades al tiempo que agrega muchas más.

↰ Previous page Next page ↱