当前位置: 首页 > news >正文

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)推送接入

官方文档&#xff1a; 向后台应用发送测试消息 | Firebase Cloud Messaging 1、根级&#xff08;项目级&#xff09;Gradlegradle的dependencies中添加&#xff1a; dependencies {...// Add the dependency for the Google services Gradle pluginclasspath com.google.gm…...

Neo4j恢复

主要记录windows环境下从备份文件中恢复Neo4j&#xff0c; Linux环境同理 备份在上一篇中有介绍&#xff0c;参考: Neo4j备份-CSDN博客 误删数据 为了模拟误删除场景&#xff0c;我们查询Person&#xff0c;并模拟误操作将其进行删除&#xff1b; match(p:Person) return …...

ZZULIOJ 1114: 逆序

题目描述 输入n&#xff08;1<n<10&#xff09;和n个整数&#xff0c;逆序输出这n个整数。 输入 输入n&#xff08;1<n<10&#xff09;&#xff0c;然后输入n个整数。 输出 逆序输出这n个整数&#xff0c;每个整数占4列&#xff0c;右对齐。 样例输入 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:跨界融合,开启绘画与文本的新纪元

在人工智能的发展浪潮中&#xff0c;MidTool&#xff08;https://www.aimidtool.com/&#xff09;的GPT-4与DALLE 3的集成代表了一个跨越式的进步。这一集成不仅仅是技术的结合&#xff0c;更是艺术与文字的完美融合&#xff0c;它为创意产业带来了革命性的变革。本文将探讨GPT…...

聊聊PowerJob的Alarmable

序 本文主要研究一下PowerJob的Alarmable Alarmable tech/powerjob/server/extension/Alarmable.java public interface Alarmable {void onFailed(Alarm alarm, List<UserInfoDO> targetUserList); }Alarmable接口定义了onFailed方法&#xff0c;其入参为alarm及tar…...

系列三十五、获取Excel中的总记录数

一、获取Excel中的总记录数 1.1、概述 使用EasyExcel开发进行文件上传时&#xff0c;通常会碰到一个问题&#xff0c;那就是Excel中的记录数太多&#xff0c;使用传统的方案进行文件上传&#xff0c;很容易就超时了&#xff0c;这时可以通过对用户上传的Excel中的数量进行限制…...

VMware workstation安装debian-12.1.0虚拟机并配置网络

VMware workstation安装debian-12.1.0虚拟机并配置网络 Debian 是一个完全自由的操作系统&#xff01;Debian 有一个由普罗大众组成的社区&#xff01;该文档适用于在VMware workstation平台安装debian-12.1.0虚拟机。 1.安装准备 1.1安装平台 Windows 11 1.2软件信息 软…...

centos下系统全局检测工具dstat使用

目录 一&#xff1a;没有需要安装 二&#xff1a;dstat命令参数 三、监测界面各参数含义&#xff08;部分&#xff09; 四、dstat的高级用法 一&#xff1a;没有需要安装 yum install dstat 二&#xff1a;dstat命令参数 有默认选项&#xff0c;执行dstat命令不加任何参数…...

无人机群ros通信

单架无人机与地面站通信 在一个局域网内获取无人机的机载电脑ip 通过地面站ssh到机载电脑&#xff0c;实现通信 多架无人机与地面站通信 在ROS基础上&#xff0c;配置主机和从机&#xff0c;实现主机和从机的话题联通 配置hosts 在主机和从机的/etc/hosts文件中&#xff0c…...

LeetCode刷题:142. 环形链表 II

题目&#xff1a; 是否独立解决&#xff1a;否&#xff0c;参考了解题思路解决问题&#xff0c;思考了用快慢指针&#xff0c;栈&#xff0c;统计链表数量定位尾巴节点&#xff08;因为是环形链表所以是死循环&#xff0c;链表数量用while循环统计不出来&#xff09;都没解决 解…...

Laravel 使用rdkafka_laravel详细教程(实操避坑)

一、选择rdkafka 首先要看版本兼容问题&#xff0c;我的是Laravel5.6&#xff0c;PHP是7.3.13&#xff0c;所以需要下载兼容此的rdkafka&#xff0c;去 Packagist 搜索 kafka &#xff0c;我用的是 enqueue/rdkafka选择里面0.10.5版本&#xff0c; 二、安装rdkafka 在 Larav…...

