Electron.js 教程

欢迎来到 Electron.js 教程！在本教程中，我们将学习如何使用 Electron.js 构建桌面应用程序。Electron.js 是由 GitHub 开发的一个开源框架，它允许你使用 HTML、CSS 和 JavaScript 等 Web 技术构建跨平台的桌面应用程序。

1. Electron.js 简介

Electron.js 是一个允许开发者使用 Web 技术构建桌面应用程序的框架。它结合了 Chromium 渲染引擎和 Node.js 运行时，使开发者能够利用 Web 技术的强大功能创建跨平台的桌面应用程序。

Electron.js 的主要特点：

跨平台：Electron.js 应用程序可以为 Windows、macOS 和 Linux 操作系统构建。
原生功能：Electron.js 允许您访问原生操作系统 API 并使用原生 UI 元素构建应用程序。
简单的开发工作流程：Electron.js通过提供丰富的API和工具简化了开发过程。
大型社区和生态系统：Electron.js 拥有蓬勃发展的社区和广泛的可用库和插件。

2. 设置开发环境

在开始构建 Electron.js 应用程序之前，我们需要设置开发环境。请按照以下步骤开始：

安装 Node.js：Electron.js 需要 Node.js，因此请确保你的系统上已安装 Node.js。你可以从官方网站下载 Node.js：https://nodejs.org
安装代码编辑器：您可以使用任何您选择的代码编辑器。一些流行的选项包括 Visual Studio Code、Atom 和 Sublime Text。
为你的 Electron.js 项目创建一个新目录：打开终端或命令提示符，然后导航到所需位置。使用以下命令创建一个新目录：

   mkdir electron-app

初始化一个新的 Node.js 项目：在项目目录中，运行以下命令来初始化一个新的 Node.js 项目：

   cd electron-app
   npm init -y

此命令创建一个package.json文件来跟踪项目的依赖项和设置。

安装 Electron.js：运行以下命令将 Electron.js 安装为项目中的开发依赖项：

   npm install electron --save-dev

Electron.js 将本地安装在您的项目目录中。

恭喜！您已经设置好了构建 Electron.js 应用程序的开发环境。

3.创建一个基本的Electron应用程序

在本节中，我们将创建一个基本的 Electron 应用程序来显示一个简单的窗口。

main.js在项目目录的根目录中创建一个名为的新文件。
打开main.js

在您的代码编辑器中并添加以下代码：

   // Import the Electron module
   const { app, BrowserWindow } = require('electron');

   // Function to create the main window
   function createMainWindow() {
     // Create a new browser window
     const mainWindow = new BrowserWindow();

     // Load an HTML file into the window
     mainWindow.loadFile('index.html');
   }

   // Event handler for when Electron has finished initialization
   app.whenReady().then(createMainWindow);

这段代码从 Electron 导入了必要的模块，并定义了一个创建主窗口的函数。该createMainWindow函数会创建一个新的浏览器窗口，并加载一个 HTML 文件index.html。这app.whenReady().then(createMainWindow)行代码确保createMainWindowElectron 初始化完成后会调用该函数。

index.html在项目目录的根目录中创建一个名为的新文件。
在代码编辑器中打开index.html并添加以下代码：

   <!DOCTYPE html>
   <html>
   <head>
     <meta charset="UTF-8">
     <title>Electron App</title>
   </head>
   <body>
     <h1>Hello, Electron!</h1>
   </body>
   </html>

这是一个包含标题元素的基本 HTML 文件<h1>。

打开终端或命令提示符并导航到您的项目目录。
通过运行以下命令启动您的 Electron 应用程序：

   npx electron .

main.js此命令使用该文件作为入口点运行 Electron 。

您应该会看到一个新的 Electron 窗口，其中显示“Hello, Electron!”消息。

恭喜！您已经创建了第一个 Electron 应用程序。

4. 使用主进程和渲染进程

Electron 应用由两种类型的进程组成：主进程和渲染进程。主进程运行在 Node.js 环境中，负责管理应用的生命周期并与操作系统交互。渲染进程运行在单独的类似浏览器的窗口中，负责处理用户界面。

让我们探索如何在 Electron.js 中使用主进程和渲染进程。

