我发现有用的 4 个Electron.js特性

我一直在寻找可以帮助我开发跨平台桌面应用程序的工具或框架。我想到的另一件事是这个工具应该提供与硬件设备交互的方法。在那里我找到了 Electron，它满足了我的两个要求。

在这篇文章中，我将回顾一些我在使用 Electron 时发现有用的特性。我希望您也会发现它们对您的发展有所帮助。我们最喜欢的代码编辑器 Visual studio code 也有 electron 支持！

使用 Electron，我们可以创建在 Windows、Mac 和 Linux 上运行的跨平台应用程序。它将有自己的 Chromium 浏览器来呈现 UI。我假设您精通 JavaScript、HTML 和 CSS，并且知道如何创建基本的electron.js应用程序。所以我会直接跳到功能。

1. 将网页加载到电子浏览器窗口中。

我们可以利用​​createWindow()​​将网页加载到新​​BrowserWindow ​​实例中的功能。我们可以使用默认的宽度和高度来初始化窗口。当应用程序准备就绪时，我们可以调用​​createWindow() ​​我们可以使用的函数​​app.whenReady().​​一旦这个承诺得到解决，它将调用创建窗口函数。

​​app.whenReady().then(() => { createWindow()})​​

我们可以使用 将浏览器窗口设置为全屏​​setFullScreen​​。

const win = new BrowserWindow({ /* props */})
win.setFullScreen(true);

2. IPC——进程间通信

IPC 在Electron.js应用程序开发中扮演着重要的角色，因为它提供了主进程和渲染进程之间的网关。

我们可能会遇到这样的情况，即我们必须根据来自电子主进程文件的响应在网页中加载数据，或者我们需要根据用户与您的应用程序的交互调用Electron.js主进程内的任何子进程。这些情况可以通过使用 IPC 通道来处理。

与渲染器的主进程通信（例如从您的 .js 或 .svelte 文件）

我们可以​​ipcRenderer.send ​​用于发送目标消息​​ipcMain.on​​

ipcRenderer.send('function_name', arg) //来自渲染进程
// 在主进程中
ipcMain.on('function_name', (event, arg) => { 
console.log(arg) 
})

您还可以通过使用在渲染器进程中调用函数​​webContents.send​​

ipcRenderer.send('function_name', arg)   //来自渲染进程

// inside main process
ipcMain.on('function_name', (event, arg) => {
console.log(arg)
})

3.从electron主窗口创建子窗口

人们可能会遇到这样一种情况，我们必须集成具有自己的 UI 的第三方库。我们可以从主窗口创建一个新窗口并将 UI 加载到新窗口（子窗口）中。
例如，如果我们正在集成支付 API 库，一旦用户验证完成，我们就可以在新窗口中打开包含用户名和密码的支付表单。这将为用户提供更好的 UI 体验。支付流程完成后，新窗口（子窗口）将关闭并返回主窗口。

const childWin = {}; 
childWin[WINDOW_ID] = new BrowserWindow({
//属性
});

我们可以使用 Electron 提供的​​ipcMain ​​和来进行渲染器文件和 main.js 文件之间的通信。​​ipcRenderer​​

4. 打包Electron.js应用

我更喜欢使用 Electron Builder 来打包电子应用程序。Electron builder 带有许多其他功能，可以简化您的工作。

我试图拥有一个包含安装文件的文件夹，以便在安装电子应用程序时，该文件夹也将被执行，并且可执行文件将安装在客户端系统上。在构建完成后，我面临着保留文件和访问它们的问题。我的想法是获取客户端计算机上的文件夹路径并使用 cmd 执行文件。我通过使用该​​extraResources ​​属性解决了这个问题。感谢 Electron Builder。

通过使用​​extraResources, ​​，我可以保留一个包含可执行文件的文件夹，并使用 cmd 获取执行它们的路径。请按照以下步骤进行操作。

1. 在 package.json 旁边的项目目录中创建一个文件夹，并将所有必需的文件保存在该文件夹中。
2. 在 package.json 中添加以下内容。
   ​​“build”: { “ extraResources ” : [ “ ./Folder_name/** ” ] }​​
3. 使用获取文件夹的路径​​__dirname + '/../Folder_name'​​
4. 使用此路径使用可以使用node.js子进程运行的 cmd 来执行文件。

这就是本文的内容。如果您觉得这篇文章有帮助，请不要忘记查看我的其他文章！