Пример для начала работы с Electron

В предыдущей главе мы узнали, как установить Electron.

В этом разделе мы шаг за шагом расскажем, как создать простой экземпляр Electron.

1. Создайте каталог проекта

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

mkdir my-electron-app
cd my-electron-app
npm init -y
npm install electron --save-dev

Созданная структура выглядит так:

my-electron-demo/
├─ package.json
├─ main.js
└─ index.html

2. Настройте package.json

Откройте package.json и приведите его к следующему содержимому:

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "EXAMPLE Electron 测试",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "latest"
  }
}

Описание:

Fields Функция
"main" Указывает файл главного процесса, который будет выполнен при запуске Electron.
"scripts.start" определениеnpm startСодержимое выполнения команды
"electron ." Указывает, что Electron должен запустить приложение в текущем каталоге
"devDependencies" Зависимости для разработки, которые не будут упакованы в финальное приложение.

3. Напишите файл главного процесса main.js.

Это основной центр управления Electron, отвечающий за создание окон приложения и загрузку страниц.

Создайте файл main.js и введите следующий полный код (с подробными комментариями):

Пример

// main.js — файл главного процесса Electron

// Импортируйте app (управляет жизненным циклом приложения) и BrowserWindow (создаёт окна) из модуля electron.
const { app, BrowserWindow } = require('electron');

// Встроенный модуль Node.js для объединения путей к файлам
const path = require('path');

// Создайте функцию для создания главного окна
function createWindow() {
  // Создайте новый экземпляр окна
  const win = new BrowserWindow({
    width: 800,          // Ширина окна (pixels)
    height: 600,         // Высота окна (pixels)
    resizable: true,     // Разрешать ли пользователям перетаскивать и изменять размер окна (по умолчанию true)
    title: "EXAMPLE Electron Test",  // Заголовок окна, отображается в строке заголовка
    webPreferences: {    
      // Конфигурация среды выполнения веб-страницы
      contextIsolation: true,  // Включить изоляцию контекста (рекомендуется для безопасности)
      nodeIntegration: false,  // Не используйте Node.js напрямую в веб-страницах
    }
  });

  // Загрузить локальный файл index.html в окно
  // path.join(__dirname, 'index.html') возвращает путь к index.html в текущем каталоге
  win.loadFile(path.join(__dirname, 'index.html'));

  // Открыть инструменты разработчика (необязательно, удобно для отладки)
  // win.webContents.openDevTools();
}

// Когда инициализация Electron завершена, срабатывает событие ready приложения.
// app.whenReady() возвращает Promise; после его разрешения вызовите createWindow()
app.whenReady().then(createWindow);

// Срабатывает, когда все окна закрыты (применяется только вне macOS)
app.on('window-all-closed', () => {
  // process.platform возвращает платформу операционной системы
  // Значение платформы для macOS — 'darwin'; в macOS программа обычно остаётся резидентной.
  if (process.platform !== 'darwin') {
    app.quit(); // выход из приложения
  }
});

// Специальная логика macOS: пересоздать окно при нажатии на значок Dock
app.on('activate', () => {
  // Если в данный момент нет открытого окна, создайте новое
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

Описание:

Концепции Описание
основной процесс Скрипт, который выполняется первым после запуска Electron и отвечает за создание окон, управление меню, системные API и т. д.
BrowserWindow Используется для создания окна браузера, которое загружает веб-содержимое (HTML-файлы или URL-адреса).
app.whenReady() Убедитесь, что окно создаётся только после завершения инициализации Electron; в противном случае могут возникнуть ошибки.
win.loadFile() Загружает локальный HTML-файл. Также можно использоватьwin.loadURL('https://example.com')Загружает веб-сайт.
contextIsolation Изолирует скрипты веб-страницы от среды Node для повышения безопасности (официально рекомендуется).
nodeIntegration если установлено вtrue, позволяя использовать Node.js напрямую на странице (но с рисками для безопасности).
window-all-closed Выход из приложения при закрытии всех окон (действует в Windows/Linux).

4. Напишите страницу рендеринга index.html

Создайте файл index.html и введите следующее содержимое:

Пример

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Пример (example.com)</title>
  <style>
    body {
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      font-family: "Segoe UI", Arial, sans-serif;
      background: #f5f7fa;
    }
    .box {
      text-align: center;
      background: white;
      padding: 40px 60px;
      border-radius: 12px;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    }
    h1 {
      margin: 0 0 10px;
      color: #333;
    }
    p {
      margin: 0;
      color: #666;
    }
  </style>
</head>
<body>
  <div class="box">
    <h1>Привет, Electron!</h1>
    <p>ПРИМЕР теста Electron. Это первое созданное вами десктопное приложение Electron.&#x1f389;</p>
  </div>
</body>
</html>

5. Запустите проект

Вернитесь в терминал и выполните:

npm start

После запуска вы увидите окно десктопного приложения, отображающее:

Hello, Electron!
EXAMPLE Electron 测试。这是你创建的第一个 Electron 桌面应用 &#x1f389;

Другие расширения