跳到主要内容

ipcRenderer

ipcRenderer 在渲染进程里使用,通常只出现在预加载脚本中。页面通过 contextBridge 调用包装函数,而不是直接拿到这个模块。

文档:https://www.electronjs.org/docs/latest/api/ipc-renderer

方法​

const { ipcRenderer } = require('electron');

ipcRenderer.send('log:write', 'hello');

const user = await ipcRenderer.invoke('user:get', 'u1');

ipcRenderer.on('task:progress', (_event, payload) => {
console.log(payload.percent);
});
方法行为
send(channel, ...args)异步发送,没有返回值
invoke(channel, ...args)返回 Promise,对应 ipcMain.handle
sendSync(channel, ...args)阻塞渲染进程,直到主进程设置 returnValue
on / once / removeListener接收主进程 webContents.send
postMessage可以附带转交的 MessagePort

监听器的第一个参数是 IpcRendererEvent。经过 contextBridge 时只把后面的数据参数交给页面,事件对象留在预加载脚本里。

放在哪一层​

contextBridge.exposeInMainWorld('api', {
getUser: (id) => ipcRenderer.invoke('user:get', id),
onProgress: (callback) => {
const listener = (_event, payload) => callback(payload);
ipcRenderer.on('task:progress', listener);
return () => ipcRenderer.removeListener('task:progress', listener);
},
});

sendSync 会卡住页面。需要结果时用 invoke。

相关文档​