使用Electron构建桌面应用的介绍
在这个Electron.js教程中，我们将了解Electron的基本原理，并创建一个示例应用程序来演示一些功能
如果你和我一样，你是JavaScript及其生态系统的忠实粉丝，你一直在利用它，使用React等框架或NodeJS的快速网络服务器创建优秀的在线应用程序。现在你想创建一个桌面应用程序，但又不想学习新的编程语言，或者你想尽可能多地重复使用你以前的网络项目。这时，Electron就会发挥作用，拯救你的生活。
你可以使用HTML、CSS和JavaScript 来使用Electron创建桌面应用程序。互联网上有许多对Electron的抱怨：性能差，经常出现低质量的应用程序；但是，不要责怪框架；Electron很健壮，可能有很好的性能。今天许多流行的应用程序都是建立在它之上的。
但是，为什么这么多人对它说得那么激烈呢？这个问题要从应用程序和人们与Electron的互动方式说起。对于许多人来说，将网络应用程序转移到Electron需要将你的旧代码粘贴到Electron容器中。这样做是个坏主意吗？也许不是，但你并没有充分利用Electron的功能，你只是把一个独立的应用从一个浏览器标签切换到另一个标签。
我们可以做得更好呢？在这个Electron.js教程中，我们将了解Electron的基本原理，并创建一个示例应用程序来演示一些功能。
构建一个Electron应用程序的规格
Electron.js是一个开源的框架，用于使用HTML、CSS和JavaScript等网络技术创建应用程序。因此，开发桌面应用程序不再局限于C++、C#或Java开发人员，因为网络开发人员现在可以利用他们的能力来提供行业标准的桌面软件。
网络开发者可以用Electron.js包装他们现有的网络应用，以创建桌面应用并为Windows、macOS和Linux操作系统生成安装程序。他们正在使用Chromium（谷歌Chrome浏览器的开源版本）和Node.js JavaScript引擎的混合物。
Github负责维护Electron.js，使其成为一个可靠的项目，并有一个坚实的工程师团队支持。
你为什么要使用Electron.js？
在Electron.js之前，如果一个应用程序想在两个或多个不同的桌面操作系统上运行（例如，Windows和Mac），它必须为每个平台单独开发。它使用平台兼容的语言，如Windows使用 C#或Visual Basic，Mac使用Objective-C。
如果开发者选择用Java编写跨平台的桌面软件，用户就需要在两个平台上安装Java运行时来使用该应用程序。
另一方面，Electron.js可以从一个代码库中产生适用于所有平台的安装程序，消除了安装的需要。
因此，一个开发团队可以为特定的平台开发一个应用程序。另一个显著的好处是，如果你能用Electron.js构建一个网站，你就能构建一个桌面程序；因此，现有的网络开发者/网络开发团队可以迅速过渡到桌面软件开发者。
构建一个Electron.js应用程序:先决条件
要开始用Electron.js构建应用程序，你需要以下项目:
- HTML、CSS和JavaScript都是必需的。
- 你的电脑上已经安装了Node.js。
- 需要熟悉Node.js。
Electron.js应用程序的结构
Electron.js是由三个主要部分组成的:
1.Chromium是Electron.js堆栈的一部分，用于制作和显示网页。网页内容在Electron.js的Renderer进程中被渲染（后面会有更多介绍）。由于Chromium环境，你可以访问所有的浏览器API和开发工具，就像你在普通的Google Chrome浏览器中一样。
2.Node.js：它是Electron.js组件，为你提供了对系统功能的访问。Electron.js在其主进程中操作Node.js，允许你访问Node.js所提供的一切，包括文件系统互动、操作系统互动等等。
3. 自定义API:它允许你进行一些活动，如构建和显示上下文菜单、显示桌面提醒、使用键盘快捷键等，使开发人员能够构建标准的桌面体验，并与本地功能无缝互动。
渲染器和主进程
Main和Renderer进程是运行中的Electron.js项目所维护的两种类型的进程。
主进程
Node.js环境是Electron.js应用程序启动的地方，所有的本地功能交互都发生在这里。
窗口管理
主进程的主要目标是使用浏览器窗口模块来创建和管理应用程序窗口。
BrowserWindow类产生一个应用窗口，在每个类实例的单独渲染器进程中加载一个网页。使用该窗口的网页内容对象，你可以从主进程中与该网页内容进行交互。
一个应用程序的生命期
Electron的应用程序模块是主进程的一部分，它也控制着你的应用程序的寿命。
本地API
主进程增加了自定义的API来与用户的操作系统对接，扩展了Electron的功能，而不仅仅是一个简单的网络资源的Chromium包装器。Electron暴露了几个管理本地桌面功能的模块，包括菜单、对话框和托盘图标。
主程序负责制作网页。它通过建立一个新的Electron.js BrowserWindow对象来完成这个任务，并通过其Renderer进程制作一个新的网页。主进程可以创建一个以上的网页，每个网页都在其Renderer进程中运行。
Electron.js应用程序通常以一个默认的网页作为应用程序的启动屏幕。如果你的程序需要，你可以添加更多的显示。
渲染器进程
它负责自己的网页，与其他Renderer进程和Main进程完全分开。因此，如果一个Renderer进程死亡，它不会影响其他Renderer进程。通过删除其BrowserWindow实例，一个Renderer进程同样可以从Main进程中终止。
在每个打开的Browser Window Electron的渲染过程中，程序会启动一个单独的渲染器进程（以及每个网络嵌入）。顾名思义，渲染器负责渲染在线内容，它的行为应该符合网络标准（至少就Chromium而言是这样）。
因此，在一个浏览器窗口中，所有的用户界面和应用功能都应该使用你在网络上使用的相同工具和范式来创建。
尽管涵盖每一个网络需求已经超出了本文的范围，但最起码要知道的是:
- 渲染器过程以一个HTML文件为起点。
- 层叠样式表被用来添加UI样式（CSS）。
- 可以使用这种方法执行和添加的JavaScript代码。
渲染器进程只访问浏览器的API，如窗口和文档对象的开箱。Renderer进程只不过是一个正在运行的Chromium浏览器实例。不过，它可以被设置为使用Node.js的API，如process和map。主进程和渲染器进程有一种关系（es）
渲染器和主进程之间的交流
在Electron.js应用程序中，你会经常希望在事件发生时访问本地功能，比如用户点击按钮。由于Renderer和Main进程是隔离的，所以本地功能不能直接从网页上访问。
Electron.js通过提供一个IPC（进程间通信）通道，使Renderer和Main进程能够相互通信，从而使这一做法变得可行。
人们可以从一个进程发出事件，并使用ipcMain和ipcRenderer模块分别监听Main和Renderer进程的其他事件。它还可以将数据从一个方法传递到下一个方法。
总结
Electron.js是应用开发中的一场革命，因为它使网络开发者能够以其现有的技能组合进入原生应用开发领域。
在这个电子框架教程中，你已经学到了以下内容:
- 什么是Electron.js，以及为什么要使用它？
- 一个Electron.js项目的结构和内部工作原理
- 创建一个Electron.js项目的要求，以及如何创建一个项目
- 在你的Electron.js项目中，如何利用本地平台的能力
如果你将来需要创建一个跨平台的桌面应用程序，我推荐你使用Electron，特别是如果你是从JavaScript过来的，并且有一些可以重用的代码。
