Окно BrowserWindow

BrowserWindow — класс Electron, который создаёт окно программы. Каждое окно — это рамка операционной системы, а внутри неё страница в отдельном процессе отрисовки. Создают окна только в главном процессе.

Размер и заголовок

Параметры окна передаются объектом в конструктор. Откройте main.js:

// main.js
const { app, BrowserWindow } = require('electron');
 
function createWindow() {
  const win = new BrowserWindow({
    width: 900,
    height: 600,
    minWidth: 400,
    minHeight: 300,
    title: 'Заметки',
  });
  win.loadFile('index.html');
}
 
app.whenReady().then(createWindow);

Окно откроется размером 900 на 600 точек, и уменьшить его мышью меньше 400 на 300 не получится. Заголовок title виден, пока не загрузилась страница; потом его заменяет тег title из HTML.

Основные параметры

Полный список параметров — в документации Electron, раздел BrowserWindow.

Показ без мерцания

Пока страница грузится, окно бывает пустым. Чтобы этого не было видно, окно создают скрытым и показывают по событию ready-to-show:

// main.js
const win = new BrowserWindow({ width: 900, height: 600, show: false });
win.loadFile('index.html');
 
win.once('ready-to-show', () => {
  win.show();
});

Окно появится сразу с готовой страницей.

Управление окном

У объекта окна есть методы и события:

// main.js
win.setTitle('Заметки — 3 шт.');
win.maximize();
 
win.on('closed', () => {
  console.log('Окно закрыто');
});

setTitle меняет заголовок, maximize разворачивает окно на весь экран. Есть и minimize, focus, close, setSize. Событие closed срабатывает после закрытия окна — сообщение появится в терминале.

Скрипт preload

В webPreferences указывают путь к скрипту preload:

// main.js
const path = require('node:path');
 
const win = new BrowserWindow({
  width: 900,
  height: 600,
  webPreferences: {
    preload: path.join(__dirname, 'preload.js'),
  },
});

__dirname — папка, где лежит main.js. Сам скрипт разобран в уроке «Скрипт preload и contextBridge».

Частая ошибка

Путь к preload должен быть абсолютным. Строка preload: 'preload.js' не сработает: скрипт не загрузится, а странице не достанутся его функции. Всегда собирайте путь через path.join(__dirname, 'preload.js'). Для loadFile это не нужно: он считает путь от корня программы.