Первая программа на Electron

При изучении языков и технологий принято создавать программу, которая здоровается со всем миром. Не будем нарушать традицию и продемонстрируем как это будет выглядеть на Electron. Создадим следующую структуру файлов:

C:\book\e1\
    css\
        style.css
    index.htm
    main.js
    preload.js

Содержимое файла main.js приведено в листинге 1.1, файла index.html — в листинге 1.2, файла style.css — в листинге 1.3, а файла preload.js — в листинге 1.4.

Листинг 1.1. Содержимое файла C:\book\e1\main.js

const { app, BrowserWindow } = require('electron');
const path = require('path');
function createWindow() {
   const win = new BrowserWindow({
      width: 500,
      height: 200,
      webPreferences: {
         preload: path.join(__dirname, 'preload.js')
      }
   });
   win.loadFile('index.html');
}
app.whenReady().then( () => {
   createWindow();
   app.on('activate', () => { // Для MacOS
      if (BrowserWindow.getAllWindows().length === 0) {
         createWindow();
      }
   });
} );
app.on('window-all-closed', () => {
   if (process.platform !== 'darwin') { // Кроме MacOS
      app.quit();
   }
});

Листинг 1.2. Содержимое файла C:\book\e1\index.html

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <meta http-equiv="Content-Security-Policy"
         content="default-src 'self'">
   <link rel="stylesheet" href="css/style.css">
   <title>Первая программа на Electron</title>
</head>
<body>
   <h1>Привет, мир!</h1>
   <div id="test"></div>
</body>
</html>

Листинг 1.3. Содержимое файла C:\book\e1\css\style.css

h1 {
   color: red;
   text-align: center;
}
#test {
   text-align: center;
   font-weight: bold;
}

Листинг 1.4. Содержимое файла C:\book\e1\preload.js

window.addEventListener('DOMContentLoaded', () => {
   let el = document.getElementById('test');
   if (el) {
      el.innerText = 'Версия Electron: ' + process.versions['electron'];
   }
});

Запустим программу на выполнение:

C:\book\e1>npm run start
> e1@1.0.0 start C:\book\e1
> electron .

Структура программы

Давайте рассмотрим структуру программы. В листинге 1.1 в первой строке импортируются идентификаторы app и BrowserWindow из пакета electron:

const { app, BrowserWindow } = require('electron');

Следующая инструкция импортирует встроенный модуль path:

const path = require('path');

Затем определяется функция createWindow() внутри которой создается объект окна с помощью класса BrowserWindow. Конструктор класса принимает объект с опциями. Мы указываем опции width и height задающие ширину и высоту окна соответственно.

Опция webPreferences позволяет задать дополнительные настройки. В качестве значения передается объект с опциями. С помощью опции preload указываем путь к файлу preload.js. Внутри этого файла мы имеем доступ как к объектной модели документа, так и к объектам Node.js. В частности при наступлении события DOMContentLoaded (структура документа сформирована) мы получаем ссылку на элемент с идентификатором test и внутри него выводим версию Electron, которую динамически получаем через свойство process.versions.

Далее с помощью метода loadFile() объекта окна загружаем файл index.html:

function createWindow() {
   const win = new BrowserWindow({
      width: 500,
      height: 200,
      webPreferences: {
         preload: path.join(__dirname, 'preload.js')
      }
   });
   win.loadFile('index.html');
}

Далее при инициализации приложения создаем объект окна:

app.whenReady().then( () => {
   createWindow();
   app.on('activate', () => {
      if (BrowserWindow.getAllWindows().length === 0) {
         createWindow();
      }
   });
} );

Внутри обработчика события window-all-closed (возникает при закрытии всех окон приложения) завершаем работу программы, вызывая метод quit() объекта приложения:

app.on('window-all-closed', () => {
   if (process.platform !== 'darwin') {
      app.quit();
   }
});