ElectronJS 中的仿真

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

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

• 项目结构：

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

package.json：

{
  “name”：“电子仿真”，
  “版本”：“1.0.0”，
  "description": "Electron 中的设备 Emulation",
  "main": "main.js",
  “脚本”：{
    “开始”：“电子”。
  },
  “关键字”：[
    “电子”
  ],
  “作者”：“拉德什·卡纳”，
  “许可证”：“ISC”，
  “依赖项”：{
    “电子”：“^8.3.0”
  }
}

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

Electron 中的设备模拟： BrowserWindow 实例和 webContents 属性是 主进程 的一部分。 为了在渲染器进程中导入和使用BrowserWindow，我们将使用Electronremote模块。

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

Emulation在 ElectronJS 中


模拟移动设备


模拟桌面


禁用设备Emulation

常量电子 = require("电子");

// 从 Main 导入 BrowserWindow
// 使用 Electron 远程处理
const BrowserWindow = electro.remote.BrowserWindow;
让 win = BrowserWindow.getFocusedWindow();
// 让 win = BrowserWindow.getAllWindows()[0];

var emulate = document.getElementById("emulate");
emulate.addEventListener("点击", () => {
win.webContents.enableDevice紫色({
screenPosition：“移动”，

// 定义为 Galaxy S5 的尺寸
// 铬浏览器
屏幕尺寸： {
宽度：360，
身高：64​​0，
},
视图位置：{
x：0，
y：0，
},
// 定义为 Galaxy S5 的尺寸
// 铬浏览器
视图大小：{
宽度：360，
身高：64​​0，
},
设备比例因子：0，
规模：1，
});
});
var 桌面 = document.getElementById("桌面");
Desktop.addEventListener("点击", () => {
win.webContents.enableDevice紫色({
screenPosition: “桌面”,

// 与 BrowserWindow 实例相同
// 在主进程中
屏幕尺寸： {
宽度：800，
高度：600，
},
视图位置：{
x：0，
y：0，
},
// 与 BrowserWindow 实例相同
// 在主进程中
视图大小：{
宽度：800，
高度：600，
},
设备比例因子：0，
规模：1，
});
});

vardisable = document.getElementById("disable");
禁用.addEventListener("点击", () => {
win.webContents.disableDevice紫色();
});

• index.js：在该文件中添加以下代码段。

const 电子 = require("电子");

// 从 Main 导入 BrowserWindow// 使用 Electron 远程处理
const BrowserWindow = electro.remote.BrowserWindow;
让 win = BrowserWindow.getFocusedWindow();
// 让 win = BrowserWindow.getAllWindows()[0];

var emulate = document.getElementById("emulate");
emulate.addEventListener("点击", () => {
win.webContents.enableDevice紫色({
screenPosition：“移动”，

// 定义为 Galaxy S5 的尺寸
// 铬浏览器
屏幕尺寸： {
宽度：360，
身高：64​​0，
},
视图位置：{
x：0，
y：0，
},
// 定义为 Galaxy S5 的尺寸
// 铬浏览器
视图大小：{
宽度：360，
身高：64​​0，
},
设备比例因子：0，
规模：1，
});
});

var 桌面 = document.getElementById("桌面");
Desktop.addEventListener("点击", () => {
win.webContents.enableDevice紫色({
screenPosition: “桌面”,
​​​​//与BrowserWindow实例相同
// 在主进程中
屏幕尺寸： {
宽度：800，
高度：600，
},
视图位置：{
x：0，
y：0，
},
​​​​//与BrowserWindow实例相同
// 在主进程中
视图大小：{
宽度：800，
高度：600，
},
设备比例因子：0，
规模：1，
});
});
​
vardisable = document.getElementById("disable");
禁用.addEventListener("点击", () => {
Win.webContents.disableDeviceEmulation();
});

代码中所有Instance方法的详细解释如下。

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

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

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

输出：