commit
054446a8bf
1 changed files with 30 additions and 30 deletions
|
@ -1,11 +1,11 @@
|
||||||
# Быстрый старт
|
# Быстрый старт
|
||||||
|
|
||||||
Electron позволяет вам делать приложения для рабочего стола на чистом JavaScript,
|
Electron позволяет Вам делать приложения для рабочего стола на чистом JavaScript,
|
||||||
предоставляя среду с богатым API. Можете представлять его как Node.js, который
|
предоставляя среду с богатым API. Можете представлять его как Node.js приложение, которое
|
||||||
ориентирован на рабочий стол, а не веб сервера.
|
ориентировано для рабочего стола, а не для веб сервера.
|
||||||
|
|
||||||
Это, однако, не значит, что Electron — лишь привязки к GUI билиотекам. На деле
|
Однако это не значит, что Electron — лишь привязка к GUI билиотекам. На деле
|
||||||
Electron использует веб-страницы как интерфейс, так что вы можете считать его
|
Electron использует веб-страницы как интерфейс, так что Вы можете считать его
|
||||||
небольшим Chroumium браузером, который контролируется с помощью JavaScript.
|
небольшим Chroumium браузером, который контролируется с помощью JavaScript.
|
||||||
|
|
||||||
### Главный процесс
|
### Главный процесс
|
||||||
|
@ -18,11 +18,11 @@ __главным процессом__. Скрипт, который работа
|
||||||
|
|
||||||
Так как Electron использует Chromium для показа веб-страниц,
|
Так как Electron использует Chromium для показа веб-страниц,
|
||||||
мульти-процессовая архитектура показа страниц Chromium тоже используется.
|
мульти-процессовая архитектура показа страниц Chromium тоже используется.
|
||||||
Каждая веб-страницы в Electron работает в своём собственном процессе,
|
Каждая веб-страница в Electron работает в своём собственном процессе,
|
||||||
который называется __процесс-рендерер__.
|
который называется __процесс-рендерер__.
|
||||||
|
|
||||||
В обычных браузерах веб-страницы обычно запускаются в "песочнице" и им недоступны
|
В обычных браузерах веб-страницы обычно запускаются в "песочнице" и им недоступны
|
||||||
реальные ресурсы компьютера. Пользователи Electron же могут использовать API
|
реальные ресурсы компьютера. Пользователи Electron напротив могут использовать API
|
||||||
Node.js на страницах, что допускает более низкоуровневую работу с операционной системой.
|
Node.js на страницах, что допускает более низкоуровневую работу с операционной системой.
|
||||||
|
|
||||||
### Разница мужду главным процессом и процессом-рендерером
|
### Разница мужду главным процессом и процессом-рендерером
|
||||||
|
@ -43,11 +43,11 @@ Node.js на страницах, что допускает более низко
|
||||||
В Electron есть несолько способов общения между процессам. Например, модули
|
В Electron есть несолько способов общения между процессам. Например, модули
|
||||||
[`ipcRenderer`](../api/ipc-renderer.md) и [`ipcMain`](../api/ipc-main.md) используются
|
[`ipcRenderer`](../api/ipc-renderer.md) и [`ipcMain`](../api/ipc-main.md) используются
|
||||||
для отправки сообщений, а [remote](../api/remote.md) - для коммуникации в RPC стиле.
|
для отправки сообщений, а [remote](../api/remote.md) - для коммуникации в RPC стиле.
|
||||||
В ЧАВО также есть пункт о том, [как разделять информацию между страницами][share-data]
|
В FAQ также есть пункт о том, [как разделять информацию между страницами][share-data]
|
||||||
|
|
||||||
## Первое приложение на Electron
|
## Первое приложение на Electron
|
||||||
|
|
||||||
Как правило, приложение Electron структурировано следующим образом::
|
Как правило, приложение Electron структурировано следующим образом:
|
||||||
|
|
||||||
```text
|
```text
|
||||||
your-app/
|
your-app/
|
||||||
|
@ -56,9 +56,9 @@ your-app/
|
||||||
└── index.html
|
└── index.html
|
||||||
```
|
```
|
||||||
|
|
||||||
Формат `package.json` точно такой же, как у модулей Node и сприпт, объявленый
|
Формат `package.json` точно такой же, как у модулей Node и скрипт, объявленый
|
||||||
как `main`, будет выполняться при запуске вашего приложения, работая в
|
как `main`, будет выполняться при запуске вашего приложения, работая в
|
||||||
главном процессе. Например, ваш `package.json` может выглядеть вот так:
|
главном процессе. Например, Ваш `package.json` может выглядеть вот так:
|
||||||
|
|
||||||
```json
|
```json
|
||||||
{
|
{
|
||||||
|
@ -82,12 +82,12 @@ const app = electron.app
|
||||||
// Модуль, создающий окно приложения.
|
// Модуль, создающий окно приложения.
|
||||||
const BrowserWindow = electron.BrowserWindow
|
const BrowserWindow = electron.BrowserWindow
|
||||||
|
|
||||||
// Удерживайте глобальное обращение к объекту окна, если вы так не сделаете, то
|
// Удерживайте глобальное обращение к объекту окна, если Вы так не сделаете, то
|
||||||
// окно само закроется после того, как объект будет собран сборщиком мусора.
|
// окно само закроется после того, как объект будет собран сборщиком мусора.
|
||||||
let mainWindow
|
let mainWindow
|
||||||
|
|
||||||
function createWindow () {
|
function createWindow () {
|
||||||
// Создаём окно браузера.
|
// Создаём окно браузера
|
||||||
mainWindow = new BrowserWindow({width: 800, height: 600})
|
mainWindow = new BrowserWindow({width: 800, height: 600})
|
||||||
|
|
||||||
// и загружаем index.html приложения.
|
// и загружаем index.html приложения.
|
||||||
|
@ -114,7 +114,7 @@ app.on('ready', createWindow)
|
||||||
// Выйти, если все окна закрыты
|
// Выйти, если все окна закрыты
|
||||||
app.on('window-all-closed', function () {
|
app.on('window-all-closed', function () {
|
||||||
//На OS X приложение и его строка меню обычно остаются активными,
|
//На OS X приложение и его строка меню обычно остаются активными,
|
||||||
//пока пользователь не завершит их с помощью Cmd + Q.
|
//пока пользователь не завершит их с помощью `Cmd + Q`.
|
||||||
if (process.platform !== 'darwin') {
|
if (process.platform !== 'darwin') {
|
||||||
app.quit()
|
app.quit()
|
||||||
}
|
}
|
||||||
|
@ -129,12 +129,12 @@ app.on('activate', function () {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
//В этот файл вы можете включить остальной код вашего главного процесса.
|
//В этот файл Вы можете включить остальной код вашего главного процесса.
|
||||||
//Вы также можете разложить его по отдельным файлам и подключить с помощью require.
|
//Вы также можете разложить его по отдельным файлам и подключить с помощью require.
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
Наконец, `index.html`, страница, которую вы хотите показать:
|
Наконец, `index.html`, страница, которую Вы хотите показать:
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
|
@ -154,22 +154,22 @@ app.on('activate', function () {
|
||||||
|
|
||||||
## Запуск вашего приложения
|
## Запуск вашего приложения
|
||||||
|
|
||||||
Когда вы создали `main.js`, `index.html` и `package.json` вас скорее всего захочется
|
После того как Вы создали `main.js`, `index.html` и `package.json` Вам скорее всего захочется
|
||||||
запустить ваше приложение, чтобы проверить, что оно работает так, как надо.
|
запустить приложение, чтобы проверить, что оно работает так, как надо.
|
||||||
|
|
||||||
### electron-prebuilt
|
### electron-prebuilt
|
||||||
|
|
||||||
[`electron-prebuilt`](https://github.com/electron-userland/electron-prebuilt) — `npm` модуль,
|
[`electron-prebuilt`](https://github.com/electron-userland/electron-prebuilt) — `npm` модуль,
|
||||||
который содержит прекомпилированную версию Electron.
|
который содержит прекомпилированную версию Electron.
|
||||||
|
|
||||||
Если вы установили Electron глобально через `npm`, то вам нужно будет всего лишь
|
Если вы установили Electron глобально через `npm`, то Вам нужно будет всего лишь
|
||||||
запустить сдедующее в папке вашего проекта:
|
запустить сдедующее в папке вашего проекта:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
electron .
|
electron .
|
||||||
```
|
```
|
||||||
|
|
||||||
Если вы установили Electron локально, то выполните это:
|
Если Вы установили Electron локально, то выполните это:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
./node_modules/.bin/electron .
|
./node_modules/.bin/electron .
|
||||||
|
@ -177,7 +177,7 @@ electron .
|
||||||
|
|
||||||
### Исполняемые файлы Electron, скачанные вручную
|
### Исполняемые файлы Electron, скачанные вручную
|
||||||
|
|
||||||
Если вы скачали Electron вручную, то вы можете использовать
|
Если Вы скачали Electron вручную, то Вы можете использовать
|
||||||
исполняемые файлы прямо в папке вашего проекта.
|
исполняемые файлы прямо в папке вашего проекта.
|
||||||
|
|
||||||
#### Windows
|
#### Windows
|
||||||
|
@ -198,27 +198,27 @@ $ ./electron/electron your-app/
|
||||||
$ ./Electron.app/Contents/MacOS/Electron your-app/
|
$ ./Electron.app/Contents/MacOS/Electron your-app/
|
||||||
```
|
```
|
||||||
|
|
||||||
`Electron.app` — часть реализного пакета Electron, вы можете скачать его
|
`Electron.app` — часть реализного пакета Electron, Вы можете скачать его
|
||||||
[тут](https://github.com/electron/electron/releases).
|
[тут](https://github.com/electron/electron/releases).
|
||||||
|
|
||||||
### Запустить как дистрибутив
|
### Запустить как дистрибутив
|
||||||
|
|
||||||
Когда вы закончили написание вашего приложения, вы можете создать
|
Когда Вы закончили написание вашего приложения, Вы можете создать
|
||||||
дистрибутив, следуя инструкциям [отсюда](./application-distribution.md) и
|
дистрибутив, следуя инструкциям [отсюда](./application-distribution.md) и
|
||||||
затем запустить полученное приложение.
|
затем запустить полученное приложение.
|
||||||
|
|
||||||
### Попробуйте этот пример
|
### Попробуйте этот пример
|
||||||
|
|
||||||
Скопируйте и запустите этот обучающий код, ичпользуя репозиторий [`atom/electron-quick-start`](https://github.com/electron/electron-quick-start)
|
Скопируйте и запустите этот обучающий код, используя репозиторий [`atom/electron-quick-start`](https://github.com/electron/electron-quick-start)
|
||||||
|
|
||||||
**Заметка**: Для запуска требуется [Git](https://git-scm.com) и [Node.js](https://nodejs.org/en/download/) (который включает в себя [npm](https://npmjs.org)).
|
**Заметка**: Для запуска требуется [Git](https://git-scm.com) и [Node.js](https://nodejs.org/en/download/) (который включает в себя [npm](https://npmjs.org)).
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
# Склонируйте репозиторий
|
# Клонируем репозиторий
|
||||||
$ git clone https://github.com/electron/electron-quick-start
|
$ git clone https://github.com/electron/electron-quick-start
|
||||||
# Перейдите в папку репозитория
|
# Переходим в папку скачанного репозитория
|
||||||
$ cd electron-quick-start
|
$ cd electron-quick-start
|
||||||
# Установите зависимости и запустите
|
# Устанавливаем зависимости и запускаем
|
||||||
$ npm install && npm start
|
$ npm install && npm start
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue