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的内存可用，该如何打印数组中所有重复元素。…...
智能在线客服平台：数字化时代企业连接用户的 AI 中枢
随着互联网技术的飞速发展，消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁，不仅优化了客户体验，还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用，并…...
C++中string流知识详解和示例
一、概览与类体系 C 提供三种基于内存字符串的流，定义在 <sstream> 中： std::istringstream：输入流，从已有字符串中读取并解析。std::ostringstream：输出流，向内部缓冲区写入内容，最终取…...
数据库分批入库
今天在工作中，遇到一个问题，就是分批查询的时候，由于批次过大导致出现了一些问题，一下是问题描述和解决方案： 示例： // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...
vue3+vite项目中使用.env文件环境变量方法
vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量，这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...
tree 树组件大数据卡顿问题优化
问题背景 项目中有用到树组件用来做文件目录，但是由于这个树组件的节点越来越多，导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多，导致的浏览器卡顿，这里很明显就需要用到虚拟列表的技术&…...
Maven 概述、安装、配置、仓库、私服详解
目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...
GC1808高性能24位立体声音频ADC芯片解析
1. 芯片概述 GC1808是一款24位立体声音频模数转换器（ADC），支持8kHz~96kHz采样率，集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器，适用于高保真音频采集场景。 2. 核心特性 高精度：24位分辨率，…...
React---day11
14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store： 我们在使用异步的时候理应是要使用中间件的，但是configureStore 已经自动集成了 redux-thunk，注意action里面要返回函数 import { configureS…...
vulnyx Blogger writeup
信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面，gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress，说明目标所使用的cms是wordpress，访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...
mac 安装homebrew (nvm 及git)
mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用： 方法一：使用 Homebrew 安装 Git（推荐） 步骤如下：打开终端（Terminal.app） 1.安装 Homebrew…...