如何使用Electron构建一个“Hello World”响应式桌面应用


原文地址:如何使用Electron构建一个“Hello World”响应式桌面应用

Electron允许您使用HTML,CSS和JavaScript构建桌面应用程序。VS Code,Slack,Skype,Discord等都运行在Electron。本篇文章分享使用Electron构建一个最简答的“Hello World”响应式桌面应用。

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

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

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

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

Electron如何工作?

Electron建立在3个主要组件之上:

  • 铬:负责网站内容
  • NodeJS:用于与操作系统进行交互
  • 自定义API:解决与操作系统打交道时的常见问题

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

如何使用Electron构建一个“Hello World”响应式桌面应用

Electron有两种类型的过程。

  • 主要流程:负责窗口管理以及与操作系统的所有交互。这就是一切的开始,它可以创建和管理多个渲染器进程
  • 渲染器过程:可能有一个或多个,每个都将托管一个Chrome实例并负责Web内容。

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

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

必备部分:Hello World!

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

配置Electron

构建应用程序的第一步是创建一个项目并安装Electron库,因此从使用NPM创建项目开始:

npm init

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

接下来,安装Electron。

npm install -D electron@latest 

创建屏幕

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

这是的入门代码 main.js

如何使用Electron构建一个“Hello World”响应式桌面应用

该入门工具包将处理运行该应用程序所需的最少操作,并创建第一个渲染器new BrowserWindowmain.html在其上加载。它还将解决某些情况,以退出应用程序并在需要时重新启动主窗口。

关于我们,main.html我们将使用以下内容:

如何使用Electron构建一个“Hello World”响应式桌面应用

这只是一个简单的HTML,它公开了我们的应用程序使用的node,chrome和Electron的当前版本。

最后,我们需要运行我们的应用程序;首先,您需要更改package.json并添加启动脚本。

如何使用Electron构建一个“Hello World”响应式桌面应用

如果一切顺利,您应该会看到一个这样的窗口:

如何使用Electron构建一个“Hello World”响应式桌面应用

有没有更简单的方法?

简短的答案是肯定的!虽然要付出代价。许多样板为构建Electron应用程序提供了起点,其中一些使用Vanilla JS,另一些直接与某些最受欢迎的框架(如React和Vue)集成。

我不是这些样板的忠实拥护者,因为它们经常带有许多我不需要的库和附加内容。但是它们是让您入门的好地方。

这是一些受欢迎的Electron工具:

下次您需要构建跨平台的桌面应用程序时,建议您尝试Electron,尤其是如果您来自JavaScript,并且已经有一些代码可以重用。

请注意,如果使用正确,Electron可能会很棒。请记住,尽管它看起来像一个Web,但它并不完全是一个Web,因此您需要进行一些特殊考虑才能使其正常运行。

评论

登录后评论

服务器优惠活动

Top