4.1. 主进程和渲染进程之间的通信

Electron 提供了一种称为进程间通信（IPC）的机制，以实现主进程和渲染进程之间的通信。

以下是如何从主进程向渲染进程发送消息的示例：

更新createMainWindow函数main.js如下：

   function createMainWindow() {
     const mainWindow = new BrowserWindow();
     mainWindow.loadFile('index.html');

     // Send a message to the renderer process
     mainWindow.webContents.send('message', 'Hello from main process!');
   }

此代码使用该方法将带有频道名称和有效负载的webContents.send()消息发送到渲染器进程。'message''Hello from main process!'

更新index.html如下：

   <!DOCTYPE html>
   <html>
   <head>
     <meta charset="UTF-8">
     <title>Electron App</title>
     <script>
       // Receive messages from the main process
       const { ipcRenderer } = require('electron');
       ipcRenderer.on('message', (event, message) => {
         console.log(message); // Output the message to the console
       });
     </script>
   </head>
   <body>
     <h1>Hello, Electron!</h1>
   </body>
   </html>

此代码使用该ipcRenderer模块从主进程的通道接收消息'message'。接收到的消息将记录到控制台。

通过停止并重新运行npx electron .命令来重新启动 Electron 应用程序。
打开开发者控制台（按Ctrl+Shift+I或Cmd+Option+I）。
'Hello from main process!'您应该会看到记录到控制台的消息。

此示例演示了如何使用 IPC 从主进程向渲染进程发送消息。您也可以使用类似的方法从渲染进程向主进程发送消息。

4.2. 在主进程中运行代码

在某些情况下，您可能需要在主进程中运行代码。Electron 提供了几种方法来实现此目的。

以下是在主进程中运行代码的示例：

更新main.js如下：

   function createMainWindow() {
     const mainWindow = new BrowserWindow();
     mainWindow.loadFile('index.html');

     // Execute code in the main process
     mainWindow.webContents.executeJavaScript(`
       console.log('Running code in the main process!');
     `);
   }

此代码使用该webContents.executeJavaScript()方法在主进程中运行 JavaScript 代码。在本例中，它会将一条消息记录到控制台。

重新启动你的 Electron 应用程序。
打开开发者控制台。
'Running code in the main process!'您应该会看到记录到控制台的消息。

此示例演示如何使用在主进程中执行 JavaScript 代码webContents.executeJavaScript()。

5. 构建原生 UI 元素

Electron.js 允许您使用原生 UI 元素构建桌面应用程序。这意味着您可以创建与用户操作系统外观和风格一致的窗口、菜单、对话框和其他 UI 组件。

让我们探索如何在 Electron.js 中构建原生 UI 元素。

5.1. 创建菜单栏

桌面应用程序中常见的 UI 元素是菜单栏。Electron 提供了一个Menu模块来创建和自定义菜单栏。

以下是创建菜单栏的示例：

更新main.js如下：

   const { app, BrowserWindow, Menu } = require('electron');

   // Create a menu template
   const menuTemplate = [
     {
       label: 'File',
       submenu: [
         {
           label: 'Open',
           click() {
             console.log('Open clicked!');
           }
         },
         {
           label: 'Save',
           click() {
             console.log('Save clicked!');
           }
         },
         {
           label: 'Quit',
           click() {
             app.quit();
           }
         }
       ]
     },
     {
       label: 'Edit',
       submenu: [
         {
           label: 'Cut',
           role: 'cut'
         },
         {
           label: 'Copy',
           role: 'copy'
         },
         {
           label: 'Paste',
           role: 'paste'
         }
       ]
     }
   ];

   // Function to create the main window
   function createMainWindow() {
     const mainWindow = new BrowserWindow();
     mainWindow.loadFile('index.html');

     // Create the menu from the template
     const menu = Menu.buildFromTemplate(menuTemplate);
     Menu.setApplicationMenu(menu);
   }

   app.whenReady().then(createMainWindow);

此代码定义了一个menuTemplate菜单，用于指定菜单的结构和行为。该菜单有两个顶级菜单项：“文件”和“编辑”，每个菜单项都有各自的子菜单。“文件”子菜单包含自定义的菜单项

