当前位置： 首页 > article >正文

electron框架（3.0）主程序与桥梁与渲染，以及之间的通信

article 2026/3/3 14:43:42

每个页面程序通过渲染和主进程通信，主进程根据需求调用Native Api来实现功能。

实际，每个页面和主程序通信时，需要建个桥梁来管理它们的通信，preload.js(自己创建)，来管理实现通信。

----创建preload.js定义桥梁js：

----关于主程序与渲染层的通信：

写入/传入：send->on   读取：invoke->handle   (预加载脚本 / 桥梁->主进程)

详细解析：
  1. send 和 on 的关系（主进程 <---> 渲染进程）：        简易通信，不需要返回值
    • send 是发送消息的动作。
    • on 是接收消息的动作。
    • 渲染进程通过 ipcRenderer.send 发送消息，主进程通过 ipcMain.on 接收消息。反之，主进程也可以通过 event.sender.send 向渲染进程发送消息，渲染进程通过 ipcRenderer.on 接收。
  2. invoke 和 handle 的关系（渲染进程 ---> 主进程）： 处理异步操作，有返回值        
    • invoke 是发送请求并期望响应的动作。
    • handle 是处理请求并返回响应的动作。
    • 渲染进程通过 ipcRenderer.invoke 发送请求，主进程通过 ipcMain.handle 处理请求并返回结果
 总结：
  • send/on：适用于简单的事件驱动通信，不需要返回值。
  • invoke/handle：适用于需要返回值或处理异步操作的场景，更加现代化和灵活
 main.js（主程序）里的代码：
