Electron – это популярная платформа для создания кроссплатформенных настольных приложений с использованием веб-технологий. В этой статье блога мы рассмотрим различные методы и примеры кода, которые помогут вам лучше понять Electron. Независимо от того, являетесь ли вы новичком или опытным разработчиком, это руководство предоставит вам ценную информацию о разработке Electron. Итак, давайте рассмотрим примеры вопросов и соответствующие им решения!

Метод 1. Создание базового приложения Electron
Пример кода:

// main.js
const { app, BrowserWindow } = require('electron');
app.on('ready', () => {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });
  mainWindow.loadURL('https://www.example.com');
});

Метод 2: взаимодействие с файловой системой
Пример кода:

// main.js
const { app, BrowserWindow, dialog } = require('electron');
const fs = require('fs');
app.on('ready', () => {
  const mainWindow = new BrowserWindow();
  dialog.showOpenDialog(mainWindow, { properties: ['openFile'] }).then((result) => {
    if (!result.canceled) {
      const filePath = result.filePaths[0];
      fs.readFile(filePath, 'utf-8', (err, data) => {
        if (!err) {
          console.log(data);
        }
      });
    }
  });
});

Метод 3: связь между основным процессом и процессом рендеринга
Пример кода:

// main.js
const { app, BrowserWindow, ipcMain } = require('electron');
app.on('ready', () => {
  const mainWindow = new BrowserWindow();
  mainWindow.loadURL('index.html');
});
// index.html
<script>
  const { ipcRenderer } = require('electron');
  ipcRenderer.on('message-from-main', (event, args) => {
    console.log(args);
  });
  ipcRenderer.send('message-to-main', 'Hello from the renderer process!');
</script>

Метод 4: упаковка и распространение электронных приложений
Пример кода:

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "My Electron Application",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "Your Name",
  "license": "MIT",
  "dependencies": {
    "electron": "^12.0.0"
  }
}