ElectronJS 中的仿真

ElectronJS是一个开源框架，用于使用能够在 Windows 、 macOS和Linux操作系统上运行的 HTML、CSS 和 JavaScript 等 Web 技术构建跨平台原生桌面应用程序。它将 Chromium 引擎和NodeJS 组合成一个单一的运行时。

在传统的 Web 应用程序中，我们有切换视图功能，我们可以在其中选择是查看网站的桌面版本还是移动版本。这取决于我们当前查看网站的设备。这也是Emulation的一部分。仿真是指软件模仿（或模仿）另一个程序或采用与原始/预期程序不同的特性的能力。这样做是为了增强用户体验或为开发人员提供在不同平台/特性上测试应用程序的能力。 Electron 为我们提供了一种使用内置 BrowserWindow对象和webContents属性的 Instance 方法和事件来模拟桌面或移动设备的方法。本教程将演示如何在 Electron 中模拟设备。

我们假设您熟悉上述链接中介绍的先决条件。为了让 Electron 正常工作，需要在系统中预装node和npm。

• 项目结构：

示例：按照 ElectronJS 中的动态样式中给出的步骤设置基本的 Electron 应用程序。复制文章中提供的main.js文件和index.html文件的样板代码。还要执行 package.json文件中提到的必要更改以启动电子应用程序。我们将继续使用相同的代码库构建我们的应用程序。设置 Electron 应用程序所需的基本步骤保持不变。

包.json：

{
  "name": "electron-emulate",
  "version": "1.0.0",
  "description": "Device Emulation in Electron",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [
    "electron"
  ],
  "author": "Radhesh khanna",
  "license": "ISC",
  "dependencies": {
    "electron": "^8.3.0"
  }
}

输出：此时，我们的基本电子应用程序已设置。启动应用程序后，我们应该会看到以下结果。

Electron 中的设备仿真： BrowserWindow实例和webContents属性是Main Process 的一部分。为了在 Renderer Process 中导入和使用 BrowserWindow，我们将使用 Electron远程模块。

• index.html ：在该文件中添加以下代码段。按钮还没有任何与之关联的功能。要更改此设置，请在index.js文件中添加以下内容。

html

  Emulation in ElectronJS


  Emulate Mobile


  Emulate Desktop


  Disable Device Emulation

• 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属性的所有Instance方法的详细解释如下。

• webContents.enableDeviceEmulation(parameters)此实例方法仅根据提供给它的参数启用设备仿真。此方法没有返回类型。它接受以下对象。
  • 参数：对象它接受以下参数，
    • screenPosition: String此属性指定仿真。它表示应为应用程序模拟的屏幕视图。它可以持有桌面或移动价值。 desktop值表示桌面屏幕类型，而mobile值表示移动屏幕类型。默认值为桌面。在我们的代码中，我们根据参数对象中提供的其他属性在两个值之间切换。
    • screenSize: Object （可选）使用 Size对象设置模拟屏幕大小。当 screenPosition属性设置为mobile时，此参数很重要。它接受以下参数。
      • width: Integer屏幕尺寸的宽度。
      • height: Integer屏幕尺寸的高度。
    • viewSize: Object （可选）使用 Size对象设置模拟视图大小。当 screenPosition属性设置为mobile时，此参数很重要。它接受以下参数。默认是一个空对象。空对象意味着没有覆盖。
      • width: Integer视图大小的宽度。
      • height: Integer视图大小的高度。
    • viewPosition: Object此参数用于使用点对象在屏幕上定位视图框架。当 screenPosition属性设置为mobile时，此参数很重要。它接受以下参数。
      • x: Integer 位置的 X 坐标。
      • y: Integer 位置的 Y 坐标。
    • deviceScaleFactor: Integer此参数设置设备比例因子。默认值为0 。
    • scale: Float此参数定义模拟视图的缩放（缩放），如可用空间内的screenPosition 属性所定义。此值会覆盖适合视图模式。默认值为1 。
• webContents.disableDeviceEmulation()此实例方法只是禁用由webContents.enableDeviceEmulation()方法启用的设备模拟。此方法不接受任何参数，也没有返回类型。

要在Renderer Process 中获取当前BrowserWindow实例，我们可以使用BrowserWindow对象提供的一些静态方法。

• BrowserWindow.getAllWindows()：此方法返回活动/打开的 BrowserWindow 实例的数组。在这个应用程序中，我们只有一个活动的BrowserWindow实例，它可以直接从 Array 中引用，如代码所示。
• BrowserWindow.getFocusedWindow()：此方法返回在应用程序中聚焦的 BrowserWindow 实例。如果未找到当前 BrowserWindow 实例，则返回null 。在此应用程序中，我们只有一个活动的BrowserWindow实例，可以使用此方法直接引用它，如代码所示。

输出：