模式 1:渲染器进程到主进程(单向)send与on
比如我们要将一个消息(1001011001)发送到main.js中:
对应的代码如下:
renderer.js:
const btn1=document.getElementById('btn1');
btn1.onclick=function(){
window.API.send1('1001011001');
console.log('发送成功');
}
preload.js:
const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('API', {
// ping: () => ipcRenderer.invoke('ping'),
send1:(title)=> ipcRenderer.send('send1',title),
// 除函数之外,我们也可以暴露变量
})
main.js部分代码:
const solve = () => {
ipcMain.handle('ping', () => 'asdasfvasdf')
ipcMain.on('send1', (event, arg) => {
console.log(arg,'main.js接收成功')
})
}
app.whenReady().then(() => {
solve()
createWindow()
})
模式 2:渲染器进程到主进程(双向)invoke与handle
比如我们在一个文件框里面传入一个文件,要求返回这个文件里面的路径:
index.html:
<button id="btn1">渲染器->主进程(单向)</button>
<button id="btn2">渲染器->主进程(双向)</button>
内容:<textarea id ='textarea'></textarea>
<script src="render/renderer1.js"></script>
renderer.js:
const btn2=document.getElementById('btn2');
const textarea=document.getElementById('textarea');
btn2.addEventListener('click',async ()=>{
const path= await window.API.open();
textarea.innerText=path
})
preload.js:
open:()=>ipcRenderer.invoke('open'),
main.js:
async function solve1(){
ipcMain.handle('open',async ()=>{
const { canceled, filePaths } = await dialog.showOpenDialog()
if (!canceled) {
return filePaths[0]
}
})
}
模式 3:主进程到渲染器进程
比如
首先在preload.js中搭建:
send2:(num)=>ipcRenderer.on('send2',num)
然后在main.js中处理:
ipcMain.on('send2', (event, arg) => {
console.log( arg) // 什么都不做也可以
})
const menu = Menu.buildFromTemplate([
{
label: 'main.js按钮',
submenu: [
{
click: () => win.webContents.send('send2', 1100011011),
label: '消息1'
},
{
click: () => win.webContents.send('send2', 'hello'),
label: '消息2'
}
]
}
])
Menu.setApplicationMenu(menu)
win.loadFile('index.html')
win.webContents.openDevTools()
模式 4:渲染器进程到渲染器进程
没有直接的方法可以使用 ipcMain
和 ipcRenderer
模块在 Electron 中的渲染器进程之间发送消息。 为此,您有两种选择:
- 将主进程作为渲染器之间的消息代理。 这需要将消息从一个渲染器发送到主进程,然后主进程将消息转发到另一个渲染器。
- 从主进程将一个 MessagePort 传递到两个渲染器。 这将允许在初始设置后渲染器之间直接进行通信。