JS — лучший язык в мире — разработка настольных приложений с помощью Electron

Electron позволяет создавать настольные приложения, используя чистый JavaScript, вызывая богатые нативные (операционные системы) API. Вы можете думать об этом как о варианте Node.js, ориентированном на настольные приложения, а не на веб-серверы.

моя учебная мотивация

Некоторое время назад я использовал Node+Vue для создания небольшой системы публикации программ.В период разработки я запускал ее локально, пока все функции не были готовы к развертыванию на сервере.Только тогда я обнаружил проблему.Согласно официальному апплет API, я хотел его выпустить.долженПоложитесь на инструменты разработчика! Инструменты разработчика Wechat запустят веб-службу в вашей локальной сети, мы можем получить ее номер порта и сотрудничать с API для завершения загрузки. . . Это попало в очень неловкую ситуацию.У его маленького инструмента разработчика программ нет версии, которая может работать на сервере Linux! ! !

непродуманный, непродуманный. . . В следующий раз обратите внимание, что код жив и мертв.Если он не работает онлайн, то можно найти способ получить его локально.Тогда вопрос, как можно использовать эту систему на чужих компьютерах в самом простом виде? Было бы здорово, если бы его можно было превратить в приложение и установить на компьютер, но я не умею писать приложения, а. . . и т.п. . . Мой JS — самый мощный язык в мире, почему бы мне не найти способ написать фреймворк приложения на JS, результат действительно есть! ! ! Что ж, я признаю, что я невежествен, Электрон просто появился в поле моего зрения, так как я хочу использовать его для выполнения дел, давайте вкратце его изучим.

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

Electron — это фреймворк для создания нативных программ с использованием веб-технологий, таких как JavaScript, HTML и CSS, Он позаботится о сложной части, вам просто нужно сосредоточиться на ядре вашего приложения. Фактически, Electron должен объединить Chromium и Node.js в одну и ту же среду выполнения и упаковать его как приложение для Mac, Windows и Linux в соответствии с вашими потребностями для достижения этой цели. Насколько хорош Electron?Скажем так, VScode и Atom созданы на его основе.

Понимание основного процесса Electron и процесса рендеринга

Процесс, в котором Electron запускает основной скрипт package.json, называется основным процессом. Сценарий, который запускается в основном процессе, представляет пользовательский интерфейс, создавая веб-страницы. Приложение Electron всегда имеет один и только один главный процесс.

Поскольку Electron использует Chromium для отображения веб-страниц, также используется многопроцессорная архитектура Chromium. Каждая веб-страница в Electron работает в собственном процессе рендеринга.

В обычном браузере веб-страница обычно работает в среде песочницы и не разрешено обращаться к местным ресурсам. Тем не менее, пользователи электронов могут выполнять некоторые базовые взаимодействия с операционной системой с поддержкой API Node.js.

Основной процесс использует экземпляр BrowserWindow для создания страницы. Каждый экземпляр BrowserWindow запускает страницу в своем собственном процессе рендеринга. Когда экземпляр BrowserWindow уничтожается, соответствующий процесс рендеринга также завершается.

Основной процесс управляет всеми веб-страницами и соответствующими процессами рендеринга. Каждый процесс рендеринга независим, он заботится только о веб-странице, на которой работает.

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

С точки зрения разработки приложение Electron по сути является приложением Node.js. Как и в случае с модулями Node.js, точкой входа в приложение является файл package.json. Базовое приложение Electron обычно имеет следующую структуру каталогов:

Инициализировать проект

Следующий пример скопирован с официального сайта
Сначала создайте пустую папку, откройте командную строку и перейдите в каталог для выполненияyarn init, Обратите внимание, что я настоятельно рекомендую вам использовать пряжу для установки всех зависимостей, необходимых для этого проекта.Если вы используете npm, у вас может не быть никаких проблем на этапе разработки, но будут различные неизвестные ошибки на этапе упаковки, но использование пряжа поможет вам избежать этих ям, не спрашивайте почему, потому что я не знаю, великие пользователи сети сказали мне, что когда упаковка не удалась, пряжа поможет вам создать базовый файл package.json. Сценарий, представленный основным полем, является сценарием запуска приложения, который будет выполняться в основном процессе. Основная операция, нечего сказать, не знаю, как найти соответствующую информацию о детской обуви.
Примечание:
Если в package.json не указан входной файл для main, Electron попытается загрузить файл index.js (как и сам Node.js). Команда запуска Electronelectron, поэтому вы можете добавить команду в поле скрипта для быстрого запуска проекта. следующим образом:

Установить Электрон

Теперь вам нужно установить электрон. Чтобы сделать его зависимостью разработки в проекте, выполните следующую команду в папке, где находится приложение:
yarn add electron

Разработать простой Электрон

Во-первых, введите модуль Electron в main.js. Electron предоставляет различные API-интерфейсы, чтобы вы могли вызывать некоторые нативные методы и пользовательский интерфейс. Метод введения такой же, как и для обычных узловых модулей.
const electron = require('electron')
Функции, предоставляемые электронным модулем, доступны через пространства имен. Например: electron.app отвечает за управление жизненным циклом приложений Electron, а класс electron.BrowserWindow отвечает за создание окон. Ниже приведен простой файл main.js, который откроет окно, когда приложение будет готово:

Создайте окно в main.js и обработайте все системные события, которые могут возникнуть в программе. Ниже мы завершим приведенный выше пример, добавив следующие функции: открытие инструментов разработчика, обработка события закрытия окна, перестроение окна, когда пользователь macOS щелкает значок на доке, после добавления main.js выглядит так:

В этом файле вы можете продолжать писать остальной код основного процесса приложения. Его также можно разделить на несколько файлов и импортировать с помощью require.
Наконец, создайте index.html, который вы хотите отобразить:

запустите свое приложение

После создания и инициализации main.js, index.html и package.json вы можете выполнить команду npm start в корневом каталоге текущего проекта, чтобы запустить только что написанную программу Electron.

end

Electron использует веб-страницы в качестве своего графического интерфейса, поэтому вы можете думать о нем как об урезанном браузере Chromium, управляемом JavaScript. Эта глава знакомит с основами использования Electron.В следующей статье процесс разработки преобразования существующей системы публикации в приложение Electron и некоторые используемые API, а также ямы, возникающие в середине, будут представлены в форме реального боя. При этом все желающие могут обратить внимание на Xiaoyuan, фронтенд официального аккаунта, здесь я буду регулярно публиковать оригинальные статьи.