利用Electron技术构建桌面应用

在本教程中，我们将介绍 Electron 的基础知识，并创建一个示例应用程序来演示其中的一些特性。

每天?分享?最新?软件?开发?，Devops，敏捷?，测试?以及?项目?管理?最新?，最热门?的?文章?，每天?花?3分钟?学习?何乐而不为?，希望?大家?点赞?，评论，加?关注?，你的?支持?是我?最大?的?动力?。下方抖音有我介绍自动化测试，以及google cloud 相关视频课程，欢迎观看。

如果你像我一样，你是 JavaScript 及其生态系统的忠实粉丝，并且你一直在利用它来创建优秀的在线应用程序，使用像 React 这样的框架或者使用 NodeJS 的快速 web 服务器。您现在想要创建一个桌面应用程序，但是不想学习一种新的编程语言，或者您想要尽可能多地重用以前的 Web 项目。当Electron来拯救世界的时候。

您可以使用 HTML、 CSS 和 JavaScript 来使用 Electron 创建桌面应用程序。互联网上有很多关于 Electron 的抱怨: 糟糕的性能和频繁的低质量应用程序; 然而，不要责怪框架; Electron 是健壮的，可能是性能良好的。如今许多流行的应用程序都是在它的基础上构建的。

但是为什么这么多人如此激烈地反对它呢？这个问题从应用程序和人们如何与Electron互动开始。对于许多人来说，将 Web 应用程序移动到 Electron 需要将旧代码粘贴到 Electron 容器中。这样做不好吗？也许不是，但你没有充分利用Electron的能量，你只是从一个浏览器标签切换到另一个独立的应用程序。

我们能做得更好吗？在本教程中，我们将介绍 Electron 的基础知识，并创建一个示例应用程序来演示其中的一些特性。

构建Electron应用程序的规范

Js 是一个开源框架，用于使用 HTML、 CSS 和 JavaScript 等 Web 技术创建应用程序。因此，开发桌面应用程序不再局限于 C + + 、 C # 或 Java 开发人员，因为网络开发人员现在可以利用他们的能力来提供行业标准的桌面软件。

Web 开发人员可以用 Electron.js 包装现有的 Web 应用程序，从而创建桌面应用程序并为 Windows、 macOS 和 Linux 操作系统生成安装程序。他们混合使用 Chromium (Google Chrome 浏览器的开源版本)和 Node.js JavaScript 引擎。

Github 维护 Electron.js，使其成为一个由坚实的工程师团队支持的可靠项目。

为什么要使用 Electron.js？

在 Electron.js 出现之前，如果一个应用程序想要在两个或更多不同的桌面操作系统(例如 Windows 和 Mac)上运行，它必须针对每个平台单独开发。它使用与平台兼容的语言，如 Windows 的 C # 或 VisualBasic 和 Mac 的 Objective-C。

如果开发人员选择用 Java 编写跨平台桌面软件，那么用户需要在两个平台上安装 Java 运行时才能使用该应用程序。

另一方面，Electron.js 可以从一个代码库为所有平台生成安装程序，从而消除了安装的需要。

因此，单个开发团队可以为特定平台开发应用程序。另一个显著的好处是，如果你可以用 Electron.js 构建一个网站，你就可以构建一个桌面程序; 因此，现有的网络开发者/网络开发团队可以很快地过渡到桌面软件开发者。

构建 Electron.js 应用程序: 先决条件

要开始使用 Electron.js 构建应用程序，您需要以下内容:

Electron.js 应用程序的结构

Electron.js 由三个主要组件组成:

1.Chromium 是 Electron.js 堆栈的一部分，用于生成和显示网页。Web 内容在 Electron.js 的 Renderer 进程中呈现(稍后将详细介绍)。多亏了 Chromium 环境，你可以访问所有的浏览器 API 和开发工具，就像普通的 Google Chrome 浏览器一样。

