Electron主进程(Main Process)与渲染进程(Renderer Process)通信详解
作者：明天也要努力
这篇文章主要介绍了Electron主进程(Main Process)与渲染进程(Renderer Process)通信,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
渲染进程向主进程通信
修改 html 文件内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 解决控制台警告问题 --> <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline';"> <title>electron</title> </head> <body> <input type="text" id="name"> <button id="btn">send</button> <script src="./renderer/app.js"></script> </body> </html>
根目录下新增 renderer 文件夹
在 renderer 文件夹下新増 app.js 文件，此处的文件表示渲染进程的 js 文件，可以操作渲染进程（浏览器）中的dom。
const button = document.getElementById('btn');
button.addEventListener('click',() => {
// 此处的electronAPI即为预加载中传递的命名空间，sendMainInfo为传递过来的回调函数
const name = document.getElementById('name').value;
electronAPI.sendMainInfo(name);
})
在根目录下新増 preload.js 文件
// 此文件为预加载文件，需在 main.js 文件中配置
const { ipcRenderer,contextBridge } = require('electron');
/*
* 搭建主进程和渲染进程的桥梁
*/
// render-info代表主进程可以监听的回调函数
const sendMainInfo = async (val) => {
ipcRenderer.invoke('render-info',val);
}
// electronAPI 代表向渲染进程传递的对象命名，sendMainInfo表示向渲染进程传递一个回调函数
contextBridge.exposeInMainWorld('electronAPI',{
platform: process.platform,
sendMainInfo,
});
修改主进程（main.js）文件
const { app, BrowserWindow, ipcMain} = require('electron');
const path = require('path');
const createWindow = () => {
const win = new BrowserWindow({
width: 1200,
height: 1000,
webPreferences:{
preload: path.resolve(__dirname,'./preload.js') // 渲染进程预加载
}
});
// 加载静态资源
win.loadFile('index.html');
// 打开开发者工具
win.webContents.openDevTools();
};
// 主进程监听渲染进程传递过来的回调函数
ipcMain.handle('render-info',(event,args) => {
console.log(args)
})
// app.whenReady 表示主进程加载完成，返回 promise
app.whenReady().then(() => {
createWindow();
app.on('activate', () => {
// 此处解决mac系统关闭app后，但程序坞中还存在图标，再次点击可以重新创建进程
if(BrowserWindow.getAllWindows.length === 0){
createWindow();
}
})
});
// 关闭所有窗口
app.on('window-all-closed', () => {
// electron 运行在三个环境（win32 Windows系统、linux Linux系统、 darwin Mac系统）
// 此处解决的是非mac系统，程序退出进程 (Mac系统关闭app会保留在程序坞中)
if(process.platform !== 'darwin'){
app.quit();
}
})
- 效果
主进程向渲染进程通信
修改主进程（main.js）文件
const { app, BrowserWindow, ipcMain} = require('electron');
const path = require('path');
const createWindow = () => {
const win = new BrowserWindow({
width: 1200,
height: 1000,
webPreferences:{
preload: path.resolve(__dirname,'./preload.js') // 渲染进程预加载
}
});
// 加载静态资源
win.loadFile('index.html');
// 打开开发者工具
win.webContents.openDevTools();
};
// 主进程监听渲染进程传递过来的回调函数
ipcMain.handle('main-info',async (event,args) => {
return await getInfo();
})
// mock 一个接口
function getInfo() {
return new Promise(resolve => {
setTimeout(() => {
resolve('来自主进程的数据');
}, 500)
})
}
// app.whenReady 表示主进程加载完成，返回 promise
app.whenReady().then(() => {
createWindow();
app.on('activate', () => {
// 此处解决mac系统关闭app后，但程序坞中还存在图标，再次点击可以重新创建进程
if(BrowserWindow.getAllWindows.length === 0){
createWindow();
}
})
});
// 关闭所有窗口
app.on('window-all-closed', () => {
// electron 运行在三个环境（win32 Windows系统、linux Linux系统、 darwin Mac系统）
// 此处解决的是非mac系统，程序退出进程 (Mac系统关闭app会保留在程序坞中)
if(process.platform !== 'darwin'){
app.quit();
}
})
修改 preload.js 文件
// 此文件为预加载文件，需在 main.js 文件中配置
const { ipcRenderer,contextBridge } = require('electron');
/*
* 搭建主进程和渲染进程的桥梁
*/
const mainToRender = async (res) => {
const resData = await ipcRenderer.invoke('main-info',res);
return resData;
};
// electronAPI 代表向渲染进程传递的对象命名
contextBridge.exposeInMainWorld('electronAPI',{
platform: process.platform,
mainToRender,
});
修改 renderer/app.js 文件
const button = document.getElementById('btn');
button.addEventListener('click',async () => {
// 此处的electronAPI即为预加载中传递的命名空间，mainToRender为传递过来的回调函数
let name = document.getElementById('name');
const res = await electronAPI.mainToRender();
name.value = res;
})
- 效果
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。