文章目录
- 渲染进程到主进程(单向)
- 渲染进程到主进程(双向)
- [主进程到渲染进程 (单向,可模拟双向)](#主进程到渲染进程 (单向,可模拟双向))
渲染进程到主进程(单向)
send (render 发送)on (main 监听)
js
// 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(); // 创建窗口
})
js
// 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)
})
js
// 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 监听)
js
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(); // 创建窗口
})
js
// 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')
})
js
// 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
js
// 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()
})
js
// 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)
})
js
// 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)
})