Первоначально опубликовано мнойблог, добро пожаловать, нажмите, чтобы просмотреть для лучшего чтения~
предисловие
Некоторое время назад я использовалelectron-vueРазработано кросс-платформенное (в настоящее время поддерживающее Mac и Windows) бесплатное приложение для загрузки изображений с открытым исходным кодом——PicGo, я наступил на много ям в процессе разработки, причем не только со стороны бизнес-логики самого приложения, но и со стороны самого электрона. В процессе разработки этого приложения я многому научился. Поскольку я также начал изучать электрон с нуля, такой большой опыт также должен вдохновить и дать инструкции начинающим ученикам, которые хотят изучать разработку электронов. Поэтому я написал практический опыт разработки Электрона и объяснил его с точки зрения наиболее близкой к разработке реальных инженерных проектов. Надеюсь помочь всем.
Ожидается, что он будет расширен за счет нескольких серий статей или аспектов:
- Начало работы с электрон-вью
- Простая разработка основного процесса и процесса визуализации
- Представляем базу данных json на основе Lodash - lowdb
- Некоторые меры кроссплатформенной совместимости
- Выпуск и обновление через CI
- ... (подумайте о написании снова)
иллюстрировать
PicGoсостоит в том, чтобы принятьelectron-vueразработан, поэтому, если выvue, то учиться вместе будет быстрее. Если ваш технический стек похож наreact,angular, то чисто по этому туториалу, хотя вы можете и не много узнать о построении стороны рендера (которую можно понимать как страницу), вы все же должны получить соответствующие знания по основной стороне (основной процесс электрон).
Краткое введение в Электрон
Когда я впервые начал изучать электрон, я был ошеломлен плотной концепцией документов официального сайта:
Слишком много понятий, чтобы принять все сразу. Поэтому после того, как я сам закончил изучать развитие электронов, я сделал снимок. Давайте посмотрим на картинку, чтобы понять, чтоelectron, и что в него входит:
диаграмма
Electron состоит из Node.js+Chromium+Native API. Вы можете понять, что это браузер Chromium, дополненный Node.js и Native API на разных платформах, которые можно использовать для разработки кроссплатформенных настольных приложений.
Его разработка в основном предполагает кооперацию двух процессов — Main (основной) процесс и Renderer (рендеринг) процесс. Просто поймите роль двух процессов:
- Основной процесс в основном реализует некоторые системные и базовые операции через Node.js, Chromium и Native API, такие как создание меню на уровне системы, работа с буфером обмена и создание окон приложений.
- Процесс рендеринга в основном реализует графический интерфейс приложения через Chromium — часть фронтенд-разработки, с которой мы знакомы, но она была усилена электроном, некоторыми модулями Node (такими как fs) и некоторыми вещами, которые можно использовать. в основном процессе (например, в буфере обмена) также можно использовать в процессе рендеринга.
- Процесс Main и процесс Renderer проходят через
ipcMainа такжеipcRendererобщаться. Связь между двумя процессами реализуется через мониторинг событий и диспетчеризацию событий, чтобы реализовать некоторые функции, которые не могут быть реализованы в процессе Main или Renderer.
Дальнейшее введение
После разговора о составе электрона и частях, которые нам нужно разработать, давайте поговорим о его преимуществах и недостатках.
преимущество:
- Из приведенного выше введения можно обнаружить, что в дополнение к различиям в собственных API-интерфейсах разных платформ, Node.js и Chromium являются кроссплатформенными инструментами, что также закладывает основу для рождения электрона с кроссплатформенной разработкой приложений. .
- Разрабатывать графический интерфейс проще, чем когда-либо — по сравнению с традиционными технологиями разработки графического интерфейса, такими как C#\QT\MFC, значительно проще и удобнее разрабатывать через интерфейсный графический интерфейс. Благодаря Chromium такая модель разработки стала возможной.
- Зрелое сообщество, активная основная команда, вы можете получить ответы на большинство вопросов, связанных с электроникой, в сообществе, проблемах github и переполнении стека. Барьеры для развития еще больше снижаются.
недостаток:
- Размер приложения слишком велик. Из-за внутренней упаковки Chromium и Node.js объем упаковки (с использованием
electron-builder) составляет не менее 45 млн+ для запуска на Mac, немного лучше для Windows, но также и 35 млн+ для запуска. Тем не менее, по сравнению с ранним объемом упаковки в 100+ миллионов, это было намного лучше. Однако установка по-прежнему начинается на 100M+ после распаковки. - Он по-прежнему ограничен из-за некоторых проблем с поддержкой Node.js и Native API. Некоторые функции по-прежнему недоступны. Например, файл, выбранный в системной папке, не может быть получен, и для доступа к системному файлу необходимо вызвать файл веб-интерфейса или фс-интерфейса узла.
- Производительность приложений по-прежнему остается проблемой. Таким образом, создание легковесных приложений не проблема, но тяжеловесные приложения, особенно приложения с интенсивным использованием ЦП, вызывают большие проблемы.
Краткое введение в электронный vue
Поскольку я сам занимаюсь стеком технологий Vue, я хочу использовать Vue в электронном виде. А vue — это просто фреймворк, используемый в процессе рендеринга, не затрагивающий основной процесс. Как показано ниже:
Так что react, angular и другие фреймворки фронтенда также применимы.
Однако совместить vue и electronic не так-то просто. Для простоты разработки я используюelectron-vue, это разработчикSimulatedGREGОбратитесь к структуре разработки комбинации электрона и vue, созданной каркасом шаблона веб-пакета vue-cli. Так как яvue-cliОчень знакомо, так что начнемelectron-vueочень просто. По сравнению со многими другими учебными пособиями или другими решениями по сборке фреймворка для разработки интерфейса Electron+,electron-vueЛучше всего мне кажется следующее:
- единственный
package.json. В то время как большинство других структур проекта по-прежнему используют дваpackage.jsonДля работы с зависимыми библиотеками основного процесса и процесса рендеринга. - Встроен полный пакет семейства vue, что устраняет необходимость в некоторых начальных операциях по повторной настройке vue-router и vuex.
- Встроенная полная разработка веб-пакетов, производство и другие конфигурации, среда разработки удобна.
- Встроенная полная разработка, сборка и т.д.
npm scripts, это очень удобно в использовании. - Встроенные полные скрипты настройки Travis-ci, Appveyor, только несколько модификаций можно использовать для автоматической сборки приложений с использованием CI.
- Хорошо документированная, четкая структура проекта.
Общая структура проекта выглядит следующим образом, и структура будет варьироваться в зависимости от выбранных настроек:
my-project
├─ .electron-vue
│ └─ <build/development>.js files
├─ build
│ └─ icons/
├─ dist
│ ├─ electron/
│ └─ web/
├─ node_modules/
├─ src
│ ├─ main # 主进程
│ │ ├─ index.dev.js
│ │ └─ index.js
│ ├─ renderer # 渲染进程
│ │ ├─ components/
│ │ ├─ router/
│ │ ├─ store/
│ │ ├─ App.vue
│ │ └─ main.js
│ └─ index.ejs
├─ static/
├─ test
│ ├─ e2e
│ │ ├─ specs/
│ │ ├─ index.js
│ │ └─ utils.js
│ ├─ unit
│ │ ├─ specs/
│ │ ├─ index.js
│ │ └─ karma.config.js
│ └─ .eslintrc
├─ .babelrc
├─ .eslintignore
├─ .eslintrc.js
├─ .gitignore
├─ package.json
└─ README.md
Вы можете увидеть две папки, которые нас в основном интересуют:src/mainа такжеsrc/rendererСоответствует основному процессу и процессу визуализации соответственно. Наша разработка обычно вращается вокруг этих двух папок.
электронная установка
Ссылаться наelectron-vueПо инструкции, приведенной в официальной документации, очень удобно собирать каркас из electronic-vue, достаточно использовать vue-cli для установки его шаблона:
# 如果你没有vue-cli的话需要全局安装
npm install -g vue-cli
# 然后使用vue-cli来安装electron-vue的模板
vue init simulatedgreg/electron-vue my-project
# 安装依赖
cd my-project
yarn # or npm install
# 进入开发模式
yarn run dev # or npm run dev
Если вы пользователь Windows и во время установки столкнулись сnode-gyp, библиотека C++ и т. д., см. официальную документацию.Решение.
Если с вышеперечисленным проблем нет, то вы увидите следующий интерфейс:
Суммировать
В начале контента не так много. Но необходимо внести ясность. На самом деле есть два голоса в пользу развития электронов:
- Это очень просто, но это просто новая оболочка для веб-разработки
- Сложно, нужно понимать много родных понятий, не знаю с чего начать
На самом деле, из введения в эту статью у вас должно быть примерное представление. Разработка электрона фактически включает две части: одна связана с развитием основного процесса, а другая связана с развитием процесса рендеринга. Разработка процесса рендеринга не представляет сложности для большинства фронтенд-разработчиков. Для освоения основного процесса, если вы хотите изучить и использовать все возможности основного процесса электрона, потребуется очень много времени. Однако если исходить из потребностей и потребностей самого проекта, учиться нужно только тогда, когда это необходимо. Но иметь представление о том, что умеет Node.js — это не панацея.
В следующей статье официально начнется разработка электрона, если вам это интересно, то можете обратить внимание на прогресс этой серии.