2.Js: 正是 Electron.js 组件为您提供了对系统特性的访问。Js 在其 Main 进程中操作 Node.js，允许您访问 Node.js 必须提供的所有内容，包括文件系统交互、操作系统交互等。

3.自定义 API: 它允许你做一些活动，比如构建和显示上下文菜单，显示桌面警报，使用键盘快捷键，以及更多使开发人员能够构建标准桌面体验和与本地功能无缝交互。

渲染器和主要过程

Main 和 Renderer 进程是运行的 Electron.js 项目维护的两种类型的进程。

主要工序

Js 环境是 Electron.js 应用程序启动的地方，在这里发生所有本机功能交互。

视窗管理

主流程的主要目标是使用 Browser Window 模块创建和管理应用程序窗口。

BrowserWindow 类生成一个应用程序窗口，该窗口为每个类实例在单独的呈现程序进程中加载网页。使用窗口的 web 内容对象，您可以从主进程与此 web 内容进行交互。

应用程序的生命周期

作为主流程的一部分，Electron的应用程序模块也控制着应用程序的生命周期。

原生 API

主流程增加了自定义 API 与用户操作系统的接口，扩展了 Electron 的特性，而不仅仅是一个针对 web 资源的 Chromium 包装器。Electron 公开了几个管理本地桌面特性的模块，包括菜单、对话框和托盘图标。

主要流程是负责网页的制作。它通过建立一个新的 Electron.js BrowserWindow 对象来实现这一点，并使用其 Renderer 进程创建一个新的网页。Main 进程可以创建多个网页，每个网页都在其 Renderer 进程中运行。

通常，Electron.js 应用程序以一个默认的网页作为启动界面。如果程序需要，可以添加更多显示。

渲染过程

它负责其网页，是完全独立于其他渲染进程和主进程。因此，如果一个渲染器进程死亡，它不会影响其他渲染器进程。通过删除其 BrowserWindow 实例，Renderer 进程同样可以从 Main 进程中终止。

在每个打开的 Browser Window Electron 的渲染过程中，程序启动一个单独的渲染过程(以及每个 Web 嵌入)。顾名思义，渲染器负责渲染在线内容，它的行为应该符合网络标准(至少就 Chromium 而言)。

因此，在一个单一的浏览器窗口中，所有的用户界面和应用程序功能都应该使用你在网络上使用的相同的工具和范例来创建。

虽然这篇文章不能涵盖所有的网络需求，但是最起码要知道:

Renderer 进程仅访问浏览器 API，如开箱即用的窗口和文档对象。Renderer 进程只不过是一个正在运行的 Chromium 浏览器实例。但是，可以将其设置为使用 Node.js API，如 process 和 map。主进程和呈现程序进程之间存在关系

渲染器与主要进程的通信

在 Electron.js 应用程序中，您经常希望访问本机功能以响应事件，例如用户点击一个按钮。本机功能不能直接从网页访问，因为 Renderer 和 Main 进程是隔离的。

通过提供一个允许渲染器和 Main 进程相互通信的 IPC (行程间通讯)通道，Electron.js 使这一切变得可行。

人们可以从一个进程发出事件，并分别使用 Main 和 Renderer 进程的 ipcMain 和 ipcRenderer 模块监听其他进程。它还可以将数据从一个方法传递到下一个方法。

总结

Electron.js 是应用程序开发领域的一场革命，因为它使网络开发人员能够利用他们现有的技能进入本地应用程序开发领域。

如果您将来需要创建一个跨平台的桌面应用程序，我建议您使用 Electron，特别是如果您使用的是 JavaScript 并且有一些代码可以重用。

请记住，Electron可以是一个奇妙的工具，如果使用正确。请记住，虽然它看起来像是 web，但实际上不是，你需要做一些特别的考虑来使它工作并雇佣最好的 Electron.js 开发公司。

来源：科技狠活与软件技术