Electron主进程(Main Process)与渲染进程(Renderer Process)通信详解
更新时间：2024年03月11日 14:22:50 作者：明天也要努力
这篇文章主要介绍了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;
})
- 效果
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在Vue中,driver.js通常是指用于实现用户引导和教程功能的JavaScript库,它可以帮助开发者在应用程序中创建交互式的引导和教程,以引导用户了解应用程序的不同功能和界面,本文就简单的给大家介绍一下vue如何使用driver.js完成页面引导功能2023-08-08
这篇文章主要为大家推荐了一篇值得收藏和学习的vue.js最细致的基础语法,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
下面小编就为大家分享一篇vue将对象新增的属性添加到检测序列的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了Vue基本使用之对象提供的属性功能实例详解，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-04-04
这篇文章主要介绍了vue事件监听函数on中的this指针域使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
Vue.js 的内联表达式非常方便，但它最合适的使用场景是简单的布尔操作或字符串拼接。如果涉及更复杂的逻辑，你应该使用计算属性。这篇文章我们将一起学习vue.js的计算属性。什么是计算属性，为什么要用这东西呢？通过下面这篇文章你将解决这些问题，下面来一起看看吧。2016-09-09
这篇文章主要介绍了Vue中如何判断对象是否为空，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了vue+vant实现商品列表批量倒计时功能,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2020-01-01
这篇文章主要为大家介绍了vue实现列表展示的示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
本文主要介绍了一文搞懂vue编译器(DSL)原理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
最新评论