点击处理程序，“编辑”子菜单使用内置角色。

该createMainWindow函数像以前一样创建主窗口，但现在还使用创建菜单Menu.buildFromTemplate()并使用将其设置为应用程序菜单Menu.setApplicationMenu()。

重新启动你的 Electron 应用程序。
点击“文件”菜单，浏览其子菜单和项目。点击“打开”或“保存”时，您应该会看到相应的消息记录到控制台。
点击“编辑”菜单，然后尝试“剪切”、“复制”和“粘贴”操作。它们应该会按预期执行相应的操作。

Menu此示例演示如何使用 Electron 的模块创建具有自定义项和内置角色的菜单栏。

5.2. 显示对话框

对话框通常用于与用户交互并显示消息或提示。Electron 提供了一个dialog模块来创建和自定义对话框。

以下是显示对话框的示例：

更新main.js如下：

   const { app, BrowserWindow, dialog } = require('electron');

   // Function to create the main window
   function createMainWindow() {
     const mainWindow = new BrowserWindow();
     mainWindow.loadFile('index.html');

     // Show a dialog box
     dialog.showMessageBox(mainWindow, {
       type: 'info',
       title: 'Dialog Box',
       message: 'This is an example dialog box.',
       buttons: ['OK']
     });
   }

   app.whenReady().then(createMainWindow);

此代码使用该dialog.showMessageBox()方法显示一个信息对话框。该对话框包含标题、消息和“确定”按钮。

重新启动你的 Electron 应用程序。
应用程序启动时应出现对话框，显示指定的标题和消息。

此示例演示如何使用 Electron 的模块显示对话框dialog。

6.进程间通信（IPC）

如前所述，Electron 提供了 IPC 来促进主进程和渲染进程之间的通信。IPC 允许你在应用程序的不同部分之间发送消息、传输数据和触发操作。

让我们探索一些在 Electron.js 中使用 IPC 的示例。

6.1. 从渲染器向主进程发送消息

以下是从渲染进程向主进程发送消息的示例：

更新index.html如下：

   <!DOCTYPE html>
   <html>
   <head>
     <meta charset="UTF-8">
     <title>Electron App</title>
     <script>
       const { ipcRenderer } = require('electron');

       // Send a message to the main process
       ipcRenderer.send('message', 'Hello from renderer process!');
     </script>
   </head>
   <body>
     <h1>Hello, Electron!</h1>
   </body>
   </html>

此代码使用该方法将带有频道名称和有效负载的ipcRenderer.send()消息发送到主进程。'message''Hello from renderer process!'

更新main.js如下：

   const { app, BrowserWindow, ipcMain } = require('electron');

   function createMainWindow() {
     const mainWindow = new BrowserWindow();
     mainWindow.loadFile('index.html');
   }

   app.whenReady().then(() => {
     createMainWindow();

     // Handle messages from renderer processes
     ipcMain.on('message', (event, message) => {
       console.log(message); // Output the message to the console


 });
   });

此代码向ipcMain模块添加了一个事件监听器，用于处理'message'来自渲染器进程的通道消息。接收到的消息将记录到控制台。

重新启动你的 Electron 应用程序。
打开开发者控制台。
'Hello from renderer process!'您应该会看到记录到控制台的消息。

此示例演示如何使用 IPC 从渲染进程向主进程发送消息。

6.2. 主进程和渲染进程之间共享数据

您还可以使用 IPC 在主进程和渲染进程之间共享数据。以下是示例：

更新index.html如下：

   <!DOCTYPE html>
   <html>
   <head>
     <meta charset="UTF-8">
     <title>Electron App</title>
     <script>
       const { ipcRenderer } = require('electron');

       // Send data to the main process
       ipcRenderer.send('data', { name: 'John', age: 30 });
     </script>
   </head>
   <body>
     <h1>Hello, Electron!</h1>
   </body>
   </html>

此代码使用通道将对象发送{ name: 'John', age: 30 }到主进程'data'。

更新main.js如下：

   const { app, BrowserWindow, ipcMain } = require('electron');

   function createMainWindow() {
     const mainWindow = new BrowserWindow();
     mainWindow.loadFile('index.html');
   }

   app.whenReady().then(() => {
     createMainWindow();

     // Handle data from renderer processes
     ipcMain.on('data', (event, data) => {
       console.log(data.name); // Output the name to the console
       console.log(data.age); // Output the age to the console
     });
   });

