Хотя B/S является основным направлением текущих разработок, C/S по-прежнему пользуется большим спросом на рынке. Ограниченные ограничениями песочницы браузера, веб-приложения не могут соответствовать требованиям использования в определенных сценариях, в то время как настольные приложения могут читать и записывать локальные файлы и вызывать больше системных ресурсов, а также преимущества низкой стоимости и высокой эффективности веб-разработки, это кроссплатформенный подход становится все более популярным среди разработчиков.

Electron — это кроссплатформенная среда разработки, основанная на Chromium и Node.js, использующая HTML, CSS и JavaScript для создания кроссплатформенных приложений, совместимых с Mac, Windows и Linux. В настоящее время Electron создал большое количество приложений, включая VScode и Atom.

Строительство окружающей среды

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

Установить узел

Перейдите на страницу загрузки официального сайта Node http://nodejs.cn/download/, а затем загрузите соответствующую версию, при загрузке рекомендуется загружать стабильную версию. Если вы используете Homebrew для установки Node, рекомендуется изменить образ репозитория npm на образ Taobao во время установки, как показано ниже.

npm config set registry http://registry.npm.taobao.org/
或者
npm install -g cnpm --registry=https://registry.npm.taobao.org

Установить/обновить vue-cli

Сначала выполните следующую команду для подтверждения версии Vue-CLI под установленной локально.

vue -V

Если он не установлен или не является последней версией, вы можете выполнить следующие команды для установки/обновления.

npm install @vue/cli -g

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

Установите плагин Electron, используя следующую команду.

npm install -g electron
或者
cnpm install -g electron

Чтобы убедиться, что установка прошла успешно, используйте следующую команду.

electron --version

Создать работающий проект

Электрон официально улучшил простой проект, вы можете выполнить следующую команду для клонирования проекта локально.

git clone https://github.com/electron/electron-quick-start

Затем выполните следующую команду в проекте, чтобы запустить проект.

cd electron-quick-start
npm install 
npm start

Кроме того, мы можем использовать инструменты лесов Vue-Cli для создания проекта.

vue init simulatedgreg/electron-vue

Затем элемент можно создать в соответствии со следующими подсказками в шагах, как показано ниже.

Затем, используя команду проекта npm install для установки необходимых зависимостей, когда установка завершена, вы можете запустить приложение для трафаретов electronic-vue или использовать команду npm run dev npm run build, результат операции, как показано ниже.

Электронный каталог исходного кода

Исходный код Electron в основном разделен на множество частей в соответствии с соглашением о разделении Chromium. Чтобы лучше понять исходный код, вы можете посмотретьМногопроцессная архитектура хрома. Electron源码目录结构和含义具体如下：

Electron
├──atom - Electron 的源代码
|  ├── app - 系统入口代码
|  ├── browser - 包含了主窗口、UI 和其他所有与主进程有关的东西，它会告诉渲染进程如何管理页面
|  |   ├── lib - 主进程初始化代码中 JavaScript 部分的代码
|  |   ├── ui - 不同平台上 UI 部分的实现
|  |   |   ├── cocoa - Cocoa 部分的源代码
|  |   |   ├── gtk - GTK+ 部分的源代码
|  |   |   └── win - Windows GUI 部分的源代码
|  |   ├── default_app - 在没有指定 app 的情况下 Electron 启动时默认显示的页面
|  |   ├── api - 主进程 API 的实现
|  |   |   └── lib - API 实现中 Javascript 部分的代码
|  |   ├── net - 网络相关的代码
|  |   ├── mac - 与 Mac 有关的 Objective-C 代码
|  |   └── resources - 图标，平台相关的文件等
|  ├── renderer - 运行在渲染进程中的代码
|  |   ├── lib - 渲染进程初始化代码中 JavaScript 部分的代码
|  |   └── api - 渲染进程 API 的实现
|  |       └── lib - API 实现中 Javascript 部分的代码
|  └── common - 同时被主进程和渲染进程用到的代码，包括了一些用来将 node 的事件循环
|      |        整合到 Chromium 的事件循环中时用到的工具函数和代码
|      ├── lib - 同时被主进程和渲染进程使用到的 Javascript 初始化代码
|      └── api - 同时被主进程和渲染进程使用到的 API 的实现以及 Electron 内置模块的基础设施
|          └── lib - API 实现中 Javascript 部分的代码
├── chromium_src - 从 Chromium 项目中拷贝来的代码
├── docs - 英语版本的文档
├── docs-translations - 各种语言版本的文档翻译
├── spec - 自动化测试
├── atom.gyp - Electron 的构建规则
└── common.gypi - 为诸如 `node` 和 `breakpad` 等其他组件准备的编译设置和构建规则

При нормальной разработке необходимо сосредоточиться на каталогах src, package.json и appveyor.yml. Кроме того, другие каталоги, которые требуют внимания, следующие:

• script - сценарии для целей разработки, таких как сборка, упаковка, тестирование и т. д.
• tools - скрипты инструментов, используемые в gyp-файле, но в отличие от каталога скриптов, скрипты в этом каталоге не должны вызываться непосредственно пользователем
• vendor — исходный код для сторонних зависимостей, чтобы люди не путали его с одноименным каталогом в исходном коде Chromium, мы не используем здесь имя_директории в качестве имени каталога
• node_modules — сторонние модули узлов, используемые в сборке.
• out - временный выходной каталог для ниндзя
• dist — временный каталог дистрибутива, созданный скриптом script/create-dist.py
• external_binaries — загрузки прекомпилированных сторонних фреймворков, не поддерживающих сборку через gyp

Каталог прикладной инженерии

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

Предварительное проектирование и строительство подобных проектов, структура каталогов проектов Electron выглядит следующим образом:

• Конфигурация: некоторая базовая информация о конфигурации для проекта в проекте чаще всего используется для пересылки.
• node_modules: в этом каталоге хранятся все зависимости проекта, то есть файлы, загруженные командой npm install.
• src: В этом каталоге хранится исходный код проекта, то есть сюда помещается код, написанный разработчиком.
• static: используется для хранения статических ресурсов.
• index.html: это домашняя страница и страница входа в проект, а также единственная HTML-страница для всего проекта.
• package.json: определяет все зависимости проекта, включая зависимости времени разработки и времени выпуска.

Для разработчиков 90% работы выполняется в src, а каталог файлов в src выглядит следующим образом.

Приложения Electron делятся на три основных модуля: основной процесс, межпроцессное взаимодействие и процесс рендеринга.

【Основной процесс】

Процесс, в котором Electron запускает основной скрипт (background.js) в package.json, называется основным процессом. Сценарий, который запускается в основном процессе, представляет пользовательский интерфейс, создавая веб-страницы.一个 Electron 应用总是有且只有一个主进程。

【Процесс рендеринга】

Поскольку Electron использует Chromium для отображения веб-страниц, также используется многопроцессорная архитектура Chromium. Каждая веб-страница в Electron работает в собственном процессе рендеринга. В обычных браузерах веб-страницы обычно работают в изолированной среде, и им не разрешается касаться собственных ресурсов. Однако Electron позволяет пользователям выполнять некоторые низкоуровневые взаимодействия с операционной системой на странице с поддержкой Node.js API.

[Связь между основным процессом и процессом рендеринга]

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

структура каталогов src

В каталоге Electron пакет src содержит два каталога: main и renderer.

главный каталог

Основной каталог будет содержать два файла: index.js и index.dev.js.

• index.js: Основной файл приложения, отсюда же запускается электрон, он же используется как входной файл для сборки продукта webpack, отсюда должна начинаться вся основная работа процесса.
• index.dev.js: этот документ посвящен стадии разработки, поскольку в нем будут установлены electronic-debug и vue-devtools. Как правило, вам не нужно изменять этот файл, но его можно расширить для нужд разработки.

процесс рендеринга

• модули: electronic-vue использует модульную структуру vuex для создания нескольких хранилищ данных и сохранения их в src/renderer/store/modules.

Комплексный пример

1. Облачная музыка NetEase

electron-vue-cloud-musicЭто кроссплатформенное настольное приложение, разработанное с использованием технологии Electron+Vue+Ant Design Vue. Ссылка на скачивание:Github.com/piggy188/.... Имеет следующие характеристики:

• перетащите, чтобы играть
• настольная лирика
• мини-режим
• Контекстное меню пользовательского лотка
• Миниатюры панели задач, действия с песнями
• Визуализация звука
• Автоматический / ручной проверки на обновления
• Постоянство базы данных NEDB
• Запустите клиент в браузере
• Travis CL, сборка AppVeyor автоматически
• Создание скинов, загрузка, локальное сопоставление песен, уведомление на рабочем столе об изменениях в сети, обмен песнями / плейлистами / MV / видео в пространстве QQ.
• Вход, Частное Fm, Плейлисты, Альбомы, Исполнители, Чарты, MV, Видео, Комментарии, Поиски, Пользователи, Динамика, Фанаты, Следуйте, Облачные диски, Избранное...
• Режим сердцебиения, лирика Fine-Tuning, следующая игра, Дополнительная игра, Однопровод, Случайная игра, Список петлей
• Ориентация маршрутизации, частичное обновление, корректировка столбцов домашней страницы и постоянство...

Следующее является частью эффекта бега:

2, музыкальный плеер qq

музыкальный плеер qqМузыкальный проигрыватель, разработанный на базе electronic-vue, интерфейс имитирует музыку QQ, а используемый стек технологий — electronic-vue+vue+vuex+vue-router+element-UI. Проект можно запустить следующим образом.

git clone https://github.com/SmallRuralDog/electron-vue-music.git

cd electron-vue-music

npm install

# 运行开发模式
npm run dev

# 打包安装文件 
npm run build

Часть результатов работы, как показано на рисунке.

Ссылаться на:Используйте vue-cli-plugin-electron-builder для разработки настольных приложений vue-cli3.0+Electron. упаковка электронного кроссплатформенного настольного приложения