Electron - Hello World

Nós criamos um package.jsonarquivo para o nosso projeto. Agora vamos criar nosso primeiro aplicativo de desktop usando Electron.

Criar um novo arquivo chamado main.js . Digite o seguinte código nele -

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)

Crie outro arquivo, desta vez um arquivo HTML chamado index.html . Digite o seguinte código nele.

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

Execute este aplicativo usando o seguinte comando -

$ electron ./main.js

Uma nova janela se abrirá. Será parecido com o seguinte -

Como este aplicativo funciona?

Criamos um arquivo principal e um arquivo HTML. O arquivo principal usa dois módulos - app e BrowserWindow . O módulo de aplicativo é usado para controlar o ciclo de vida do evento do seu aplicativo, enquanto o módulo BrowserWindow é usado para criar e controlar janelas do navegador.

Definimos uma função createWindow , onde estamos criando uma nova BrowserWindow e anexando uma URL a esta BrowserWindow. Este é o arquivo HTML que é renderizado e mostrado para nós quando executamos o aplicativo.

Usamos um processo de objeto Electron nativo em nosso arquivo html. Este objeto é estendido do objeto de processo Node.js e inclui todos ost=its funcionalidades ao adicionar muitos mais.

↰ Previous page Next page ↱