此代码向ipcMain模块添加了一个事件监听器，用于处理'data'来自渲染器进程的通道数据。接收到的数据将记录到控制台。

重新启动你的 Electron 应用程序。
打开开发者控制台。
您应该会看到记录到控制台的姓名'John'和年龄。30

此示例演示了如何使用 IPC 在主进程和渲染进程之间共享数据。

7. 打包并分发你的 Electron 应用

完成 Electron 应用程序的开发后，您可以将其打包为可执行文件并分发给用户。Electron 提供了一些工具来帮助您打包和分发应用程序。

下面是使用该包打包和分发 Electron 应用程序的示例electron-builder：

electron-builder通过在项目目录中运行以下命令将该包安装为开发依赖项：

   npm install electron-builder --save-dev

更新package.json以包含打包所需的脚本：

   {
     "name": "electron-app",
     "version": "1.0.0",
     "main": "main.js",
     "scripts": {
       "start": "electron .",
       "package": "electron-builder"
     },
     "devDependencies": {
       "electron": "^13.1.7",
       "electron-builder": "^22.13.2"
     }
   }

此代码添加了"package"运行electron-builder以打包应用程序的脚本。

打开终端或命令提示符并运行以下命令来打包您的 Electron 应用程序：

   npm run package

此命令将构建您的

针对当前平台的应用程序并在dist目录中生成打包文件。

您可以通过共享目录内容的方式将打包文件分发给用户dist。具体的分发方式取决于您的目标平台（例如，创建安装程序、创建应用程序包或提供可下载的存档）。

注意：打包过程可能因您的具体需求和目标平台而异。请务必参考 Electron 应用程序的打包和分发官方文档和指南。

恭喜！您已经学会了如何使用打包和分发您的 Electron 应用程序electron-builder。

结论

在本教程中，您学习了使用 Electron.js 构建桌面应用程序的基础知识。您学习了如何设置新的 Electron 项目、创建主进程和渲染进程、构建原生 UI 元素以及如何使用 IPC 实现进程间通信。您还学习了如何打包和分发您的 Electron 应用程序。

Electron.js 提供了一个强大的框架，用于使用 Web 技术开发跨平台桌面应用程序。通过本教程获得的知识，您可以继续探索 Electron 的丰富功能，并构建更高级的应用程序。

记得参考 Electron.js 官方文档和资源，了解更多深入信息和高级主题。祝您编程愉快！

鏂囩珷鏉ユ簮锛�https://dev.to/kiraaziz/electronjs-tutorial-1cb3

菜单

分享

Electron.js 教程

Electron.js 教程

目录

1. Electron.js 简介

2. 设置开发环境

3.创建一个基本的Electron应用程序

4. 使用主进程和渲染进程

4.1. 主进程和渲染进程之间的通信

4.2. 在主进程中运行代码

5. 构建原生 UI 元素

5.1. 创建菜单栏

5.2. 显示对话框

6.进程间通信（IPC）

6.1. 从渲染器向主进程发送消息

6.2. 主进程和渲染进程之间共享数据

7. 打包并分发你的 Electron 应用

结论

系统设计面试中的 19 种微服务模式

使用 React 和 AWS Amplify 实现无服务器架构第三部分：跟踪应用使用情况

模型-视图-控制器（MVC）模式到底是什么？DEV 全球项目展示挑战赛，由 Mux 主办：快来展示你的项目吧！

我在两年内从 PHP 开发人员晋升为高级 C#/.NET 开发人员。

了解 Docker：第 12 部分 – 传递构建参数

Yarn 和第三方 NPM 客户端的黑暗未来 DEV 的全球展示与讲述挑战赛，由 Mux 呈现：展示你的项目！

CSS DEV 的全球展示挑战赛“响应式字体”由 Mux 呈现：展示你的项目！

我是如何以学生开发者的身份免费获得 Tabnine Pro 的，你也可以！

五大顶级JS框架

从 Rector PHP 开始：利用自动化改进您的 PHP 代码