使用 JavaScript 和 Electron.js 构建桌面 GUI 应用程序

在当今科技时代，桌面应用程序在我们的日常生活中具有极其重要的意义，它们提供了增强的用户体验并充分利用了本地机器的功能。传统上，开发桌面应用程序需要精通特定平台的编程语言和框架，这对希望涉足桌面开发的 Web 开发人员来说是一个挑战。然而，Electron.js 有效地解决了这一难题。

Electron.js 以前称为 Atom Shell，是一个源自 GitHub 的开源框架。它使开发人员能够使用熟悉的 Web 技术（如 HTML、CSS 和 JavaScript）构建跨平台桌面应用程序。通过弥合 Web 开发和桌面应用程序开发之间的差距，Electron.js 为开发人员创造了新的机会，让他们能够创建强大且功能丰富的桌面应用程序。

Electron.js 的架构

要了解 Electron.js 的工作原理，让我们仔细看看它的架构。Electron.js 结合了两个主要组件：Chromium 渲染引擎和 Node.js 运行时。

  • Chromium 渲染引擎 − Electron.js 使用与流行的 Web 浏览器 Google Chrome 相同的渲染引擎——Chromium。这使得 Electron.js 应用程序能够以与 Web 浏览器相同的功能和性能渲染和显示 Web 内容。

  • Node.js 运行时 − Electron.js 集成了 Node.js 运行时，它提供了对底层操作系统和原生 API 的访问。这意味着开发人员可以充分利用 Node.js 的强大功能，并利用其广泛的模块和库生态系统来构建桌面应用程序。

Electron.js 利用多进程架构，其中每个 Electron.js 应用程序都包含两个主要进程：主进程和渲染进程。

  • 主进程 − 主进程作为一个独立的 Node.js 进程运行，负责创建和管理浏览器窗口。它与渲染进程通信，处理系统级事件，并可以访问原生 API。主进程控制应用程序的生命周期，并充当 Electron.js 应用程序的入口点。

  • 渲染进程 − 每个 Electron.js 应用程序可以有多个渲染进程，每个进程对应一个单独的浏览器窗口。渲染进程负责渲染和显示每个浏览器窗口中的 Web 内容。它们在单独的 JavaScript 上下文中运行，提供了一定程度的隔离和安全性。每个渲染进程都可以访问 Electron.js API，从而可以与主进程交互并执行诸如操作 DOM、发出网络请求和处理用户交互等任务。

构建一个简单的 Electron.js 应用程序

现在我们已经对 Electron.js 及其架构有了很好的了解，让我们深入研究如何使用 JavaScript 构建一个简单的 Electron.js 应用程序。我们将创建一个应用程序，该应用程序显示一个带有“Hello, Electron.js”消息的窗口。

要开始，请按照以下步骤操作：

设置开发环境

确保您的机器上已安装 Node.js，因为 Electron.js 是建立在 Node.js 之上的。您可以从官方网站 (https://node.org.cn) 下载并安装最新版本的 Node.js。

创建一个新的 Electron.js 项目

创建一个新的项目文件夹，并使用命令行导航到该文件夹。通过运行以下命令初始化一个新的 Node.js 项目：

npm init -y

此命令将使用默认设置初始化一个新的 Node.js 项目。

安装 Electron.js

通过执行以下命令将 Electron.js 作为开发依赖项安装：

npm install electron --save-dev

此命令将在您的项目中安装 Electron.js 包。

创建主入口点

在您的项目文件夹中创建一个名为 index.js 的新文件，并添加以下代码：

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

function createWindow() {
   // Create the browser window
   const mainWindow = new BrowserWindow({
      width: 800,
      height: 600,
      webPreferences: {
         nodeIntegration: true,
      },
   });

   // Load the index.html file
   mainWindow.loadFile('index.html');
}

// When Electron has finished initialising and is ready to create browser windows
app.whenReady().then(() => {
   createWindow();

   app.on('activate', function () {
      if (BrowserWindow.getAllWindows().length === 0) createWindow();
   });
});

// Quit the application when all windows are closed
app.on('window-all-closed', function () {
   if (process.platform !== 'darwin') app.quit();
});

解释

在此代码中，我们从 Electron.js 包中导入必要的模块，定义 createWindow 函数以创建浏览器窗口，并设置窗口创建和应用程序退出所需的事件处理程序。

创建 HTML 文件

在项目文件夹中创建一个名为 index.html 的新文件，并添加以下代码：

示例

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

此 HTML 文件将显示在 Electron.js 应用程序的窗口中。

运行 Electron.js 应用程序

npx electron.

结论

Electron.js 彻底改变了开发人员使用 Web 技术构建桌面应用程序的方式。它提供了一个强大的框架，该框架结合了 Chromium 渲染引擎和 Node.js 运行时，使开发人员能够使用 HTML、CSS 和 JavaScript 创建跨平台桌面应用程序。凭借其丰富的插件和工具生态系统，Electron.js 使开发人员能够构建功能丰富、性能卓越且视觉效果出色的桌面应用程序。

在本文中，我们探讨了 Electron.js 的基础知识，并学习了如何使用 JavaScript 构建一个简单的 Electron.js 应用程序。我们讨论了 Electron.js 的架构、其主要进程以及主进程和渲染进程的作用。我们还逐步介绍了设置开发环境和构建 Electron.js 应用程序的过程。

更新于： 2023-07-24

2K+ 次浏览

开启您的 职业生涯

通过完成课程获得认证

立即开始
广告