如何使用Electron构建桌面应用程序（分步指南） _Electron构建桌面应用程序教程

文章图片

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.html. main.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 BrowserWindow并main.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 应用程序提供了一个起点，其中一些使用 vanilla JS，其他直接与一些最流行的框架（如 React 和 Vue）集成。
我不是这些样板的忠实粉丝，因为它们通常带有许多我不需要的库和添加项。但它们是让你入门的好地方。
以下是一些流行的：

Electron Forge
Electron Builder
Electron React Boilerplate
Electron 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，但并不完全准确，因此你需要进行一些特殊考虑才能使其正常工作。
【如何使用Electron构建桌面应用程序（分步指南）】谢谢阅读！