2025Electron-基础二进程模型三大核心
目录
【2025】Electron 基础二（进程模型三大核心）
Electron 基础 （多进程架构解析）
源代码仓库：
1、Electron 多进程都是什么
- 主进程 (Main Process)
- 渲染进程 (Renderer Process)
- 预加载脚本 (Preload Script)
打个比方：公司里的三个关键角色
假设你要开一家公司（开发一个桌面应用），这个公司需要三个核心角色：
董事长（主进程） ：整个公司只有一个董事长，他掌握所有核心权力：
- ✅ 决定公司什么时候开门/关门（应用启动退出）
- ✅ 招聘新员工（创建新窗口）
- ✅ 直接联系政府机关（调用系统级API）
- ✅ 保管公司保险柜钥匙（访问本地文件）
普通员工（渲染进程） ：每个员工负责一个窗口的接待工作：
- 🖥️ 每人只负责一个办事窗口（每个窗口对应一个渲染进程）
- 🎨 专门搞装修设计（负责界面UI展示）
- 🔒 不能直接进保险库（默认不能访问敏感功能）
- 💬 有事得打报告请示（通过IPC通信找董事长）
秘书（预加载脚本） ：董事长安排在员工身边的助手：
- 📞 帮员工转达需求给董事长（桥接通信）
- 🛡️ 盯着员工别乱来（安全隔离）
- 📋 只给员工有限的申请表（暴露有限API）
实际工作流程举例：用户点击"打开文件"按钮
步骤1：员工收到用户请求
// renderer层
// 员工（渲染进程）的日常工作
function handleOpenFileClick() {
// 不能直接操作文件，得找秘书帮忙
window.API.sendRequest('open-file')
}步骤2：秘书转达需求
// preload层
// 秘书（预加载脚本）的工作手册
contextBridge.exposeInMainWorld('API', {
sendRequest: (type) => {
ipcRenderer.send('to-boss', type) // 打电话给董事长
}
})步骤3： 董事长处理重要事务
// main层
// 董事长（主进程）的权限
ipcMain.on('to-boss', (event, type) => {
if (type === 'open-file') {
const file = dialog.showOpenDialogSync() // 直接调用系统对话框
event.sender.send('reply', file) // 把结果传回去
}
})步骤4：秘书把结果转交员工
// 员工收到回复后的操作
ipcRenderer.on('reply', (event, file) => {
document.getElementById('file-path').textContent = file
})2、Electron 进程如何通信
Electron IPC通信：使用 invoke/handle 和 send/on 进行通信
一、invoke/handle vs send/on 场景详解
| 特性 | invoke/handle | send/on |
|---|---|---|
| 通信方向 | 双向（需要响应） | 单向/双向（需手动回复） |
| 返回值处理 | 自动返回Promise | 需手动监听回复事件 |
| 错误处理 | 自动传递reject错误 | 需额外错误事件处理 |
| 代码简洁度 | ⭐⭐⭐⭐ | ⭐⭐ |
| 典型使用场景 | 获取数据、执行操作并等待结果 | 通知事件、状态推送、实时消息 |
二、什么时候该用 invoke/handle？
场景1：需要等待操作结果的异步任务
// 渲染进程
const result = await ipcRenderer.invoke('read-file', '/path/to/file')
// 主进程
ipcMain.handle('read-file', async (event, path) => {
return fs.promises.readFile(path, 'utf-8')
})场景2：需要明确知道操作是否成功
// 自动错误传递
try {
await ipcRenderer.invoke('dangerous-operation')
} catch (error) {
showErrorDialog(error.message)
}场景3：链式异步操作
// 顺序执行多个依赖操作
const user = await ipc.invoke('get-user', id)
const orders = await ipc.invoke('get-orders', user.id)
const analytics = await ipc.invoke('generate-report', orders)三、什么时候该用 send/on？
场景1：单向通知不需要响应
// 渲染进程：不需要等待回复
ipcRenderer.send('window-minimize')
// 主进程
ipcMain.on('window-minimize', () => {
mainWindow.minimize()
})场景2：主进程主动推送消息
// 主进程：检测到新版本时广播
mainWindow.webContents.send('update-available', {
version: '2.0.0',
releaseNotes: '...'
})
// 渲染进程
ipcRenderer.on('update-available', (event, info) => {
showUpdateDialog(info)
})场景3：多个渲染进程协同工作
// 主进程：中转消息
ipcMain.on('chat-message', (event, msg) => {
// 广播给所有窗口
BrowserWindow.getAllWindows().forEach(win => {
win.webContents.send('new-message', msg)
})
})