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) 通信的方式
1. 渲染进程向主进程通信 修改 html 文件内容 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><!-- 解决控制…...
企业微信forMAC，如何左右翻动预览图片
1、control commandshifd 进入企业微信的debug调试模式 2、按照如下步骤选择 3、重启企业微信...
Android Firebase （FCM）推送接入
官方文档： 向后台应用发送测试消息 | Firebase Cloud Messaging 1、根级（项目级）Gradlegradle的dependencies中添加： dependencies {...// Add the dependency for the Google services Gradle pluginclasspath com.google.gm…...
Neo4j恢复
主要记录windows环境下从备份文件中恢复Neo4j， Linux环境同理 备份在上一篇中有介绍，参考: Neo4j备份-CSDN博客 误删数据 为了模拟误删除场景，我们查询Person，并模拟误操作将其进行删除； match(p:Person) return …...
ZZULIOJ 1114: 逆序
题目描述 输入n（1<n<10）和n个整数，逆序输出这n个整数。 输入 输入n（1<n<10），然后输入n个整数。 输出 逆序输出这n个整数，每个整数占4列，右对齐。 样例输入 Copy …...
Linux前后端项目部署
目录 1.jdk&tomcat安装 配置并且测试jdk安装 修改tomcat 配置文件 登入tomcat 发布 安装mysql 导入sql数据 发布项目war包 redis安装 nginx安装 配置nginx域名映射 部署前端项目 centos 7的服务安装 安装jdk 安装tomcat 安装Mysql 安装redis 安装nginx 前后…...
GPT-4与DALL·E 3：跨界融合，开启绘画与文本的新纪元
在人工智能的发展浪潮中，MidTool（https://www.aimidtool.com/）的GPT-4与DALLE 3的集成代表了一个跨越式的进步。这一集成不仅仅是技术的结合，更是艺术与文字的完美融合，它为创意产业带来了革命性的变革。本文将探讨GPT…...
聊聊PowerJob的Alarmable
序 本文主要研究一下PowerJob的Alarmable Alarmable tech/powerjob/server/extension/Alarmable.java public interface Alarmable {void onFailed(Alarm alarm, List<UserInfoDO> targetUserList); }Alarmable接口定义了onFailed方法，其入参为alarm及tar…...
系列三十五、获取Excel中的总记录数
一、获取Excel中的总记录数 1.1、概述 使用EasyExcel开发进行文件上传时，通常会碰到一个问题，那就是Excel中的记录数太多，使用传统的方案进行文件上传，很容易就超时了，这时可以通过对用户上传的Excel中的数量进行限制…...
VMware workstation安装debian-12.1.0虚拟机并配置网络
VMware workstation安装debian-12.1.0虚拟机并配置网络 Debian 是一个完全自由的操作系统！Debian 有一个由普罗大众组成的社区！该文档适用于在VMware workstation平台安装debian-12.1.0虚拟机。 1.安装准备 1.1安装平台 Windows 11 1.2软件信息 软…...
centos下系统全局检测工具dstat使用
目录 一：没有需要安装 二：dstat命令参数 三、监测界面各参数含义（部分） 四、dstat的高级用法 一：没有需要安装 yum install dstat 二：dstat命令参数 有默认选项，执行dstat命令不加任何参数…...
无人机群ros通信
单架无人机与地面站通信 在一个局域网内获取无人机的机载电脑ip 通过地面站ssh到机载电脑，实现通信 多架无人机与地面站通信 在ROS基础上，配置主机和从机，实现主机和从机的话题联通 配置hosts 在主机和从机的/etc/hosts文件中，…...
LeetCode刷题：142. 环形链表 II
题目： 是否独立解决：否，参考了解题思路解决问题，思考了用快慢指针，栈，统计链表数量定位尾巴节点（因为是环形链表所以是死循环，链表数量用while循环统计不出来）都没解决 解…...
Laravel 使用rdkafka_laravel详细教程（实操避坑）
一、选择rdkafka 首先要看版本兼容问题，我的是Laravel5.6，PHP是7.3.13，所以需要下载兼容此的rdkafka，去 Packagist 搜索 kafka ，我用的是 enqueue/rdkafka选择里面0.10.5版本， 二、安装rdkafka 在 Larav…...
439 - Knight Moves （UVA）
题目链接如下： Online Judge UVA439 骑士的移动 - 锦依卫议事堂 - 洛谷博客 这里有好几个特别厉害的解法...先存着慢慢看。 我的代码如下： #include <iostream> #include <deque> #include <string> // #define debugstruct node{…...
数据结构(c)冒泡排序
本文除了最下面的代码是我写的，其余是网上抄写的。 冒泡排序 什么是冒泡排序？ 冒泡排序（Bubble Sort）是一种简单的排序算法。它重复地走访过要排序的数列，一次比较两个元素，如果他们的顺序错误就把他们交…...
并发编程之并发容器
目录 并发容器 CopyOnWriteArrayList 应用场景 常用方法 读多写少场景使用CopyOnWriteArrayList举例 CopyOnWriteArrayList原理 CopyOnWriteArrayList 的缺陷 扩展迭代器fail-fast与fail-safe机制 ConcurrentHashMap 应用场景 常用方法 并发场景下线程安全举例 Con…...
K8s---存储卷(动态pv和pvc)
当我要发布pvc可以生成pv，还可以共享服务器上直接生成挂载目录。pvc直接绑定pv。 动态pv需要两个组件 1、卷插件：k8s本生支持的动态pv创建不包括nfs，需要声明和安装一个外部插件 Provisioner: 存储分配器。动态创建pv,然后根据pvc的请求自动…...
JS判断对象是否为空对象的几种方法
通过JSON自带的stringify()方法判断 function isEmptyObj(obj) {return JSON.stringify(obj) {} } console.log(对象是否为空：, isEmptyObj({}))for in 循环判断 function isEmptyObj(obj) {for(let item in obj) {return true}return false } console.log(对…...
)
算法通关村第十五关—用4KB内存寻找重复元素(青铜)
用4KB内存寻找重复元素 用4KB内存寻找重复元素 题目要求：给定一个数组，包含从1到N的整数，N最大为32000，数组可能还有重复值，且N的取值不定，若只有4KB的内存可用，该如何打印数组中所有重复元素。…...
手游刚开服就被攻击怎么办？如何防御DDoS？
开服初期是手游最脆弱的阶段，极易成为DDoS攻击的目标。一旦遭遇攻击，可能导致服务器瘫痪、玩家流失，甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案，帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...
【WiFi帧结构】
文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成：MAC头部frame bodyFCS，其中MAC是固定格式的，frame body是可变长度。 MAC头部有frame control，duration，address1，address2，addre…...
解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八
现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet，点击确认后如下提示 最终上报fail 解决方法 内核升级导致，需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...
Java - Mysql数据类型对应
Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...
Spring AI 入门：Java 开发者的生成式 AI 实践之路
一、Spring AI 简介 在人工智能技术快速迭代的今天，Spring AI 作为 Spring 生态系统的新生力量，正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务（如 OpenAI、Anthropic）的无缝对接&…...
涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战
“🤖手搓TuyaAI语音指令 😍秒变表情包大师，让萌系Otto机器人🔥玩出智能新花样！开整！” 🤖 Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制（TuyaAI…...
SpringCloudGateway 自定义局部过滤器
场景： 将所有请求转化为同一路径请求（方便穿网配置）在请求头内标识原来路径，然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...
听写流程自动化实践，轻量级教育辅助
随着智能教育工具的发展，越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式，也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建，…...
重启Eureka集群中的节点，对已经注册的服务有什么影响
先看答案，如果正确地操作，重启Eureka集群中的节点，对已经注册的服务影响非常小，甚至可以做到无感知。 但如果操作不当，可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...
让回归模型不再被异常值“带跑偏“，MSE和Cauchy损失函数在噪声数据环境下的实战对比
在机器学习的回归分析中，损失函数的选择对模型性能具有决定性影响。均方误差（MSE）作为经典的损失函数，在处理干净数据时表现优异，但在面对包含异常值的噪声数据时，其对大误差的二次惩罚机制往往导致模型参数…...