Учебники

Электрон — Hello World

Февраль 4, 2019

Мы создали файл package.json для нашего проекта. Теперь мы создадим наше первое настольное приложение с использованием Electron.

Создайте новый файл с именем main.js. Введите следующий код в нем — 

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)

Создайте другой файл, на этот раз HTML-файл с именем index.html . Введите следующий код в нем. 

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

Запустите это приложение, используя следующую команду — 

$ electron ./main.js

Откроется новое окно. Это будет выглядеть следующим образом —

Электрон Hello World

Как работает это приложение?

Мы создали основной файл и файл HTML. Основной файл использует два модуля — app и BrowserWindow . Модуль приложения используется для управления жизненным циклом событий вашего приложения, а модуль BrowserWindow используется для создания и управления окнами браузера.

Мы определили функцию createWindow , в которой мы создаем новое BrowserWindow и присоединяем URL к этому BrowserWindow. Это HTML-файл, который отображается и показывается нам при запуске приложения.

Мы использовали собственный объектный процесс Electron в нашем html-файле. Этот объект расширен из объекта процесса Node.js и включает в себя все функции t =, в то же время добавляя еще много.

44
Share: