TyanNN dae63ec4f1 Translated Quickstart to ru_RU

2016-04-30 13:54:19 +03:00

11 KiB

Raw Blame History

Быстрый старт

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

Это, однако, не значит, что Electron — лишь привязки к GUI билиотекам. На деле Electron использует веб-страницы как интерфейс, так что вы можете считать его небольшим Chroumium браузером, который контролируется с помощью JavaScript.

Главный процесс

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

Процесс-рендерер

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

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

Разница мужду главным процессом и процессом-рендерером

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

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

На веб-страницах не позволяется вызывать нативные API, которые управляют GUI, потому что это очень опасно и может легко вызвать утечку ресурсов. Если вы хотите выполнить действия с GUI на странице, процесс-рендерер этой страницы должен "попросить" главный процесс сделать эти действия.

В Electron есть несолько способов общения между процессам. Например, модули ipcRenderer и ipcMain используются для отправки сообщений, а remote - для коммуникации в RPC стиле. В ЧАВО также есть пункт о том, как разделять информацию между страницами

Первое приложение на Electron

Как правило, приложение Electron структурировано следующим образом::

your-app/
├── package.json
├── main.js
└── index.html

Формат package.json точно такой же, как у модулей Node и сприпт, объявленый как main, будет выполняться при запуске вашего приложения, работая в главном процессе. Например, ваш package.json может выглядеть вот так:

{
  "name"    : "your-app",
  "version" : "0.1.0",
  "main"    : "main.js"
}

Заметка: Если поле main отсутствует в package.json, Electron попробует загрузить index.js.

main.js должен создавать окно и управлять системными событиями, типичный пример:

const electron = require('electron')
// Модуль, контролирующий основное: сам Electron.
const app = electron.app
// Модуль, создающий окно приложения.
const BrowserWindow = electron.BrowserWindow

// Удерживайте глобальное обращение к объекту окна, если вы так не сделаете, то
// окно само закроется после того, как объект будет собран сборщиком мусора.
let mainWindow

function createWindow () {
  // Создаём окно браузера.
  mainWindow = new BrowserWindow({width: 800, height: 600})

  // и загружаем index.html приложения.
  mainWindow.loadURL('file://' + __dirname + '/index.html')

  // Открываем DevTools.
  mainWindow.webContents.openDevTools()

  // Будет выполнено, когда пользователь закроет окно
  mainWindow.on('closed', function () {
    //Убрать обращение на объект окна, обычно стоит хранить окна в массиве,
    //если ваше приложение поддерживает несколько, сейчас стоит удалить
    //соответствующий элемент.
    mainWindow = null
  })
}

//Этот метод будет вызван, когда Electron закончит инициализацию
//и будет готов создавать окна браузера.
//Некоторые API возможно использовать только послн того, как
//это произойдёт.
app.on('ready', createWindow)

// Выйти, если все окна закрыты
app.on('window-all-closed', function () {
  //На OS X приложение и его строка меню обычно остаются активными,
  //пока пользователь не завершит их с помощью Cmd + Q.
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', function () {
  //На OS X приложение обычно пересоздаёт окно, когда
  //пользователь кликает на его иконку в доке, если не открыто
  //других окон.
  if (mainWindow === null) {
    createWindow()
  }
})

//В этот файл вы можете включить остальной код вашего главного процесса.
//Вы также можете разложить его по отдельным файлам и подключить с помощью require.

Наконец, index.html, страница, которую вы хотите показать:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Привет, мир!</h1>
    Мы используем Node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    и Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

Запуск вашего приложения

Когда вы создали main.js, index.html и package.json вас скорее всего захочется запустить ваше приложение, чтобы проверить, что оно работает так, как надо.

electron-prebuilt

electron-prebuilt — npm модуль, который содержит прекомпилированную версию Electron.

Если вы установили Electron глобально через npm, то вам нужно будет всего лишь запустить сдедующее в папке вашего проекта:

electron .

Если вы установили Electron локально, то выполните это:

./node_modules/.bin/electron .

Исполняемые файлы Electron, скачанные вручную

Если вы скачали Electron вручную, то вы можете использовать исполняемые файлы прямо в папке вашего проекта.

Windows

$ .\electron\electron.exe your-app\

Linux

$ ./electron/electron your-app/

OS X

$ ./Electron.app/Contents/MacOS/Electron your-app/

Electron.app — часть реализного пакета Electron, вы можете скачать его тут.

Запустить как дистрибутив

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

Попробуйте этот пример

Скопируйте и запустите этот обучающий код, ичпользуя репозиторий atom/electron-quick-start

Заметка: Для запуска требуется Git и Node.js (который включает в себя npm).

# Склонируйте репозиторий
$ git clone https://github.com/electron/electron-quick-start
# Перейдите в папку репозитория
$ cd electron-quick-start
# Установите зависимости и запустите
$ npm install && npm start

11 KiB Raw Blame History Unescape Escape