本文已参与「新人创作礼」活动,一起开启掘金创作之路。
导读
我们常用的开发工具 Visual Studio Code 以及 Figma 软件都是通过 Electron 构建生成的。
Electron = Chromium + Node.js + Native API
- Chromium: 通过 Web 技术编写 UI 界面
- Node.js: 提供操作系统底层的能力
- Native API: 提供跨平台和原生能力
为了弥补前端访问系统 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
- app: 控制应用程序的事件生命周期。
- BrowserWindow: 创建并控制浏览器窗口。
- ipcMain: 从主进程到渲染进程的异步通信。
- Notification: 创建OS(操作系统)桌面通知。
- webContents: 渲染以及控制 web 页面。
- dialog: 显示用于打开和保存文件、警报等的本机系统对话框。
- Menu: 创建原生应用菜单和上下文菜单。
- Tray: 添加图标和上下文菜单到系统通知区。
- autoUpdater: 使应用程序能够自动更新。
- globalShortcut: 在应用程序没有键盘焦点时,监听键盘事件。
- clipboard: 在系统剪贴板上执行复制和粘贴操作。
- crashReporter: 将崩溃日志提交给远程服务器。
- desktopCapturer: 从桌面捕获音频和视频的媒体源的信息。
- ipcRenderer: 从渲染器进程到主进程的异步通信。
- contextBridge: 在隔离的上下文中创建一个安全的、双向的、同步的桥梁。
下一篇讲解,主进程与渲染进程之间是如何进行通信的。