Electron 进程间通信

文章目录

• 渲染进程到主进程（单向）
• 渲染进程到主进程（双向）
• 主进程到渲染进程 （单向，可模拟双向）

渲染进程到主进程（单向）

send （render 发送）on （main 监听）

// main.js 主要代码  // electron/main includes types for all main process modules. const { app, ipcMain } =  require("electron/main") app.whenReady().then(()=>{ 	// 需要在 HTML 文件加载之前监听，保证从渲染器调用之前处理程序能够准备就绪。 	ipcMain.on('set-title', (event, title) => { 	    const webContents = event.sender 	    const win = BrowserWindow.fromWebContents(webContents) 	    win.setTitle(title) 	}) 	createWindow(); // 创建窗口 }) 

// preload.js   // electron/renderer includes types for all renderer process modules. const { contextBridge, ipcRenderer } = require("electron/renderer") contextBridge.exposeInMainWorld("electronAPI", ()=>{ 	setTitle: (title) => ipcRenderer.send('set-title',title) }) 

// renderer.js  // 插入html中的js, 运行于渲染程序中 const setButton = document.getElementById('btn') const titleInput = document.getElementById('title') setButton.addEventListener('click', () => {     const title = titleInput.value     window.electronAPI.setTitle(title) }) 

渲染进程到主进程（双向）

invoke（render 发送）handle（main 监听）

const { app, ipcMain, dialog } =  require("electron/main") app.whenReady().then(()=>{ 	// 需要在 HTML 文件加载之前监听，保证从渲染器调用之前处理程序能够准备就绪。 	// IPC 通道名称上的 dialog: 前缀对代码没有影响。 它仅用作命名空间以帮助提高代码的可读性。 	ipcMain.handle('dialog:openFile', async () => { 	    const { canceled, filePaths } = await dialog.showOpenDialog() 	    if(!canceled) return filePaths[0] 	}) 	createWindow(); // 创建窗口 }) 

// preload.js   // electron/renderer includes types for all renderer process modules. const { contextBridge, ipcRenderer } = require("electron/renderer") contextBridge.exposeInMainWorld("electronAPI", ()=>{ 	openFile: () => ipcRenderer.invoke('dialog:openFile') }) 

// renderer.js  // 插入html中的js, 运行于渲染程序中 const setButton = document.getElementById('btn') const filePath= document.getElementById('filePath') setButton.addEventListener('click', async () => {     const path= await window.electronAPI.openFile()     filePath.innerText= path }) 

主进程到渲染进程 （单向，可模拟双向）

send on

// main.js  const { app, BrowserWindow, Menu, ipcMain } = require('electron/main') const path = require('node:path')  function createWindow () {   const mainWindow = new BrowserWindow({     webPreferences: {       preload: path.join(__dirname, 'preload.js')     }   })   const menu = Menu.buildFromTemplate([     {       label: app.name,       submenu: [         {           // 使用 webContents.send API 将 IPC 消息从主进程发送到目标渲染器。           // 其使用方式与 ipcRenderer.send 相同。           click: () => mainWindow.webContents.send('update-counter', 1),           label: 'Increment'         },         {           click: () => mainWindow.webContents.send('update-counter', -1),           label: 'Decrement'         }       ]     }   ])    Menu.setApplicationMenu(menu)   mainWindow.loadFile('index.html') }  app.whenReady().then(() => {   // 模拟双向通信，接收渲染进程发送的数据，"update-counter" 触发   ipcMain.on('counter-value', (_event, value) => {     console.log(value)    })   createWindow() }) 

// preload.js  const { contextBridge, ipcRenderer } = require("electron/renderer") contextBridge.exposeInMainWorld("electronAPI", { 	onUpdateCounter: (callback) =>  		ipcRenderer.on("update-counter", (event,value) => callback(value)), 	sendCount: (value) => ipcRender.send('counter-value', value) }) 

// render.js const count = document.getElementById("count") window.electronAPI.onUpdateCounter((value)=>{ 	const newValue = Number(count.innerText) + value; 	count.innerText = newValue.toString(); 	window.electronAPI.sendCount(newValue) })