electron介绍 - 技术栈

Electron中文文档

Electron是什么？

Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。

Electron 允许开发者使用前端技术栈来创建可以在 Windows、macOS 和 Linux 等多个操作系统上运行的桌面应用程序。

Electron 本质上是一个运行在桌面操作系统上的运行时环境，它将 Chromium （一个开源的浏览器引擎）和 Node.js（一个基于 JavaScript 的服务器端运行时环境）结合在一起。这使得开发者可以在应用程序中同时使用前端的 HTML、CSS 和 JavaScript 来构建用户界面，以及使用 Node.js 的强大功能来进行文件系统操作、网络通信等后端任务。

注意

桌面应用程序是一种在个人计算机上运行的软件应用，它直接安装在操作系统上，为用户提供特定的功能和服务。

Electron主要组成部分

Chromium 引擎
- 支持最新特性的chrome浏览器
- 提供了强大的渲染能力，能够高效地显示网页内容和运行前端代码。它负责显示应用程序的用户界面，包括 HTML 页面、CSS 样式和 JavaScript 交互。
Node.js
- JavaScript运行时环境
- 允许开发者在应用程序中使用 Node.js 的 API 进行文件操作、网络请求、进程管理等后端任务。这使得应用程序可以与操作系统进行深度交互，实现各种功能，如读写文件、与服务器通信、管理系统资源等。
native API
- 提供统一的原生界面操作能力
- 开发者可以通过 native API 直接与操作系统进行通信，例如调出操作系统的系统通知等。

Electron 工作流程

Electron 的工作流程主要包括以下几个步骤：

启动阶段
- 用户双击 Electron 应用程序的图标或通过其他方式启动应用程序。
- 操作系统将启动应用程序的可执行文件，这个可执行文件实际上是一个由 Electron 打包工具生成的启动脚本。
- 启动脚本会加载 Electron 的主进程，主进程通常是一个用 Node.js 编写的脚本文件。主进程负责管理应用程序的生命周期、窗口管理、与操作系统的交互等任务。
主进程初始化
- 在主进程中，首先会加载必要的模块和库，如 Node.js 的核心模块、Electron 的核心模块等。
- 主进程会创建一个或多个浏览器窗口，每个窗口对应一个独立的渲染进程。窗口的创建可以通过编程方式实现，也可以使用预定义的窗口配置文件。
- 主进程可以设置应用程序的菜单、快捷键、系统托盘图标等用户界面元素，以及处理与操作系统的交互，如文件拖拽、系统通知等。
渲染进程启动
- 当主进程创建一个浏览器窗口时，会为每个窗口启动一个独立的渲染进程。渲染进程本质上是一个基于 Chromium 浏览器引擎的实例，它负责渲染应用程序的用户界面。
- 渲染进程会加载应用程序的 HTML、CSS 和 JavaScript 文件，这些文件可以是本地文件，也可以是通过网络加载的资源。渲染进程中的 JavaScript 代码可以使用前端开发技术，如 React、Vue、Angular 等框架来构建用户界面和实现业务逻辑。
- 渲染进程可以通过 Electron 提供的 IPC（Inter-Process Communication，进程间通信）机制与主进程进行通信，发送和接收消息，实现跨进程的数据共享和功能调用。
应用程序运行
- 用户与应用程序的交互主要发生在渲染进程中的用户界面上。例如，用户点击按钮、输入文本、滚动页面等操作会触发渲染进程中的 JavaScript 事件处理函数。
- 渲染进程中的 JavaScript 代码可以根据用户的操作执行相应的业务逻辑，如数据处理、网络请求、状态更新等。如果需要与主进程进行交互，例如访问文件系统、调用系统功能等，可以通过 IPC 机制向主进程发送消息，请求主进程执行相应的操作。
- 主进程接收到渲染进程的请求后，会根据请求的类型执行相应的操作，并通过 IPC 机制将结果返回给渲染进程。渲染进程接收到结果后，可以更新用户界面，显示操作的结果。
关闭阶段
- 当用户关闭应用程序的窗口或通过其他方式退出应用程序时，主进程会收到相应的事件通知。
- 主进程可以执行一些清理工作，如保存应用程序的状态、关闭打开的文件、释放资源等。
- 主进程退出，应用程序完全关闭。

