Что такое электрон?
Electron - это платформа для создания собственных приложений с использованием веб-технологий, таких как JavaScript, HTML и CSS. Он заботится о сложных частях, поэтому вы можете сосредоточиться на ядре вашего приложения. Платформа использует внешние и внутренние компоненты, разработанные для веб-приложений, для разработки настольных приложений с графическим интерфейсом. Для внешних требований используется Chromium, а для серверной части - Node.js. Electron делает это, объединив Node.js и Chromium в единую среду выполнения и упаковывая многоплатформенные приложения.
Структура электронного приложения
Самое простое из приложений Electron состоит из трех основных файлов.
- package.json: важный файл в приложении Electron. Этот файл содержит информацию о пакете, такую как имя, версия и т. Д., А также всю другую информацию о зависимостях.
- main.js: содержат основные функции для запуска приложения Electron. Он отвечает за создание окна браузера, загрузку index.html приложения и обработку других действий браузера.
- 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 с официального сайта.