electron原理

80 阅读3分钟

安装

npm config set ELECTRON_MIRROR https://npmmirror.com/mirrors/electron/

npm install electron -g

Electron工作机制

主进程通过 Node.js 运行的进程,它是整个 Electron 应用程序的核心。主进程被用来管理应用程序的生命周期、打开窗口、处理系统事件、访问文件系统等等。在主进程中可以使用 Node.js 的所有 API,包括网络通信、数据库操作、文件 I/O 等。主进程还可以创建多个渲染进程,并通过 IPC 机制与它们进行通信。

渲染进程则是运行在 Chromium 中的进程,负责显示应用程序的用户界面。每个窗口都对应一个独立的渲染进程。渲染进程使用 HTML、CSS 和 JavaScript 实现用户交互功能。在渲染进程中,不能直接使用 Node.js 的大部分 API,只能使用一些特定的 Electron API,比如可以使用 ipcRenderer 模块与主进程通信。渲染进程也可以通过预加载脚本实现在渲染进程中直接引入 Node.js 的模块。

一个Electron应用只有一个主进程,但可以有多个渲染进程。

image.png

app 模块,控制整个应用程序的事件生命周期。

BrowserWindow 模块,它创建和管理程序的窗口。

进程间的通信

image.png

官方文档: www.electronjs.org/zh/docs/lat…

进程间的通信

一、渲染进程到主进程(单向)

(ipcRenderer.send和ipcMain.on)

二、渲染进程到主进程(双向)

(ipcRenderer.send和ipcMain.handle)

旧方案:

  • 渲染进程ipcRenderer.send("send") -> ipcMain.on(”send“, (event) => event.reply("reply")) -> ipcRenderer.on("reply")

  • ipcRenderer.send更改成ipcRenderer.sendSync(不推荐, 阻塞渲染进程, 直到收到回复为止)

三、主进程到渲染进程

renderWindow.webContents.send 和 ipcRenderer.on;

四、渲染进程到渲染进程

  • 主进程作为中介

  • 使用MessagePort

  • ipcRenderer.sendTo(webContentsId, channel, ...args)

在Electron实现跨域请求

浏览器不允许向第三方发出请求, 但是Electron具有Node服务器的所有功能,以及浏览器的所有功能。这意味着我们可以自由地发出跨源请求,而不需要服务器。

在Electron中编写应用程序的另一个好处是我们可以使用正在兴起的Fetch API来向远程服务器发出请求。Fetch API免去了手工设置XMLHttpRequest的麻烦,并为处理我们的请求提供了一个良好的、基于承诺的接口。在撰写本文时,主要浏览器对Fetch的支持有限。也就是说,它在当前版本的Chromium中有完整的支持,这意味着我们可以使用它。

主进程和渲染进行能用到的API

img

问题:

1、有什么事件

2、window, require等支持情况

3、remote是什么, 有什么属性可以调用,remote从15开始需要自己引入

npm i -D @electron/remote

tips:

process对象由Node提供,不需要配置全局可用。process.platform返回当前执行应用程序的平台名称。在截至写作时间点,process.platform返回七个字符串之一: aix,darwin,freebsd,linux,openbsd,sunoswin32

Electron的contextIsolation是一个安全特性,它用于隔离渲染进程中的JavaScript上下文,以提高安全性并防止JavaScript代码直接访问Node.js API和Electron API。实际上,当contextIsolation启用时,Node.js API将不再直接可用,但你可以通过contextBridge模块与主进程通信,以便在渲染进程中使用API。(需要测试, 是否开启后渲染进程就无法使用node)

Electron 中 remote 是 Electron 框架的一个模块,用于在主进程和渲染进程之间进行 IPC(进程间通讯)。通过使用 remote 模块,可以在渲染器进程中直接调用主进程中已经暴露出来的模块或函数。这个模块可以使得主进程中的功能可以被多个渲染器进程同时共享,提高了 Electron 应用程序的可管理性和可扩展性。

remote在14中已被废弃, 建议使用到15之后