如何使用Electron构建桌面应用程序?分步指南

2021年11月28日07:46:14 发表评论 30 次浏览
特色图片
Electron构建桌面应用程序教程

如果你像我一样,喜欢 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是如何工作的?

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

  • Chromium:负责网页内容
  • NodeJS:用于与操作系统交互
  • 自定义APIs:解决与操作系统打交道时的常见问题

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

电子架构
Electron架构

Electron 使用两种类型的过程。

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

重要的是要注意渲染器进程不能直接访问操作系统功能。相反,它们通过 IPC与Main Process通信以完成这些任务。

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

必备部分:Hello World!

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

让我们开始吧。

设置Electron

Electron构建桌面应用程序示例介绍 - 构建应用程序的第一步是创建一个项目并安装Electron库,所以从使用 NPM 创建项目开始:

npm init

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

接下来,安装Electron。

npm install -D electron@latest

Electron构建桌面应用程序教程:构建屏幕

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

这是启动代码 main.js

const { app, BrowserWindow } = require('electron');

/**
 * Creates the main window
 */
function createMainWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  win.loadFile('hello-world.html');
  win.webContents.openDevTools()
}

app.whenReady().then(createMainWindow);

// When all windows are closed exit the app, except in macOS.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
});

// When the application gets activated create the main window if one does not exist
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createMainWindow()
  }
});

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

Electron构建桌面应用程序示例:至于我们,main.html我们将使用以下内容:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>

Electron如何构建桌面应用程序?它只是一个简单的 HTML,公开了我们的应用程序使用的 node、chrome 和 Electron 的当前版本。

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

"scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

你的“脚本”部分现在应该是这样的。

是时候测试一下了!在终端运行

npm start

如果一切顺利,你应该会看到如下窗口:

用 Electron 制作的 Hello World 应用程序
用 Electron 制作的 Hello World 应用程序

没有更简单的方法吗?

简短的回答是肯定的!虽然这是有代价的。许多样板为构建 Electron 应用程序提供了一个起点,其中一些使用 vanilla JS,其他直接与一些最流行的框架(如 React 和 Vue)集成。

我不是这些样板的忠实粉丝,因为它们通常带有许多我不需要的库和添加项。但它们是让你入门的好地方。

以下是一些流行的:


构建流畅的应用程序

Electron构建桌面应用程序教程:我们已经在 Electron 的架构中看到了事情是如何运作的。如果你和我一样,你可能会担心 Chromium 和 Node 运行的所有这些实例,你应该担心。我们都知道 Chromium(或 Chrome)如何吞噬我们的内存并影响我们的性能,那么我们如何才能避免基于 Chromium 的应用程序做到这一点呢?我们如何保持它们的性能?

这里有一些提示:

永远不要阻塞主进程

主要过程是一切开始的地方。它是应用程序所有进程的父进程。它主要与操作系统通信,处理所有窗口和它们之间的通信,并运行 UI 线程。

阻止此进程意味着应用程序将停止响应,直到操作完成。在任何情况下,都不要在此处运行占用大量 CPU 并需要很长时间才能完成的代码。

以下是一些建议:

  • 对于 CPU 密集型操作,将这些功能委托给工作线程、渲染器进程,或者甚至生成一个专用进程来执行该任务(但请确保你知道自己在为最后一个做什么)。
  • 尽量避免使用remote模块。使用remote模块在不知不觉中阻塞 UI 线程太容易了。
  • 避免在主线程上使用阻塞 I/O 操作;如果需要,请使用 NodeJS 提供的异步等效项。

可以阻止渲染器进程吗?

并不真地。也许后果不会像阻塞主进程那样有害,但是阻塞渲染器是有代价的。你的 Windows 可能会变得迟钝或无响应,并且整体用户体验会很糟糕。

我们在使用网络时,习惯了一些网络应用突然变慢、不流畅,我们都可以接受;但是,对于桌面应用程序,我们的标准更高。请注意这一点,因为用户期望很重要。

我该怎么做才能使我的应用程序响应更快?几乎可以在我们的网络应用程序上做同样的事情;毕竟,在渲染器过程中,我们只是在谈论 Chromium。

  • requestIdleCallback:允许在浏览器空闲时间排队执行 JavaScript 的 API,无论是在帧结束时还是在用户不活动时。
  • Web Worker:通过将它们分配给新线程来在 Web 浏览器上运行昂贵计算的最佳工具。

你不需要跨浏览器兼容性

在 web 开发过程中,使用 polyfills 来支持不同的浏览器是非常典型的。在构建 Electron 应用程序时,你不需要任何这些。如果它在 Chromium 上运行,它就在 Electron 上运行,并且不需要支持任何其他浏览器。通过不加载这些额外的模块,减少你的包,并让一切变得更快。

捆绑所有代码

在 Web 开发中,我们有时会从服务器加载脚本或页面,例如 CDN,它们与我们的应用程序分开提供,这很好。毕竟,对于网络,我们总是需要下载这些资产来运行应用程序。

对于桌面应用程序,这是不同的。通过捆绑应用程序中的所有静态资产、脚本和内容来避免任何不必要的网络请求。这将使你的应用程序可以做两件事,离线工作,并加快加载过程,因为读取磁盘比访问互联网便宜。


Electron构建桌面应用程序教程结论

Electron如何构建桌面应用程序?下次你需要构建跨平台的桌面应用程序时,我建议你尝试使用 Electron,特别是如果你来自 JavaScript,并且你已经拥有一些可以重用的代码。

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

谢谢阅读!

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: