【2025】Electron 基础二（进程模型三大核心）

Electron 基础 （多进程架构解析）

源代码仓库：
Github仓库【electron_git】

1、Electron 多进程都是什么

1. 主进程 (Main Process)
2. 渲染进程 (Renderer Process)
3. 预加载脚本 (Preload Script)

打个比方：公司里的三个关键角色

假设你要开一家公司（开发一个桌面应用），这个公司需要三个核心角色：

1. 董事长（主进程）：整个公司只有一个董事长，他掌握所有核心权力：

   • ✅ 决定公司什么时候开门/关门（应用启动退出）
   • ✅ 招聘新员工（创建新窗口）
   • ✅ 直接联系政府机关（调用系统级API）
   • ✅ 保管公司保险柜钥匙（访问本地文件）

2. 普通员工（渲染进程）：每个员工负责一个窗口的接待工作：

   • 🖥️ 每人只负责一个办事窗口（每个窗口对应一个渲染进程）
   • 🎨 专门搞装修设计（负责界面UI展示）
   • 🔒 不能直接进保险库（默认不能访问敏感功能）
   • 💬 有事得打报告请示（通过IPC通信找董事长）

3. 秘书（预加载脚本）：董事长安排在员工身边的助手：

   • 📞 帮员工转达需求给董事长（桥接通信）
   • 🛡️ 盯着员工别乱来（安全隔离）
   • 📋 只给员工有限的申请表（暴露有限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？

场景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)
  })
})