阅读量:2
文章目录
渲染进程到主进程（单向）
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) }) 