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 的工作流程主要包括以下几个步骤：

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

流程模型

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

Electron中存在不同的进程，主要分为：主进程、渲染进程。
主进程管理渲染进程，主进程与渲染进程是可以通信的。

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

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

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

调用 native API 的方式

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

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

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

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

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

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 提供了一种高效的解决方案。开发者可以编写一次代码，然后在不同的平台上进行测试和部署，大大降低了开发和维护成本。