В этом руководстве предполагается, что вы знаете, как установить и настроить проект electron-quick-start. Вы можете найти учебник здесь.

В этом руководстве мы рассмотрим несколько модулей Node и Electron для сбора информации о системе пользователя, приложении и экране.

Если мы перейдем к index.html, мы увидим, что мы уже отображали некоторую системную информацию, используя модуль Node 'process' и выводя версии Node, Chrome и Electron. .

<script>document.write(process.versions.node)</script>
<script>document.write(process.versions.chrome)</script>
<script>document.write(process.versions.electron)</script>

Точно так же мы можем использовать другой модуль Node с именем 'os', который предоставит информацию об операционной системе. Давайте отобразим имя хоста нашего компьютера из файла renderer.js. Во-первых, нам потребуется пакет os и назначим его константе os. Мы распечатаем его в консоли, поэтому давайте напишем console.log, добавим строку 'home dir:' в качестве параметра и вызовем os.hostname () функция.

const os = require(‘os’)
console.log('home dir:', os.hostname());

Electron API также предлагает модуль под названием app, который отвечает за управление жизненным циклом приложения. Мы будем отображать значение пути к приложению. Начните с запроса пакета electron и получения модуля remote с помощью деструктурирования с помощью фигурных скобок.

Мы будем использовать удаленныймодуль для вызова модуля приложения (который доступен только в основном процессе) из нашего процесса визуализации. Аналогично отображению имени хоста ОС, мы распечатаем путь к приложению в консоли, запустив console.log, передав 'путь к приложению:' в качестве первого параметра и вызвав remote.app.getAppPath.

const { remote } = require(‘electron’)
console.log('app path:' , remote.app.getAppPath());

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

Начните с перехода к index.html и добавления кнопки с идентификатором work-area-size и текстом Создать новое окно. 

<button id=”work-area-size”>Create new window</button>

Теперь давайте перейдем к файлу renderer.js и получим ссылку на кнопку, вызвав document.getElementById('work-area-size') и присвоив ее константа workAreaSizeBtn.

const workAreaSizeBtn = document.getElementById('work-area-size')

Теперь давайте создадим прослушиватель событий щелчка по ссылке на эту кнопку. Это можно сделать, вызвав метод addEventListener для workAreaSizeBtn и передав строку 'click' в качестве первого параметра и анонимную функцию с событие в качестве второго параметра.

workAreaSizeBtn.addEventListener('click', function (event) {
})

Чтобы получить доступный размер рабочей области, мы снова требуем пакет 'electron' и назначаем его электронной константе.

const electron = require(‘electron’)

Мы не можем просто определить постоянный экран, потому что window.screen является зарезервированным свойством. Теперь, чтобы получить доступную рабочую область, мы вызываем electron.screen.getPrimaryDisplay().workAreaSize внутри прослушивателя событий и получаем ширину и высоту, деструктурируя возвращаемый объект.

const {width, height} = electron.screen.getPrimaryDisplay().workAreaSize

Доступны размеры ширины и высоты рабочей области, поэтому мы можем использовать их для определения ширины и высоты BrowserWindow. Мы создадим новый BrowserWindow, используя удаленный модуль, потому что мы создаем его из процесса рендерера.

Определите новую переменную области блока win и назначьте ей новый экземпляр BrowserWindow, вызвав new remote.BrowserWindow и указав width и height в качестве параметра объекта. Мы будем отображать веб-сайт GitHub в нашем BrowserWindow, поэтому мы вызываем метод win.loadURL и передаем строку https://github.com.

let win = new remote.BrowserWindow({width, height})
win.loadURL(‘https://github.com')