Электронная серия - Что такое Электрон?

Node.js Electron

系列简介：本系列文章首先围绕Electron框架的关键知识点进行详细讲解，然后对DEMO程序进行分析，让前端开发人员对使用Electron开发桌面应用程序有一个初步的了解。该系列文章更新周期为每周1~2篇。

阅读时间：约5min

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

определение

Electron — это фреймворк, позволяющий разрабатывать кроссплатформенное настольное приложение с использованием традиционных фронтенд-технологий (Nodejs, Javascript, HTML, CSS). Упомянутое здесь настольное приложение относится к программе, работающей в системах Windows, OSX и Linux.

история

В 2013 году вышел редактор Atom, и Electron постепенно стал известен как базовый фреймворк для его реализации.Он был открыт в 2014 году, когда еще называлсяAtom Shell.

В течение следующих нескольких лет Electron постоянно обновлялся и дорабатывался, и почти каждый год происходила важная веха.

  • 11 апреля 2013 года Electron стартовал под названием Atom Shell.
  • 6 мая 2014 года исходный код Atom и Atom Shell был открыт под лицензией MIT.
  • 17 апреля 2015 года Atom Shell была переименована в Electron.
  • 11 мая 2016 года была выпущена версия 1.0.
  • 20 мая 2016 г. Разрешена отправка пакетов в Mac App Store.
  • 2 августа 2016 г., поддержка Магазина Windows.

В последней стабильной версии V3.x Electorn интегрирует Nodejs v10.2.0 и Chromium с ядром v66.0.3359.181.

Программное обеспечение на базе Electron

Электрон использовался во многих прикладных программах с открытым исходным кодом, среди которых редакторы Atom и VsCode, хорошо известные и используемые большинством программистов, реализованы на основе Electron. Попробуйте открыть VsCode, нажмите на меню справки切换开发人员工具, вы можете увидеть наш знакомый инструмент разработчика Chrome в интерфейсе, как показано ниже.

низкоуровневая реализация

Поскольку сценарий приложения заключается в разработке приложений на системной платформе, нам нужна возможность вызывать собственные системные API во время разработки. Чтобы интерфейсный язык мог взаимодействовать с нижним уровнем, Electron интегрирует Nodejs+Chromium. Nodejs в основном отвечает за управление логикой основного потока приложения, базовое взаимодействие и другие функции, а Chromium в основном отвечает за бизнес-логику рендеринга окон потока. Основная структура выглядит следующим образом:

Эта архитектура позволяет обновлять версии Chromium по отдельности. Предполагая, что ваша программа в настоящее время использует версию Electron v3.x, эта версия Electron поставляется с Chromium версии 66. В настоящее время, если некоторые функции, которые вы используете, должны использовать версию Chromium 69, в дополнение к обновлению Electron до последней версии в целом, вы также можете обновить версию Chromium по отдельности.В официальной документации указан метод обновления.Обновите хром

Но в целом мы этого делать не рекомендуем, поскольку для успешного обновления требуется знание C и C++, а также определенное понимание базовой реализации Chromium. Даже если вы успешно обновите версию Chromium, общая стабильность программного обеспечения не может быть гарантирована.

зачем использовать

Взяв в качестве примера платформу Windows, большинство людей сначала подумают об использовании QT (C++), WPF (C#) и других языков для разработки приложений. Нельзя отрицать, что это уже очень зрелые решения для разработки. Однако давайте рассмотрим следующие два сценария:

  • Компания хочет новое приложение, но технический персонал делает большую часть фронтенд-разработки.
  • У компании изначально есть онлайн-веб-приложение, но она хочет запаковать оболочку и открывать ее прямо на рабочем столе, а заодно добавить некоторые функции для взаимодействия с системой

Для первого сценария разработчики в команде не знакомы с C++ и C#, хотя они могут изучить его сейчас, но техническое управление и управление проектами в целом станет неконтролируемым.

Для второго сценария требований к бизнес-логике приложения не так много, а настраивается только работающая среда с браузером, и настраивать C++ или C# разработчика только на это не стоит.

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

Рождение Электрона предоставляет такую ​​возможность. Это может помочь фронтенд-разработчикам быстро разрабатывать кроссплатформенные настольные приложения без изучения других языков и навыков.

как использовать

В следующих главах мы объясним, как использовать электрон для разработки на основе основных точек знаний и дополнены фактическими случаями. Здесь мы только кратко представим, как использовать электрон, чтобы написать классическую Hello World.

Сначала создайте новый каталог и инициализируйте npm.

mkdir helloword
npm init

Измените файл package.json и добавьте команду запуска запуска npm.

{
  "name": "electron demo",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",   //修改为main.js
  "scripts": {
    "start": "electron ."  //增加start命令
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "electron": "^3.0.10"
  }
}

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

npm i electron --save-dev

Создайте main.js и index.html в корневом каталоге

main.js

const { app, BrowserWindow } = require('electron')

function createWindow () {   
  // 创建浏览器窗口
  win = new BrowserWindow({ width: 800, height: 600 })

  // 然后加载应用的 index.html。
  win.loadFile('index.html')
}

app.on('ready', createWindow)

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

На этом все наши приготовления завершены, следующим шагом будет запуск!

npm run start

увидеть эффект

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

Категории