前言
版本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也支持异步双向通信，但后续可能会被丢弃，不建议这样使用