439 - Knight Moves (UVA)

题目链接如下&#xff1a; Online Judge UVA439 骑士的移动 - 锦依卫议事堂 - 洛谷博客 这里有好几个特别厉害的解法...先存着慢慢看。 我的代码如下&#xff1a; #include <iostream> #include <deque> #include <string> // #define debugstruct node{…...

数据结构(c)冒泡排序

本文除了最下面的代码是我写的&#xff0c;其余是网上抄写的。 冒泡排序 什么是冒泡排序&#xff1f; 冒泡排序&#xff08;Bubble Sort&#xff09;是一种简单的排序算法。它重复地走访过要排序的数列&#xff0c;一次比较两个元素&#xff0c;如果他们的顺序错误就把他们交…...

并发编程之并发容器

目录 并发容器 CopyOnWriteArrayList 应用场景 常用方法 读多写少场景使用CopyOnWriteArrayList举例 CopyOnWriteArrayList原理 CopyOnWriteArrayList 的缺陷 扩展迭代器fail-fast与fail-safe机制 ConcurrentHashMap 应用场景 常用方法 并发场景下线程安全举例 Con…...

K8s---存储卷(动态pv和pvc)

当我要发布pvc可以生成pv&#xff0c;还可以共享服务器上直接生成挂载目录。pvc直接绑定pv。 动态pv需要两个组件 1、卷插件&#xff1a;k8s本生支持的动态pv创建不包括nfs&#xff0c;需要声明和安装一个外部插件 Provisioner: 存储分配器。动态创建pv,然后根据pvc的请求自动…...

JS判断对象是否为空对象的几种方法

通过JSON自带的stringify()方法判断 function isEmptyObj(obj) {return JSON.stringify(obj) {} } console.log(对象是否为空&#xff1a;, isEmptyObj({}))for in 循环判断 function isEmptyObj(obj) {for(let item in obj) {return true}return false } console.log(对…...

算法通关村第十五关—用4KB内存寻找重复元素(青铜)

用4KB内存寻找重复元素 用4KB内存寻找重复元素 题目要求&#xff1a;给定一个数组&#xff0c;包含从1到N的整数&#xff0c;N最大为32000&#xff0c;数组可能还有重复值&#xff0c;且N的取值不定&#xff0c;若只有4KB的内存可用&#xff0c;该如何打印数组中所有重复元素。…...

线程同步:确保多线程程序的安全与高效!

全文目录&#xff1a; 开篇语前序前言第一部分&#xff1a;线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分&#xff1a;synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分&#xff…...

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

QT: `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能

1. 开发环境准备 ​​安装DevEco Studio 3.1​​&#xff1a; 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK ​​项目配置​​&#xff1a; // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...

在 Spring Boot 中使用 JSP

jsp&#xff1f; 好多年没用了。重新整一下 还费了点时间&#xff0c;记录一下。 项目结构&#xff1a; pom: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://ww…...

学习一下用鸿蒙​​DevEco Studio HarmonyOS5实现百度地图

在鸿蒙&#xff08;HarmonyOS5&#xff09;中集成百度地图&#xff0c;可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API&#xff0c;可以构建跨设备的定位、导航和地图展示功能。 ​​1. 鸿蒙环境准备​​ ​​开发工具​​&#xff1a;下载安装 ​​De…...

消息队列系统设计与实践全解析

文章目录 &#x1f680; 消息队列系统设计与实践全解析&#x1f50d; 一、消息队列选型1.1 业务场景匹配矩阵1.2 吞吐量/延迟/可靠性权衡&#x1f4a1; 权衡决策框架 1.3 运维复杂度评估&#x1f527; 运维成本降低策略 &#x1f3d7;️ 二、典型架构设计2.1 分布式事务最终一致…...

自然语言处理——文本分类

文本分类 传统机器学习方法文本表示向量空间模型 特征选择文档频率互信息信息增益&#xff08;IG&#xff09; 分类器设计贝叶斯理论&#xff1a;线性判别函数 文本分类性能评估P-R曲线ROC曲线 将文本文档或句子分类为预定义的类或类别&#xff0c; 有单标签多类别文本分类和多…...