Electron 基础 （多进程架构解析）
源代码仓库：
Github仓库【electron_git】
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)})
})