const {app, BrowserWindow,ipcMain} = require('electron')
const path = require('path')
const fs = require('fs')//写入文件
function writeFile(_, data) {fs.writeFileSync('D:/hello.txt', data)
}
//读取文件
function readFile() {const res = fs.readFileSync("D:/hello.txt").toString()return res
}function createWindow() {//当app准备好后，执行createWindow创建窗口const win = new BrowserWindow({width: 800,//窗口宽度height: 600,//窗口高度autoHideMenuBar: true,//自动隐藏菜单档alwaysOnTop: true,//置顶webPreferences: {  //在main.js中定义preload.js为桥梁preload: path.resolve(__dirname, './preload.js')}})ipcMain.on('file-save', writeFile)ipcMain.handle('file-read', readFile)//引入页面win.loadFile('./pages/index/index.html')win.openDevTools()  //自动打开调试窗口console.log("main.js里的main.js")
}app.on('ready', () => {createWindow()//兼容核心代码1app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) createWindow()})})
preload.js（桥梁）里的代码 ：
const {contextBridge, ipcRenderer} = require('electron')
contextBridge.exposeInMainWorld('myAPI', {version: process.version,saveFile: (data) => {ipcRenderer.send('file-save', data)},readFile() {//返回的是一个primise的返回值return ipcRenderer.invoke('file-read')}
})
render.js（渲染）里的代码：
const btn1 = document.getElementById("btn1")
const btn2 = document.getElementById("btn2")
const btn3 = document.getElementById("btn3")
const input = document.getElementById("inp")
btn1.onclick = () => {alert(myAPI.version)
}
btn2.onclick = () => {myAPI.saveFile(input.value)
}
btn3.onclick = async() => {const res = await myAPI.readFile()alert(res)
}
html的代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'"><title>这里是index页面</title>
</head><body>
<h1>欢迎学习Electron开发！！！</h1>
<button id="btn1">点我</button>
<hr/>
<input type="text" id="inp"/>
<button id="btn2">向D盘写入hello.txt</button>
<hr>
<button id="btn3">读取hello.txt的内容</button>
</body><script type="text/javascript" src="./render.js"></script>
</html>

包结构：

相关文章：

electron框架（3.0）主程序与桥梁与渲染，以及之间的通信

每个页面程序通过渲染和主进程通信&#xff0c;主进程根据需求调用Native Api来实现功能。 实际&#xff0c;每个页面和主程序通信时&#xff0c;需要建个桥梁来管理它们的通信&#xff0c;preload.js(自己创建)&#xff0c;来管理实现通信。 ----创建preload.js定义桥梁js&a…...

编程日记 2026/2/15 11:39:56

python写入excel多个sheet表 以及追加sheet表

python写入excel多个sheet表 以及追加sheet表 写入多个sheet表在excel追加sheet表 可将不同DataFrame分别写入指定Sheet&#xff08;如初始写入"箱_4"和"箱_2"&#xff09;&#xff0c;并通过封装函数append_to_excel支持动态追加新Sheet到现有文件&#x…...

编程日记 2026/2/14 7:20:50

【大模型微调】使用Llama Factory实现中文llama3微调

【大模型微调】使用Llama Factory实现中文llama3微调 github链接 为什么不用基座模型&#xff1a;95%用的英文数据训练&#xff0c;训练效果不好 所以用的Llama3-99-Chinese-Chat(别人微调过的再微调)...

编程日记 2026/2/15 9:06:06

群体智能优化算法-牛顿-拉夫逊优化算法（Newton-Raphson-Based Optimizer, NRBO，含Matlab源代码）

摘要&#xff08;Abstract&#xff09; 牛顿-拉夫逊优化算法&#xff08;Newton-Raphson-Based Optimizer, NRBO&#xff09;是一种新型群体智能优化算法&#xff0c;受牛顿-拉夫逊方法求解非线性方程的启发。NRBO 结合牛顿-拉夫逊搜索规则&#xff08;Newton-Raphson Search …...

编程日记 2026/2/13 23:48:31

JS—原型与原型链：2分钟掌握原型链

个人博客&#xff1a;haichenyi.com。感谢关注 一. 目录 一–目录二–原型三–原型链 二. 原型 什么是原型&#xff1f; 每个JavaScript对象都有一个原型&#xff0c;这个原型也是一个对象。比方说 function Person(name) {this.name name; } let person new Person(&quo…...

编程日记 2026/3/2 15:31:58

Canal 解析与 Spring Boot 整合实战

一、Canal 简介 1.1 Canal 是什么&#xff1f; Canal 是阿里巴巴开源的一款基于 MySQL 数据库增量日志解析&#xff08;Binlog&#xff09;中间件&#xff0c;它模拟 MySQL 的从机&#xff08;Slave&#xff09;行为&#xff0c;监听 MySQL 主机的二进制日志&#xff08;Binl…...

编程日记 2026/2/22 8:06:35

「数据会说话」：让AI成为你的数据分析魔法师 ✨

文章目录 「数据会说话」&#xff1a;让AI成为你的数据分析魔法师 ✨1. 核心技术 &#x1f6e0;️1.1 LIDA智能可视化引擎1.1.1 核心优势1.1.2 核心功能 1.2 前端交互框架 2. 系统架构设计 &#x1f3d7;️2.1 功能模块组成2.2 用户隔离与数据安全 &#x1f512;2.2.1 用户身份…...

编程日记 2026/2/14 13:31:14

图论——Prim算法

53. 寻宝（第七期模拟笔试） 题目描述 在世界的某个区域，有一些分散的神秘岛屿，每个岛屿上都有一种珍稀的资源或者宝藏。国王打算在这些岛屿上建公路，方便运输。 不同岛屿之间，路途距离不同，国王希望你可以规划建公路的方案，如何可以以最短的总公路距离将 所有岛屿联通…...

编程日记 2026/2/13 19:46:01

2025年汽车加气站操作工考试精选题库

汽车加气站操作工题库中题目及答案&#xff1a; 单项选择题 1、按压力容器的设计压力分为&#xff08; &#xff09;个压力等级。 A. 3 B. 4 C. 5 答案&#xff1a;B 2、缓冲罐的安装位置在天然气压缩机&#xff08; &#xff09;。 A. 前 B. 后 C. 中间 答案&#…...

编程日记 2026/2/27 13:17:53

1. 初识golang微服务-gRPC

单体架构 在这里插入图片描述 微服务架构 RPC架构&#xff08;远程过程调用&#xff09; 服务端实例代码&#xff1a; package mainimport ("fmt""net""net/rpc""time" )type Hello struct { }func (h Hello) SayHello(req stri…...

编程日记 2026/2/22 13:12:20

C++20 指定初始化器

指定初始化器 对于聚合&#xff0c;C20 提供了一种方法来指定应该用传递的初始值初始化哪个成员&#xff0c;但只能使用它 来跳过参数。 假设有以下聚合类型: struct Value {double amount{0};int precision{2};std::string unit{"Dollar";}; }; 那么&#x…...

编程日记 2026/2/15 6:52:59

【从零开始学习计算机科学】设计模式（二）工厂模式、抽象工厂模式、单例模式、建造者模型、原型模式

【从零开始学习计算机科学】设计模式（二）工厂模式、抽象工厂模式、单例模式、建造者模型、原型模式 工厂模式主要特点类型适用场景抽象工厂模式主要特点工作原理适用场景举例优点缺点总结单例模式主要特点工作原理适用场景优点缺点总结建造者模式主要特点工作原理适用场景优点…...

编程日记 2026/2/18 11:13:02

视频翻译器免费哪个好？轻松玩转视频直播翻译

你是不是觉得看外语视频很麻烦&#xff1f;每次遇到喜欢的外语电影、电视剧或动漫&#xff0c;总是要等字幕组的翻译&#xff0c;或者因为语言不通而错过精彩的情节。 这个时候&#xff0c;掌握多语种直播翻译方案就显得尤为重要&#xff0c;有了实时字幕&#xff0c;看外语视…...

编程日记 2026/2/28 23:50:23

mysql 数据库异常排查

1、简单查询语句无法执行 线上问题记录&#xff0c;有个删除语句走不了索引导致锁表&#xff0c;其他所有引用该表的操作需要等待删除成功后才能执行&#xff0c;导致服务不可用 排查思路&#xff0c;先看是否有长时间未提交的事务 SELECT * FROM information_schema.INNOD…...

编程日记 2026/2/22 4:36:52

Python列表1

# coding:utf-8 print("———————————— 列表 ——————————————")列表 是指一系列按照特定顺序排列的元素组成 是Python中内置的可变序列 使用[]定义列表&#xff0c;元素与元素之间使用英文的逗号分隔 列表中的元素可以是任意的数据类型列表的…...

编程日记 2026/2/17 10:59:33

如何在前端发版时实现向客户端推送版本更新消息

前端打包发版后如何用户一个更新提示，该提示会让用户主动去更新当前正在操作的页面，或者在系统有较大更新时，让用户重新更新本地缓存信息，这一操作比较友好，且能避免用户不更新当前系统，导致某些接口依赖更新后的数据而导致接口请求失败报错。 1、后端更新提示 有些情况…...

编程日记 2026/2/17 1:35:01

Redis系列：深入理解缓存穿透、缓存击穿、缓存雪崩及其解决方案

在使用Redis作为缓存系统时&#xff0c;我们经常会遇到“缓存穿透”、“缓存击穿”和“缓存雪崩”等问题&#xff0c;这些问题一旦出现&#xff0c;会严重影响应用性能甚至造成服务不可用。因此&#xff0c;理解这些问题的产生原因和解决方案非常重要。 本文将全面讲解缓存穿透…...

编程日记 2026/2/14 19:58:47

3.19学习总结

学习了Java中的面向对象的知识点 完成一道算法题&#xff0c;找树左下角的值&#xff0c;错误的以为左下角只能是最底层的左节点&#xff0c;但指的是最底层最左边的节点...

编程日记 2026/2/25 3:36:40

服务创造未来 东隆科技携多款产品亮相慕尼黑

慕尼黑上海光博会依托于德国慕尼黑博览集团&#xff0c;自2006年首次举办以来&#xff0c;始终坚持将国内外先进的光电技术成果展示给观众&#xff0c;深度链接亚洲乃至全球的激光、光学、光电行业的优质企业及买家。如今已经成为了国内外专业观众信赖的亚洲激光、光学、光电行…...

编程日记 2026/2/14 8:31:13

AI 时代，学习 Java 应如何入手？

一、Java 的现状&#xff1a;生态繁荣与 AI 融合的双重机遇 在 2025 年的技术版图中&#xff0c;Java 依然稳坐企业级开发的 “头把交椅”。根据行业统计&#xff0c;Java 在全球企业级应用中的市场份额仍超过 65%&#xff0c;尤其在微服务架构、大数据平台和物联网&#xff0…...

编程日记 2026/2/18 7:32:16

LiteratureReading:[2016] Enriching Word Vectors with Subword Information

文章目录 一、文献简明&#xff08;zero&#xff09;二、快速预览&#xff08;first&#xff09;1、标题分析2、作者介绍3、引用数4、摘要分析&#xff08;1&#xff09;翻译&#xff08;2&#xff09;分析 5、总结分析&#xff08;1&#xff09;翻译&#xff08;2&#xff09;…...

编程日记 2026/3/3 12:55:05

JavaScript 实现导出内容自动居中：从原理到实践

引言 在前端开发中&#xff0c;我们经常会遇到需要将页面上的内容导出为文件&#xff08;如 PDF、Excel 等&#xff09;的需求。而在导出的内容中&#xff0c;让元素自动居中显示可以提升内容的美观度和专业性。本文将围绕 JavaScript 实现导出内容自动居中展开&#xff0c;详…...

编程日记 2026/2/20 9:02:17

Docker 速通(总结)

Docker 命令 镜像 docker build: 从 Dockerfile 构建镜像。docker pull: 从 Docker Hub 或其他注册表拉取镜像。docker push: 将镜像推送到 Docker Hub 或其他注册表。docker images: 列出本地镜像。docker rmi: 删除本地镜像。 容器 docker run: 创建并启动一个新的容器。…...

编程日记 2026/2/15 6:35:18

人工智能之数学基础:矩阵的降维

本文重点 在现实世界中，我们经常会遇到高维数据。例如，图像数据通常具有很高的维度，每个像素点都可以看作是一个维度。高维数据不仅会带来计算和存储上的困难，还可能会导致 “维数灾难”，即随着维度的增加，数据的稀疏性和噪声也会增加，从而影响数据分析的效果。因此，我…...

编程日记 2026/2/15 22:31:00

Object 转 JSONObject 并排除null和““字符串

public static JSONObject objToJSONObject(Object obj) throws Exception{//创建一个 HashMap 对象 map&#xff0c;用于存储对象的属性名和属性值。//key 是属性名&#xff08;String 类型&#xff09;&#xff0c;value 是属性值&#xff08;Object 类型&#xff09;Map<…...

编程日记 2026/2/28 4:43:59

mysql5.7主从部署（docker-compose版本）

mysql5.7主从部署&#xff08;docker-compose版本&#xff09; 1:docker-compose-test.yml 文件信息 version: 3services:# MySQL 数据库mysql-master:image: mysql:5.7container_name: mysql-masterenvironment:MYSQL_ROOT_PASSWORD: 123456MYSQL_DATABASE: nacosports:- 23…...

编程日记 2026/2/25 6:48:47

Java+Html实现前后端客服聊天

文章目录 核心组件网络通信层事件调度层服务编排层 Spring实现客服聊天技术方案对比WebScoket建立连接用户上线实现指定用户私聊群聊离线 SpringBootWebSocketHtmljQuery实现客服聊天1. 目录结构2. 配置类3. 实体类、service、controller4. ChatWebSocketHandler消息处理5.前端…...

编程日记 2026/2/23 10:58:21

实用工具-Another Redis Desktop Manager介绍

GitHub&#xff1a;https://github.com/qishibo/AnotherRedisDesktopManager/releases Gitee&#xff1a;AnotherRedisDesktopManager 发行版 - Gitee.com Another Redis Desktop Manager 是一款免费的 Redis 可视化管理工具&#xff0c;具有以下特点和功能&#xff1a; 特…...

编程日记 2026/2/16 8:29:06

MySQL如何存储表情符号？

存储表情符号 默认mysql的字符集是utf8&#xff0c;排序规则为 utf8_general_ci INSERT INTO department (name) VALUES (&#x1f604;)在存储表情的时候会报 1366 - Incorrect string value: \xF0\x9F\x98\x84 for column name at row 1, Time: 0.007000s 这时需要修改字符…...

编程日记 2026/2/15 23:30:06

解锁 DeepSeek 安全接入、稳定运行新路径

背景 目前&#xff0c;和 DeepSeek 相关的需求总结为两类&#xff1a; 因官方 APP/Web 服务经常无法返回结果&#xff0c;各类云厂商、硬件或软件企业提供满血版或蒸馏版的 API 算力服务&#xff0c;还有不少基于开源家用计算和存储设备的本地部署方案&#xff0c;以分担 De…...

编程日记 2026/2/24 11:54:24