Electron JS

Electron 是一个流行的开源 JavaScript 框架，由 Cheng Zhao 创建，并由 GitHub 开发和维护。Electron 主要用于开发包含各种 Web 技术的桌面 GUI 应用程序。它也可以称为一个运行时框架，允许您使用 HTML、CSS 和 JavaScript 创建桌面应用程序。它还将 Chromium 引擎的渲染功能与 Node.js 运行时环境结合起来。

在本教程中，您将学习 Electron JS 的基础知识，并通过创建示例应用程序的过程进行指导。在本教程结束时，您将能够识别与 Electron JS 及其应用程序相关的不同类型的术语，并通过示例进行演示。您还将能够识别并适应 Electron 的版本。让我们开始吧。

为什么选择 Electron JS？

在继续使用 Electron JS 构建任何东西之前，了解它为什么被使用而不是其他框架非常重要。考虑到您正在使用 Java 路线构建一个后端应用程序，用于持续集成和跨平台功能，您需要在系统中安装所有依赖项。此外，可能会出现一种情况，您需要导入一个包而无需干扰当前的工作环境，这非常困难。如果您使用 Electron JS 开发任何应用程序，这些问题都是小问题。

使用 Electron JS，您可以通过单一代码库解决这些问题。Electron JS 可以根据您需要开发应用程序的所有平台生成各种安装程序。因此，单个代码库可以使用它来安装所有必要的依赖项。Electron JS 的另一个优点是您可以构建一个网站，然后构建一个桌面应用程序。它还可以用于为 Web 构建所有本地桌面应用程序，从而使 Web 开发团队可以轻松地转变为能够构建桌面软件的开发人员。

Electron JS 应用结构

当谈到由 Electron JS 驱动的应用程序的设计和开发结构时，正如下面讨论的，会考虑三个主要组件。

Chromium：Chromium 是一个 Electron JS 结构组件，主要负责创建和可视化网页。Web 内容使用渲染器进程显示，Chromium 环境的存在让您可以控制所有内容和开发工具，这与 Chrome 浏览器类似。

Node.js：Node.js 在涉及 Electron 的应用程序结构中的作用是提供系统访问功能。通过 Node.js，Electron JS 可以运行其主要进程，从而轻松提供访问。Node.js 还通过以文件系统的形式提供数据来使其具有交互性，从而让您控制操作系统。

自定义 API：Electron JS 应用程序中使用自定义 API 的目的是使开发人员能够创建相似的桌面体验，从而使用户体验不会受到干扰。自定义 API 提供本地桌面应用程序功能，因此一个用户不会轻易提示受到库的影响。自定义 API 的另一个作用是通过允许开发人员创建和显示上下文菜单、显示它并将其雕刻成桌面通知来使用户能够使用带有高效键盘快捷键的功能。

渲染进程和主进程

首先，要了解 Electron JS 应用程序的运行机制，您必须知道主进程和渲染器这两个进程。

主进程

要运行任何 Electron JS 应用程序，主进程被认为是入口点。它只是一个简单的 Node.js 环境，其中考虑了所有本地交互和功能。总而言之，主进程负责创建网页。它通过在 Electron 的 BrowserWindow 对象中创建新实例来做到这一点。此操作会创建一个新的网页，该网页在渲染器进程的影响下运行。主进程可用于创建多个网页，每个网页都可以运行其渲染器进程。

安装

要使用 Electron JS，您需要 Node.js。建议安装最新版本的 Node.js，因为旧版本可能存在兼容性问题。因此，重要的是检查 Node.js 版本，您可以通过使用以下命令来完成此操作。

此命令应相应地打印 Node.js 和 npm 的版本。

注意：Electron JS 将 Node.js 版本嵌入到二进制文件中。因此，建议下载与 Node.js 相同的版本。

构建 Electron JS 应用程序

假设您已经轻松理解了以上概念，现在是时候开始使用 Electron JS 构建我们的应用程序了。我们将创建一个简单的应用程序来演示事物是如何构建的。

要开始，首先，从首选目录运行以下命令以创建项目文件夹，然后稍后切换到新文件夹。

这里一个符合逻辑的事情是理解 Electron JS 本质上是一个运行网页的 Node.js 应用程序。因此，您正在学习构建的应用程序需要通过运行以下命令来使用 package.json 初始化。

接下来，尝试使用以下示例代码片段创建应用程序的前端页面。

上面的 HTML 代码将简单地创建一个带有“My Electron App”标题的网页。它保存在 h1 标签中，正文中的文本是“Welcome to My Electron App”。现在您已经对 Node.js 应用程序有了一个基本的了解。

下一步是使用 Electron JS 将构建的应用程序转换为桌面应用程序。这可以通过安装 Electron JS 库来完成。切换到命令提示符，您需要切换到项目的根目录并运行以下命令

一旦上述命令完全执行，安装就标记为完成。然后您需要创建一个文件 main.js。正如您之前发现的，这是一个入口点，它将构成应用程序的入口。然后，添加以下示例脚本。

在上面的代码片段中，Electron JS 应用程序被配置为使用 BrowserWindow，这是一个用于创建和加载网页的模块。此模块直接从 Electron JS 包导入，并且路径无缝导入以确保正确的项目工作目录。完成这些导入后，您需要创建 loadMainWindow() 函数，如以下代码片段所示。

此函数使用 BrowserWindow 创建一个 1200 px x 800 px 的新窗口。稍后，应用程序将运行并从根目录加载 index.html 文件。接下来，您需要将 loadMainWindow() 函数添加到现有代码下方。当调用此函数时，它将调用应用程序启动。

下一个任务是具体说明应用程序应该在哪种操作系统上保持活动状态，即使所有窗口都已关闭。此外，如果发生任何错误，您可能需要修复它。要修复这些操作系统问题，您只需添加以下代码片段。

上面的代码片段侦听应用程序中发生的事件。当事件发生时，代码会检查当前是否有任何与应用程序相关的窗口打开。如果没有，代码将通过调用 loadMainWindow() 函数加载主屏幕。

应用程序配置

完成以上所有步骤后，您需要对 package.json 文件进行一些特定更改。这样做是为了确保 Electron JS 正确工作。

接下来，要继续进行进一步配置，您需要打开 package.json 文件并将 main 键的值更改为 main.js 文件。代码如下。

接下来，您需要将一个 start 脚本添加到现有脚本中，如下所示

现在，保存文件并关闭它。尝试使用以下命令运行 Electron JS 应用程序。

此命令将加载 Electron 应用程序，它看起来会像这样。

您可以通过将 CSS 组件添加到 index.html 文件中来进一步添加自定义组件，以创建更丰富的桌面友好型应用程序。

总结

Electron JS 是桌面应用程序开发领域的一个革命性的变革者。它为 Web 开发人员和应用程序程序员提供的巨大力量令人着迷。使用 Electron JS 开发应用程序的便捷性源于其组件的重要功能，消除了安装重型依赖项并将其配置到您的应用程序中的需要。在本教程中，您了解了 Electron JS 是什么，它的用例是什么，以及您还了解了 Electron JS 项目背后的结构和内部工作机制。在后面的部分，您构建了一个原生桌面应用程序，可以通过确保所有函数和依赖项都完好无损来进一步修改。