免费网站统计工具上海网站设计与开发公司

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

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