流程模型

这里借用禹神在b站讲解中用到的图：

Electron中存在不同的进程，主要分为：主进程 、渲染进程 。

主进程管理渲染进程，主进程与渲染进程是可以通信的。

主进程：
- 可以看做是 package.json 中 main 属性对应的文件
- 一个应用只会有一个主进程
- 只有主进程可以 进行GUI的API操作（即调用native API）。如果渲染进程想要调用native API，渲染进程需要先和主进程建立通信，最终还是由主进程进行调用，再把结果传递给渲染进程。
渲染进程
- Windows中展示的界面通过渲染进程表现
- 一个应用可以有多个渲染进程

主进程可以通过调用 native API（原生应用程序编程接口）来实现与操作系统的底层交互以及执行特定的系统级任务。

Electron 的架构将主进程设计为负责管理应用程序的生命周期、与操作系统交互以及协调渲染进程。这种设计使得主进程可以直接调用 native API，以实现一些需要底层系统访问的功能，如创建窗口、管理系统托盘、处理文件对话框等。

调用 native API 的方式

使用 Node.js 的内置模块 ：Node.js 提供了一些内置模块，如fs（文件系统）、path（路径处理）、child_process（子进程管理）等，这些模块可以直接调用操作系统的相关功能。例如，使用fs模块可以进行文件的读写、创建目录、删除文件等操作。

typescript 复制代码

const fs = require('fs');
fs.writeFileSync('file.txt', 'Hello, world!');

使用第三方模块 ：除了 Node.js 的内置模块，还有许多第三方模块可以提供更高级的 native API 访问。例如，electron-native-notification模块可以在 Electron 应用程序中显示系统通知。

typescript 复制代码

const Notification = require('electron-native-notification');
new Notification('Title', { body: 'Message' });

直接调用系统库：在某些情况下，可以使用 Node.js 的ffi（Foreign Function Interface）模块直接调用系统库中的函数。这需要对底层系统编程有一定的了解，并且需要谨慎使用，因为错误的调用可能会导致应用程序崩溃。

typescript 复制代码

const ffi = require('ffi');
const libc = ffi.Library('libc', {
  'printf': ['int', ['string']]
});
libc.printf('Hello from native API!');

开发优势

快速开发和迭代
- 由于使用了前端技术栈，开发者可以利用现有的前端开发工具和流程，如包管理工具（npm、yarn）、代码编辑器（Visual Studio Code、Sublime Text 等）和开发框架（React、Vue、Angular 等），从而加快开发速度。同时，前端技术的热加载和快速迭代特性也使得开发过程更加高效。
丰富的生态系统
- Electron 受益于前端和 Node.js 的丰富生态系统，开发者可以轻松地集成各种第三方库和工具，以增强应用程序的功能。例如，可以使用 Electron 与现有的后端服务进行集成，或者使用前端的 UI 组件库来快速构建漂亮的用户界面。
易于部署
- Electron 应用程序可以像普通的桌面软件一样进行打包和分发，开发者可以使用 Electron 的打包工具将应用程序打包成可执行文件，或者发布到应用商店中，以便用户轻松安装和使用。

应用场景

桌面版的 Web 应用
- 如果已经有一个成熟的 Web 应用，并且希望将其转换为桌面应用，Electron 是一个理想的选择。可以将 Web 应用的代码直接嵌入到 Electron 中，稍加修改即可在桌面环境中运行，同时还可以利用桌面环境的特性，如系统通知、文件拖放等。
生产力工具
- 开发各种生产力工具，如文本编辑器、图像处理器、代码编辑器等。Electron 的强大功能和灵活性使得开发者可以快速构建功能丰富的工具，满足用户的各种需求。
跨平台桌面应用
- 对于需要在多个操作系统上运行的应用程序，Electron 提供了一种高效的解决方案。开发者可以编写一次代码，然后在不同的平台上进行测试和部署，大大降低了开发和维护成本。