О панели в ElectronJS

Опубликовано: 1 Августа, 2021

ElectronJS - это платформа с открытым исходным кодом, используемая для создания кроссплатформенных нативных настольных приложений с использованием веб-технологий, таких как HTML, CSS и JavaScript, которые могут работать в операционных системах Windows , macOS и Linux. Он объединяет движок Chromium и NodeJS в единую среду выполнения.

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

Мы предполагаем, что вы знакомы с предварительными условиями, описанными в вышеупомянутой ссылке. Для работы Electron в системе должны быть предварительно установлены node и npm.

Структура проекта:

Пример: следуйте инструкциям в разделе «Пользовательские уведомления в ElectronJS», чтобы настроить базовое приложение Electron. Скопируйте код Boilerplate для файлов main.js и index.html, как указано в статье. Также внесите необходимые изменения, упомянутые в файле package.json, чтобы запустить приложение Electron. Мы продолжим создавать наше приложение, используя ту же кодовую базу. Основные шаги, необходимые для настройки приложения Electron, остаются прежними.

package.json:

 {
  "имя": "электрон-панель",
  "версия": "1.0.0",
  "description": "О панели в электронном",
  "main": "main.js",
  "scripts": {
    "старт": "электрон".
  },
  "ключевые слова": [
    "электрон"
  ],
  «автор»: «Радхеш Ханна»,
  "лицензия": "ISC",
  "dependencies": {
    "электрон": "^ 8.3.0"
  }
}

Создайте папку с активами в соответствии со структурой проекта. Скопируйте любой файл изображения по вашему выбору в папку с ресурсами и назовите его image.png . В этом уроке мы будем использовать логотип Electron в качестве файла image.png.
Вывод: На этом этапе настроено наше основное электронное приложение. После запуска приложения мы должны увидеть следующий результат.

О панели в Electron: модуль приложения используется для управления жизненным циклом событий приложений. Этот модуль является частью основного процесса . Чтобы импортировать и использовать модуль приложения в процессе рендеринга , мы будем использовать удаленный модуль Electron.

index.html : добавьте в этот файл следующий фрагмент.

html

 < h3 >About Panel in Electron</ h3 >
  < button id = "about" >
    About Panel in Electron
  </ button > 

index.js : добавьте в этот файл следующий фрагмент.

javascript

 const electron = require( 'electron' )
 const path = require( 'path' )
 
// Importing the app module using Electron remote
 const app = electron.remote.app
 
var about = document.getElementById( 'about' );
 about.addEventListener( 'click' , (event) => {
    app.setAboutPanelOptions({
        applicationName: 'About Panel in Electron' ,
        applicationVersion: '1.0.0' ,
        copyright: 'GeeksForGeeks' ,
        credits: 'GeeksForGeeks' ,
        authors: [ 'Radhesh Khanna' ],
        website: ' https://www.geeksforgeeks.org/ ' ,
        iconPath: path.join(__dirname, '../assets/image.png' ),
    });
   
    app.showAboutPanel();
 });

Подробное объяснение всех методов экземпляра модуля приложения, используемых в коде, приведено ниже:

app.setAboutPanelOptions (options) Этот метод экземпляра используется для установки параметров для панели «О программе». В Linux параметры должны быть переданы, чтобы они отображались на панели «О программе». Он не поддерживает настройки по умолчанию. Этот метод не имеет возвращаемого типа. Он принимает следующие параметры. Для получения более подробной информации перейдите по этой ссылке.
- options: Object Принимает следующие параметры:
  - applicationName: String (Необязательно) Устанавливает имя приложения, которое будет отображаться на панели «О программе».
  - applicationVersion; Строка (необязательно) Устанавливает версию приложения, которая будет отображаться на панели «О программе».
  - copyright: String (Необязательно) Задает отображение информации об авторских правах приложений на панели «О программе».
  - version: String (Необязательно) Этот параметр поддерживается только в macOS. Он устанавливает номер версии сборки приложения, который будет отображаться на панели «О программе».
  - credits: String (Необязательно) Этот параметр поддерживается только в Windows и Linux . Он устанавливает кредитную информацию приложений, которая будет отображаться на панели «О программе».
  - авторы: String [] (Необязательно) Этот параметр поддерживается только в Linux. Этот параметр принимает массив String. Устанавливает Список авторов приложения.
  - website: String (Необязательно) Этот параметр поддерживается только в Linux. Устанавливает информацию о веб-сайте приложений.
  - iconPath: String (Необязательно) Этот параметр поддерживается только в Windows и Linux . Он принимает путь к иконке приложения. В Linux значок будет отображаться как изображение размером 64 × 64 пикселя с сохранением соотношения сторон. В нашем коде мы использовали файл image.png в качестве значка нашего приложения.
app.showAboutPanel () Этот метод Instance просто показывает приложения О панели с опциями , установленными с помощью () метод app.setAboutPanelOptions. Если параметры не указаны, используются значения по умолчанию в Windows и macOS . Linux не поддерживает значения по умолчанию для панели «О программе». В Windows он просто показывает текущую версию Electron, работающую в приложении, в качестве параметров по умолчанию.

Выход:

Удаление свойства iconPath из метода app.setAboutPanelOptions (options) .

Передача пустого объекта параметров в методе app.setAboutPanelOptions (options) в Windows.

Node.js JavaScript HTML CSS

О панели в ElectronJS

html

javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