Electron一些概念理解

咖喱鱼蛋2024-11-23 8:33

前言

版本33.2.0

记录官方文档的一些初步理解

官方文档

自写demo: electron-demo 按钮点击发送http请求

主进程

一个Electron应用项目都会有一个主进程，启动入口

只有这个主进程，运行在Node.js环境中，可以require其他模块，用API

渲染器进程

每一个窗口都会有一个渲染器进程

这边我的理解是，就像一个html页面引入的一个普通js脚本

但是用上Electron的ipc通道API，就理解为是文档所说的一个渲染器进程

这里不能像主进程的js一样直接使用npm的模块

主进程的操作也不能直接渲染页面

主进程和渲染器进程交互

通信方式

通信方式 IPC通道

通过开发人员自己定义的"通道"来传递信息

在Electron框架中，涉及两个模块ipcMain 和ipcRenderer

本身主进程和渲染器进程是相互隔离的

通过写一个preload.js (用来定义通道接口)（这个由主进程加载，因此可以调用API）

然后渲染器进程可以通过这个通道接口，与主进程交互，主进程中调用API操作

模式1: 渲染器进程到主进程(单向)

复制代码

// preload.js
const { contextBridge, ipcRenderer } = require('electron/renderer')

contextBridge.exposeInMainWorld('electronAPI', {
  setTitle: (title) => ipcRenderer.send('set-title', title)
})

渲染器进程调用这个接口, 会将title发给主进程

复制代码

window.electronAPI.setTitle(title)

上面用ipcRenderer.send 发送，主进程那边用ipcMain.on接收消息

文档提到了以前Electron 7的时候，ipcRenderer.send也可以用异步双向通信

模式2: 渲染器进程到主进程(双向)

复制代码

// preload.js
const { contextBridge, ipcRenderer } = require('electron/renderer')

contextBridge.exposeInMainWorld('electronAPI', {
  openFile: () => ipcRenderer.invoke('dialog:openFile')
})

渲染器进程使用，await等待主进程的返回

复制代码

const filePath = await window.electronAPI.openFile()

通过ipcRenderer.invoke 和ipcMain.handle 搭配使用

其他

ipcRenderer.send也支持异步双向通信，但后续可能会被丢弃，不建议这样使用