Electron(以前称为 Atom Shell)是由 Cheng Zhao 创建的开源框架,现在由 GitHub 开发。它允许使用最初为 Web 应用开发的前后端组件来开发桌面 GUI 应用:后端使用 Node.js 运行时,前端使用 Chromium。Electron 是几个著名开源项目背后的主要 GUI 框架,包括 GitHub 的 Atom 和微软的 Visual Studio Code 源代码编辑器、Tidal 音乐流媒体服务桌面应用和 Light Table IDE,以及 Discord 聊天服务的免费桌面客户端。
¥Electron (formerly known as Atom Shell) is an open-source framework created by Cheng Zhao, and now developed by GitHub. It allows for the development of desktop GUI applications using front and back end components originally developed for web applications: Node.js runtime for the backend and Chromium for the frontend. Electron is the main GUI framework behind several notable open-source projects including GitHub’s Atom and Microsoft’s Visual Studio Code source code editors, the Tidal music streaming service desktop application and the Light Table IDE, in addition to the freeware desktop client for the Discord chat service.
每个 Electron 应用都有两个线程:一个是主线程(处理应用窗口和启动),一个是渲染线程(基本上是你的 UI Web 代码)。还有一个预加载脚本来连接两个 “worlds”。
¥Each Electron app has two threads: one is the main thread (dealing with the App window and bootup), and one is the renderer thread (which is basically your UI web code). There is also a preload script to bridge the two “worlds”.
渲染线程(Renderer Thread)
¥Renderer Thread
Electron 使用 Chromium 在一个称为渲染进程的单独进程中显示网页。此线程处理 /src
文件夹中的 UI 代码。你将无法在此处使用 Node.js 的功能,但预加载脚本将允许你将 UI 与 Node.js 桥接。
¥Electron uses Chromium for displaying web pages in a separate process called the render process. This thread deals with your UI code in /src
folder. You won’t be able to use the Node.js power here, but the preload script will allow you to bridge the UI with Node.js.
主线程(Main Thread)
¥Main Thread
在 Electron 中,运行 package.json 主脚本的进程称为主进程。这是在主进程中运行的脚本,可以通过初始化渲染线程来显示 GUI。此线程处理 /src-electron/electron-main.js
中的代码。
¥In Electron, the process that runs package.json’s main script is called the main process. This is the script that runs in the main process and can display a GUI by initializing the renderer thread. This thread deals with your code in /src-electron/electron-main.js
.
预加载脚本(Preload Script)
¥Preload Script
预加载脚本(/src-electron/electron-preload.js
)是一种通过在渲染线程和 UI 之间搭建桥梁,将 Node.js 内容注入渲染线程的方法。你可以公开 API,然后从 UI 中调用它们。
¥The preload script (/src-electron/electron-preload.js
) is a way for you to inject Node.js stuff into the renderer thread by using a bridge between it and the UI. You can expose APIs that you can then call from your UI.