如何使用Electron构建响应式桌面应用

如果您像我一样，就喜欢JavaScript及其生态系统，并且一直在使用React之类的框架或带有NodeJS的高性能Web服务器来构建出色的Web应用程序。现在，您想开发一个桌面应用程序，不想学习一种新的编程语言，或者您想尽可能地从现有Web项目中重用。这是Electron进入图片保存日期的时间。

Electron允许您使用HTML，CSS和JavaScript构建桌面应用程序。互联网上有很多反对Electron的论据，其中之一就是它的性能和许多次低质量的应用程序，但不要怪罪框架。电子功能强大且性能卓越。如今，许多流行的应用程序都在Electron之上运行，例如VS Code，Slack，Skype，Discord等。

但是，为什么会有很多人这么反对呢?问题始于应用程序和人们使用Electron的方式。对于许多人来说，将Web应用程序移植到Electron意味着将您现有的代码保持原样并将其嵌入到Electron容器中。这是一件可怕的事情吗?也许不是，但是您没有充分利用Electron的功能。您仅在更改独立应用程序的浏览器选项卡。

我们可以改善什么?在本文中，我们将探究Electron的基础知识，并将构建一个示例应用程序来展示一些Electron方式。

[阅读：Neural在2021年及以后的人工智能市场前景]

电子如何工作?

电子建立在3个主要组件之上：

铬：负责网站内容

NodeJS：用于与操作系统进行交互

自定义API：解决与操作系统打交道时的常见问题

如架构图所示，这些组件中的每个组件都在电子架构层上以不同级别进行交互。

电子架构

电子有两种类型的过程。

主要流程：负责窗口管理以及与操作系统的所有交互。这就是一切的开始，它可以创建和管理多个渲染器进程

渲染器过程：可能有一个或多个，每个都将托管一个Chrome实例并负责Web内容。

请务必注意，渲染器进程无法直接访问OS功能。相反，他们通过IPC与主要流程进行通信以实现这些任务。

许多典型的Electron应用程序将使用主进程创建一个渲染器进程并加载其Web应用程序。今天，我们将迈出这一步。

必备部分：Hello World!

接下来，我们将构建一个“ hello world!” 应用。我们不会使用不必要的框架或库来专注于Electron代码。

让我们开始吧。

设置电子

构建应用程序的第一步是创建一个项目并安装电子库，因此从使用NPM创建项目开始：

npm init

并设置您的应用程序详细信息。作为该应用程序的起点，我喜欢使用main.js，但您可以使用所需的任何文件名。

接下来，安装Electron。

npm install -D electron@latest

建立屏幕

对于我们的微hello世界示例，我们需要两个文件，main.js和hello-world.html。main.js是我们的主要过程;我们将创建第一个渲染器进程，以加载我们的hello-world.html。