Electron 之主进程与渲染进程

275 阅读2分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路。

导读

我们常用的开发工具 Visual Studio Code 以及 Figma 软件都是通过 Electron 构建生成的。

Electron = Chromium + Node.js + Native API

  • Chromium: 通过 Web 技术编写 UI 界面
  • Node.js: 提供操作系统底层的能力
  • Native API: 提供跨平台和原生能力

image.png 为了弥补前端访问系统 API 方面的不足,Electron 内部对系统 API 进行了封装,譬如系统托盘、系统菜单、系统通知栏、快捷键等。而Node.js 则提供如网络访问控制、本地文件系统等系统底层支持

Electron 没有什么黑魔法,只是把三者进行一个结合,让我们可以便捷地使用 JS、HTML 和 CSS 构建跨平台的桌面应用程序。

正题

Electron 通过各操作系统之间的消息循环打通 Chromium 和 Node.js 的事件循环,保证了其两者的松耦合,进而推出了主进程渲染进程的概念

主进程与渲染进程

进行 Electron 应用,离不开两个概念,一个就是主进程,另外一个便是渲染进程。这也是 electron 开发与 web 开发的不同之处。

主进程
  • electron 运行 package.json 的 main 脚本的进程被称为主进程
  • 每个应用只有一个主进程
  • 控制整个应用生命周期(app)
  • 创建渲染进程
  • 管理原生 GUI, 典型的窗口(如 BrowserWindow、Tray、Dock、Menu)
渲染进程
  • 展示 Web 页面的进程称为渲染进程
  • 通过 Node.js、Electron 提供的 API 可以跟系统底层打交道
  • 一个 Electron 应用可以包含多个渲染进程
Electron 提供给主进程和渲染进程提供对应的 API

image.png

  • app: 控制应用程序的事件生命周期。
  • BrowserWindow: 创建并控制浏览器窗口。
  • ipcMain: 从主进程到渲染进程的异步通信。
  • Notification: 创建OS(操作系统)桌面通知。
  • webContents: 渲染以及控制 web 页面。
  • dialog: 显示用于打开和保存文件、警报等的本机系统对话框。
  • Menu: 创建原生应用菜单和上下文菜单。
  • Tray: 添加图标和上下文菜单到系统通知区。
  • autoUpdater: 使应用程序能够自动更新。
  • globalShortcut: 在应用程序没有键盘焦点时,监听键盘事件。
  • clipboard: 在系统剪贴板上执行复制和粘贴操作。
  • crashReporter: 将崩溃日志提交给远程服务器。
  • desktopCapturer: 从桌面捕获音频和视频的媒体源的信息。
  • ipcRenderer: 从渲染器进程到主进程的异步通信。
  • contextBridge: 在隔离的上下文中创建一个安全的、双向的、同步的桥梁。

下一篇讲解,主进程与渲染进程之间是如何进行通信的。