开发 Electron 应用你需要知道的那些事本文已参与掘金创作者训练营第三期「话题写作」赛道，详情查看：掘力计划｜创作

本文已参与掘金创作者训练营第三期「话题写作」赛道，详情查看：掘力计划｜创作者训练营第三期正在进行，「写」出个人影响力。

Electron是什么

Electron 是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的库。这些应用程序可以打包运行在 Mac、Windows 和 Linux 计算机上，也可以放置在 Mac 和 Windows 应用程序商店中。

为什么 Electron 受欢迎

通常，每个桌面操作系统的应用程序都是用各自的原生语言编写的。那意味着你可能需要维护三个不同的技术团队去编写 Mac、Window、Linux 各自相应的应用版本。 Electron 使您能通过网络语言编写一次应用程序，并达到跨平台的效果，节约了开发成本，提高开发效率。

怎么做到的

Electron 将 Chromium 和 Node.js 与一组用于原生操作系统功能的自定义 API 相结合，例如打开文件对话框、通知、图标等。

开发体验

使用 Electron 进行开发就像在构建可以无缝使用 Node 的网页。或者像是构建一个 Node 应用程序，但又可以使用 HTML 和 CSS 构建界面。而且您只需要为一种浏览器设计，即最新的 Chrome。

先决条件

由于 Electron 的两个构成是网站和 JavaScript，因此在开始之前您需要在这两个方面都有经验。查看一些关于 HTML、CSS 和 JS 的教程并在您的计算机上安装 Node。

两个进程

Electron 有两种类型的进程：Main 和 Renderer。有适用于单个或两个进程的模块。主进程更多地处于幕后，而渲染器进程则是应用程序中的每个窗口。

主进程

主进程，通常是一个名为 main.js 的文件，是每个 Electron 应用程序的入口点。它控制着应用程序的生命周期，从打开到关闭。它还调用原生元素并在应用程序中创建每个新的渲染器进程。它内置了完整的 Node API。

渲染进程

渲染器进程是应用程序中的一个浏览器窗口。与主进程不同，渲染进程可以有多个，并且每个进程都是独立的。它们也可以隐藏。通常其中一个名为 index.html。它们就像典型的 HTML 文件，但在 Electron 中，您也可以使用整个 Node API（一般通过 preload.js 实现），这与 Web 浏览器有所不同。

像这样想

在 Chrome（或其他 Web 浏览器）中，每个选项卡及其网页就像 Electron 中的单个渲染器进程。如果您关闭所有选项卡，Chrome 仍然存在，这就像您的主进程，您可以打开一个新窗口或退出该应用程序。

保持通讯

主进程和渲染进程需要能够通信，因为它们都负责不同的任务。为此，有 IPC，即进程间通信。使用它在主进程和渲染进程之间传递消息。

组合在一起

Electron 应用程序类似于 Node 应用程序并使用 package.json 文件。在那里你定义哪个文件是你的主进程，因此 Electron 应该从那里开始你的应用程序。然后该主进程可以创建渲染器进程，您将使用 IPC 在两者之间传递消息。

快速开始

Electron Quick Start 是一个基本的 Electron 应用程序，其中包含您在此处了解的 package.json、main.js 和 index.html — 一个入门的好地方！此外，还可以使用项目模板。资源链接如下:

打包

建好应用程序后，您可以使用适用于 Mac、Windows 或 Linux 的命令行工具 electron-packager 对其进行打包。将此脚本添加到您的 package.json。查看以下资源以在 Mac 和 Windows 应用商店中上架您的应用。

开发 Electron 应用你需要知道的那些事