Что такое электрон?

Electron - это платформа для создания собственных приложений с использованием веб-технологий, таких как JavaScript, HTML и CSS. Он заботится о сложных частях, поэтому вы можете сосредоточиться на ядре вашего приложения. Платформа использует внешние и внутренние компоненты, разработанные для веб-приложений, для разработки настольных приложений с графическим интерфейсом. Для внешних требований используется Chromium, а для серверной части - Node.js. Electron делает это, объединив Node.js и Chromium в единую среду выполнения и упаковывая многоплатформенные приложения.

Структура электронного приложения

Самое простое из приложений Electron состоит из трех основных файлов.

  1. package.json: важный файл в приложении Electron. Этот файл содержит информацию о пакете, такую ​​как имя, версия и т. Д., А также всю другую информацию о зависимостях.
  2. main.js: содержат основные функции для запуска приложения Electron. Он отвечает за создание окна браузера, загрузку index.html приложения и обработку других действий браузера.
  3. index.html: графический пользовательский интерфейс. Может иметь несколько страниц .html по мере необходимости.

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

Основной процесс - это точка входа в приложение. Это файл, который будет выполнен после запуска приложения.

Процесс рендерера - это контроллер для данного окна в приложении. Каждое окно имеет свой собственный процесс рендеринга.

Создайте первое приложение Electron

Сам Electron предоставляет приложение для быстрого старта, вы можете просто клонировать его и запустить приложение.

# Clone the Quick Start repository
$ git clone https://github.com/electron/electron-quick-start

# Go into the repository
$ cd electron-quick-start

# Install the dependencies
$ npm install 
# Run the application
$ npm start

После клонирования приложения у вас появятся три разных файла, упомянутых выше, и после запуска первое приложение будет выглядеть так. Вы можете настроить его по своему усмотрению в соответствии с вашими требованиями.

Создать приложение TODO List Electron

Теперь я собираюсь настроить вышеизложенное. Я сохраню package.json и main.js такими же, и только я собираюсь использовать некоторые javascript и css. Сначала я создам свой CSS и сохраню его в отдельной папке.

Затем я изменяю index.html. Здесь я свяжу свой CSS в разделе заголовка, который хранится отдельно.

Вы получите подобное рабочее приложение.

Вы можете найти полный проект на Github.

Подробнее об Electron с официального сайта.