Эмуляция в ElectronJS

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

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

В традиционных веб-приложениях у нас есть функция Toggle View, в которой нам предоставляется выбор, просматривать ли мы настольную или мобильную версию веб-сайта. Это зависит от устройства, с которого мы в настоящее время просматриваем веб-сайт. Это тоже часть эмуляции . Под эмуляцией понимается способность программного обеспечения имитировать (или имитировать) другую программу или приобретать характеристики, отличные от исходной / предполагаемой. Это сделано для улучшения взаимодействия с пользователем или предоставления разработчикам возможности тестировать приложение на разных платформах / характеристиках. Электрон дает нам способ , с помощью которого мы можем эмулировать рабочий стол или мобильное устройство с помощью методов экземпляра и событие встроенного объекта BrowserWindow и webContents собственности. В этом руководстве будет показано, как эмулировать устройство в Electron.

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

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

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

package.json:

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

Вывод: На этом этапе настроено наше основное электронное приложение. После запуска приложения мы должны увидеть следующий результат.

Устройство Emulation в Electron: BrowserWindow Instance и webContents собственность является частью основного процесса. Чтобы импортировать и использовать BrowserWindow в процессе рендеринга, мы будем использовать удаленный модуль Electron.

index.html : добавьте в этот файл следующий фрагмент. Кнопки еще не имеют связанных с ними функций. Чтобы изменить это, добавьте следующее в файл index.js.

html

 < h3 >
  Emulation in ElectronJS
 </ h3 >
 < button id = "emulate" >
  Emulate Mobile
 </ button >
 < button id = "desktop" >
  Emulate Desktop
 </ button >
 < button id = "disable" >
  Disable Device Emulation
 </ button > 

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

javascript

 const electron = require( "electron" );
 
// Importing BrowserWindow from Main
 // Process with Electron remote
 const BrowserWindow = electron.remote.BrowserWindow;
 let win = BrowserWindow.getFocusedWindow();
 // let win = BrowserWindow.getAllWindows()[0];
 
var emulate = document.getElementById( "emulate" );
 emulate.addEventListener( "click" , () => {
    win.webContents.enableDeviceEmulation({
        screenPosition: "mobile" ,
       
        // Defined as Size of Galaxy S5 in
        // Chromium Browser
        screenSize: {
            width: 360,
            height: 640,
        },
        viewPosition: {
            x: 0,
            y: 0,
        },
        // Defined as Size of Galaxy S5 in
        // Chromium Browser
        viewSize: {
            width: 360,
            height: 640,
        },
        deviceScaleFactor: 0,
        scale: 1,
    });
 });
 
var desktop = document.getElementById( "desktop" );
 desktop.addEventListener( "click" , () => {
    win.webContents.enableDeviceEmulation({
        screenPosition: "desktop" ,
       
        // Same as BrowserWindow Instance
        // in Main Process
        screenSize: {
            width: 800,
            height: 600,
        },
        viewPosition: {
            x: 0,
            y: 0,
        },
        // Same as BrowserWindow Instance
        // in Main Process
        viewSize: {
            width: 800,
            height: 600,
        },
        deviceScaleFactor: 0,
        scale: 1,
    });
 });
 
var disable = document.getElementById( "disable" );
 disable.addEventListener( "click" , () => {
    win.webContents.disableDeviceEmulation();
 });

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

webContents.enableDeviceEmulation (parameters) Этот метод экземпляра просто включает эмуляцию устройства на основе предоставленных ему параметров. Этот метод не имеет возвращаемого типа. Он принимает следующий объект.
- параметры: Объект Принимает следующие параметры,
  - screenPosition: String Это свойство определяет эмуляцию. Он представляет собой вид экрана, который следует эмулировать для приложения. Он может иметь ценность как для настольных компьютеров, так и для мобильных устройств. значение desktop представляет тип экрана рабочего стола, а значение mobile представляет тип экрана мобильного устройства. Значение по умолчанию - рабочий стол . В нашем коде мы переключались между двумя значениями на основе других свойств, предоставленных в объекте параметров.
  - screenSize: Object (Необязательно) Установите эмулируемый размер экрана с помощью объекта Size. Этот параметр важен, если для свойства screenPosition установлено значение mobile . Он принимает следующие параметры.
    - width: Integer Ширина экрана.
    - height: Integer Высота размера экрана.
  - viewSize: Object (Необязательно) Установите эмулируемый размер представления с помощью объекта « Размер». Этот параметр важен, если для свойства screenPosition установлено значение mobile . Он принимает следующие параметры. По умолчанию - пустой объект. Пустой объект означает отсутствие переопределения .
    - width: Integer Ширина размера просмотра.
    - height: Integer Высота размера просмотра.
  - viewPosition: Object Этот параметр используется для позиционирования рамки просмотра на экране с помощью точечного объекта. Этот параметр важен, если для свойства screenPosition установлено значение mobile . Он принимает следующие параметры.
    - x: Integer Координата X позиции.
    - y: Integer Координата Y позиции.
  - deviceScaleFactor: Integer Этот параметр устанавливает коэффициент масштабирования устройства. Значение по умолчанию - 0 .
  - scale: Float Этот параметр определяет масштаб (Zoom) эмулированного представления, как определено свойством screenPosition внутри доступного пространства. Это значение переопределяет режим просмотра по размеру. Значение по умолчанию - 1 .
webContents.disableDeviceEmulation () Этот метод экземпляра просто отключает эмуляцию устройства, включенную методом webContents.enableDeviceEmulation () . Этот метод не принимает никаких параметров и не имеет возвращаемого типа.

Чтобы получить текущий экземпляр BrowserWindow в процессе рендеринга, мы можем использовать некоторые статические методы, предоставляемые объектом BrowserWindow.

BrowserWindow.getAllWindows (): этот метод возвращает массив активных / открытых экземпляров BrowserWindow. В этом приложении у нас есть только один активный экземпляр BrowserWindow, и на него можно напрямую ссылаться из массива, как показано в коде.
BrowserWindow.getFocusedWindow (): этот метод возвращает экземпляр BrowserWindow, который сфокусирован в приложении. Если текущий экземпляр BrowserWindow не найден, возвращается значение null . В этом приложении у нас есть только один активный экземпляр BrowserWindow, и на него можно напрямую ссылаться с помощью этого метода, как показано в коде.

Выход:

Node.js JavaScript HTML CSS

Эмуляция в ElectronJS

html

javascript

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