Введение в Electron
Electron - это среда с открытым исходным кодом, которую можно использовать для разработки настольных приложений с такими интерфейсными технологиями, как JavaScript, HTML и CSS. Он разработан и поддерживается GitHub.
Итак, прежде чем перейти к пониманию Electron, я хотел бы сказать вам, что недавно я изучил Electron и разработал настольное приложение для одного из продуктов, над которыми я работаю в DLT Labs.
В этом блоге я буду говорить об Electron, и прежде чем мы двинемся дальше, давайте взглянем на некоторые преимущества Electron. Используя возможности Node.js, мы можем создавать как автономные, так и настольные приложения с помощью Electron.
Electron является кроссплатформенным, что означает, что мы можем распространять приложения, разработанные с использованием Electron, в Windows, MacOS и Linux. Кроме того, Visual Studio, который является одним из наиболее часто используемых редакторов исходного кода, построен на платформе Electron.
Иногда его называют «Electron JS» либо из-за веб-URL проекта (electronicjs.org), либо для того, чтобы отличить основную структуру, написанную на Node.js, от более нового варианта .NET.
Electron использует ту же модель, что и в Chromium и его браузере Google Chrome.
Недавно мы писали о создании высокопроизводительных приложений Node.js. Вы можете прочитать об этом здесь:
Как установить Электрон?
Чтобы установить систему Electron, сначала необходимо установить Node.js.
После установки Node.js просто запустите следующую команду в cmd.
npm install electron -g
Это глобально установит Electron в вашей системе.
Начиная с Electron
Чтобы начать создавать свое первое приложение в Electron, вам понадобятся три файла.
1. package.json (запустите команду npm init в каталоге вашего проекта, чтобы создать package.json)
2. index.html
3. index.js
Начнем с index.js
Сначала мы импортируем пакеты с именами «app» и «BrowserWindow» из Electron.
Затем создается функция с именем boot, которая будет запускаться всякий раз, когда приложение Electron будет готово отобразить пользовательские страницы.
Внутри функции загрузки мы создадим новый объект BrowserWindow, из-за которого появится новое окно. Мы можем установить ширину, высоту и многое другое для BrowserWindow, если захотим.
После этого все, что нам нужно сделать, это загрузить выбранный URL-адрес, поместив путь URL-адреса внутри метода loadURL. Указанный здесь путь - это путь к моему файлу index.html.
Затем вызовите функцию boot, когда она будет готова.
Возникает вопрос: как запустить приложение Electron? Чтобы запустить приложение Electron, добавьте сценарий запуска в файл package.json с «electronics»:
Наконец, запустите команду «npm start», чтобы запустить приложение Electron.
Как работает электрон?
Electron использует ту же модель, что и в Chromium и его браузере Google Chrome. Chrome запускает отдельные процессы для каждой вкладки. Это обеспечивает более стабильную работу, поскольку одна вкладка не зависит от другой.
Electron использует процессы Main и Renderer для запуска приложения. Он находит обработанный файл Main, обычно это index.js, используя запись конфигурации в файле проекта package.json.
Все, что мы делаем в index.js, выполняется в основном процессе. Процесс Main используется для загрузки приложения Electron. Экземпляры, которые мы создаем, например BrowserWindow, переходят в процесс Renderer.
В этом случае Electron запускает процесс Main, а затем Main запускает процесс Renderer.
Настройка BrowserWindow
Мы можем настроить внешний вид окна, используя атрибуты объекта BrowserWindow.
Мы можем установить ширину и высоту окна, а также то, хотим ли мы встроенную рамку или настраиваемую рамку, и многое другое, что вы можете увидеть в официальной документации Electron.
В BrowserWindow также определено несколько методов, с которыми вы можете поиграть, чтобы сделать ваше окно более привлекательным и интерактивным.
Пользовательский фрейм
Пользовательский фрейм позволяет нам добавлять дополнительные настройки и больше наших собственных функций, которые мы хотим добавить в наше приложение.
Во-первых, нам нужно установить для кадра значение false в BrowserWindow. Затем сделайте свой фрейм, используя HTML.
Затем создайте файл сценария, в котором вы будете давать функциональность своему фрейму.
Вам необходимо импортировать удаленный из электронного пакета, чтобы использовать встроенные методы.
Затем мы можем добавить функциональность этим кнопкам, добавив простые прослушиватели событий.
Этот файл script.js необходимо импортировать в ваш HTML-файл.
Глобальные ярлыки и ускорители в Electron
Прежде всего, вам нужно импортировать globalShortcut из электронного пакета. globalShortcut позволяет нам устанавливать ключевые слова, с помощью которых мы можем выполнять определенные функции.
Нам нужно зарегистрировать ключевое слово, которое мы хотим использовать, и установить функциональность для этого ключевого слова.
Здесь мы регистрируем команду «Control + 1» как ускоритель. Это означает, что всякий раз, когда мы используем эту команду, будет запускаться функция (заданные нами ключевые слова известны как ускорители).
Так работает Электрон. Она широко используется и является самой быстрорастущей технологией для создания автономных и кроссплатформенных приложений. Теперь, когда мы закончили базовое изучение Electron, вы можете поиграть с ним, создав несколько приложений.
Спасибо за чтение!
Автор - Аман Сингх Пилкхвал, DLT Labs ™
Об авторе: Аман - инженер-программист в DLT Labs ™, в настоящее время работает над DL Asset Track ™. Он хорошо владеет Java и имеет практический опыт работы с Electron и Node.js.
Node.js является зарегистрированным товарным знаком Joyent, Inc. Chromium и Google Chrome являются товарными знаками Google LLC. DLT Labs является товарным знаком DLT Global, Inc.
