渲染進程到主進程（單向）

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.senderconst 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.valuewindow.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.jsconst { 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.jsconst { 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)
})