Electron中 主进程(Main Process)与 渲染进程 (Renderer Process) 通信的方式

2024-01-15 01:04

本文主要是介绍Electron中 主进程(Main Process)与 渲染进程 (Renderer Process) 通信的方式,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1. 渲染进程向主进程通信

修改 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();} 
})

效果
在这里插入图片描述

2. 主进程向渲染进程通信

修改主进程(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;
})

效果
在这里插入图片描述

这篇关于Electron中 主进程(Main Process)与 渲染进程 (Renderer Process) 通信的方式的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/607115

相关文章

C#监听txt文档获取新数据方式

《C#监听txt文档获取新数据方式》文章介绍通过监听txt文件获取最新数据,并实现开机自启动、禁用窗口关闭按钮、阻止Ctrl+C中断及防止程序退出等功能,代码整合于主函数中,供参考学习... 目录前言一、监听txt文档增加数据二、其他功能1. 设置开机自启动2. 禁止控制台窗口关闭按钮3. 阻止Ctrl +

Spring Boot从main方法到内嵌Tomcat的全过程(自动化流程)

《SpringBoot从main方法到内嵌Tomcat的全过程(自动化流程)》SpringBoot启动始于main方法,创建SpringApplication实例,初始化上下文,准备环境,刷新容器并... 目录1. 入口:main方法2. SpringApplication初始化2.1 构造阶段3. 运行阶

linux批量替换文件内容的实现方式

《linux批量替换文件内容的实现方式》本文总结了Linux中批量替换文件内容的几种方法,包括使用sed替换文件夹内所有文件、单个文件内容及逐行字符串,强调使用反引号和绝对路径,并分享个人经验供参考... 目录一、linux批量替换文件内容 二、替换文件内所有匹配的字符串 三、替换每一行中全部str1为st

一文解密Python进行监控进程的黑科技

《一文解密Python进行监控进程的黑科技》在计算机系统管理和应用性能优化中,监控进程的CPU、内存和IO使用率是非常重要的任务,下面我们就来讲讲如何Python写一个简单使用的监控进程的工具吧... 目录准备工作监控CPU使用率监控内存使用率监控IO使用率小工具代码整合在计算机系统管理和应用性能优化中,监

Python实现终端清屏的几种方式详解

《Python实现终端清屏的几种方式详解》在使用Python进行终端交互式编程时,我们经常需要清空当前终端屏幕的内容,本文为大家整理了几种常见的实现方法,有需要的小伙伴可以参考下... 目录方法一:使用 `os` 模块调用系统命令方法二:使用 `subprocess` 模块执行命令方法三:打印多个换行符模拟

Python实现MQTT通信的示例代码

《Python实现MQTT通信的示例代码》本文主要介绍了Python实现MQTT通信的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录1. 安装paho-mqtt库‌2. 搭建MQTT代理服务器(Broker)‌‌3. pytho

RabbitMQ消息总线方式刷新配置服务全过程

《RabbitMQ消息总线方式刷新配置服务全过程》SpringCloudBus通过消息总线与MQ实现微服务配置统一刷新,结合GitWebhooks自动触发更新,避免手动重启,提升效率与可靠性,适用于配... 目录前言介绍环境准备代码示例测试验证总结前言介绍在微服务架构中,为了更方便的向微服务实例广播消息,

SpringBoot中六种批量更新Mysql的方式效率对比分析

《SpringBoot中六种批量更新Mysql的方式效率对比分析》文章比较了MySQL大数据量批量更新的多种方法,指出REPLACEINTO和ONDUPLICATEKEY效率最高但存在数据风险,MyB... 目录效率比较测试结构数据库初始化测试数据批量修改方案第一种 for第二种 case when第三种

Linux进程CPU绑定优化与实践过程

《Linux进程CPU绑定优化与实践过程》Linux支持进程绑定至特定CPU核心,通过sched_setaffinity系统调用和taskset工具实现,优化缓存效率与上下文切换,提升多核计算性能,适... 目录1. 多核处理器及并行计算概念1.1 多核处理器架构概述1.2 并行计算的含义及重要性1.3 并

Linux线程之线程的创建、属性、回收、退出、取消方式

《Linux线程之线程的创建、属性、回收、退出、取消方式》文章总结了线程管理核心知识:线程号唯一、创建方式、属性设置(如分离状态与栈大小)、回收机制(join/detach)、退出方法(返回/pthr... 目录1. 线程号2. 线程的创建3. 线程属性4. 线程的回收5. 线程的退出6. 线程的取消7.