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

学习记录：electron主进程与渲染进程直接的通信示例【开箱即用】

news 来源：原创 2025/5/22 19:04:23

electron主进程与渲染进程直接的通信示例

1. 背景：

electron+vue实现桌面应用开发

2.异步模式

2.1使用`.send` 和`.on`的方式

preload.js中代码示例：


const { contextBridge, ipcRenderer} = require('electron');// 暴露通信接口
contextBridge.exposeInMainWorld('electron', {// 渲染进程向主进程通信sendAppDataPath: function(){ipcRenderer.send('sendappdatapath')},// 主进程向渲染进程通信onAppDataPath: (callback) => ipcRenderer.on('appdatapath', (event, variable) => callback(variable)),// 使用请求、响应模式【也是异步模式】，上面的on,send同为异步模式gainAppDataPath: async () => {return await ipcRenderer.invoke('gainappdatapath');},// 同步模式syncAppDataPath: () => ipcRenderer.sendSync('syncappdatapath'),});

main.js【主进程】：

// 获取appdata路径，并返回给vue
ipcMain.on('sendappdatapath', function(event){// 方法1：返回变量给vueevent.reply('appdatapath', appDataPath); // 可发送成功，接收需在vue mounted中接收// 方法2：使用.send 发送// event.sender.send('appdatapath', appDataPath); // 可发送成功，接收也需要再 vue mounted中接收
})

vue.js【渲染进程】：

// 发送部分代码
methods: {demo: function(){window.electron.sendAppDataPath(); // 调用发送接口},
}
// 需要在vue中的mounted中监听
mounted() {// 监听主进程的变量// 接收send、on的appdata变量window.electron.onAppDataPath((variable) => {console.log('接受到变量:' + variable)})},

2.2 使用`.invoke`的方式

preload.js中代码示例：


const { contextBridge, ipcRenderer} = require('electron');// 暴露通信接口
contextBridge.exposeInMainWorld('electron', {// 使用请求、响应模式【异步】gainAppDataPath: async () => {return await ipcRenderer.invoke('gainappdatapath');},// 同步模式syncAppDataPath: () => ipcRenderer.sendSync('syncappdatapath'),});

main.js【主进程】：

// 响应模式返回给vue
ipcMain.handle('gainappdatapath', () => {console.log('invoke back varable');return appDataPath;
})

vue.js【渲染进程】：

// 在vue中的methods中
methods: {// 获取电脑apdata目录async gainAppDataPath() {// invoke响应模式 【异步】let appdatapath = await window.electron.gainAppDataPath();console.log('目录为:' + appdatapath)},
}

3. 同步模式

3.1 使用`.sendSync`

preload.js中代码示例：


const { contextBridge, ipcRenderer} = require('electron');// 暴露通信接口
contextBridge.exposeInMainWorld('electron', {// 同步模式syncAppDataPath: () => ipcRenderer.sendSync('syncappdatapath'),
});

main.js【主进程】：

// 同步模式
ipcMain.on('syncappdatapath', (event) => {event.returnValue = xxx; 
})

vue.js【渲染进程】：

// 发送部分代码
methods: {demo: function(){let syncappdatapath = window.electron.syncAppDataPath();console.log('同步模式目录为:' + JSON.stringify(syncappdatapath))},
}

学习记录：electron主进程与渲染进程直接的通信示例【开箱即用】

electron主进程与渲染进程直接的通信示例 1. 背景： electronvue实现桌面应用开发 2.异步模式 2.1使用.send 和.on的方式 preload.js中代码示例： const { contextBridge, ipcRenderer} require(electron);// 暴露通信接口 contextBridge.exposeInMa…...

编程日记 2025/5/22 19:04:23

领域自适应

领域自适应（Domain Adaptation）是一种技术，用于将机器学习模型从一个数据分布（源域）迁移到另一个数据分布（目标域）。这在源数据和目标数据具有不同特征分布但任务相同的情况下特别有用。领域自适…...

编程日记 2025/5/22 17:49:20

Kubeadm+Containerd部署k8s(v1.28.2)集群（非高可用版）

KubeadmContainerd部署k8s(v1.28.2)集群（非高可用版） 文章目录 KubeadmContainerd部署k8s(v1.28.2)集群（非高可用版）一.环境准备1.服务器准备2.环境配置3.设置主机名4.修改国内镜像源地址5.配置时间同步6.配置内核转发及网桥过滤 …...

编程日记 2025/5/22 16:45:39

重温设计模式--职责链模式

文章目录职责链模式的详细介绍C 代码示例C示例代码2 职责链模式的详细介绍定义与概念职责链模式（Chain of Responsibility Pattern）是一种行为型设计模式，它旨在将请求的发送者和多个接收者解耦，让多个对象都有机会处理请求&a…...

编程日记 2025/5/22 17:15:44

单点登录平台Casdoor搭建与使用，集成gitlab同步创建删除账号

一，简介一般来说，公司有很多系统使用，为了实现统一的用户名管理和登录所有系统（如 GitLab、Harbor 等），并在员工离职时只需删除一个主账号即可实现权限清除，可以采用单点登录 (SSO) 和集中式…...

编程日记 2025/5/17 20:48:43

【Rust自学】5.1. 定义并实例化struct

喜欢的话别忘了点赞、收藏加关注哦，对接下来的教程有兴趣的可以关注专栏。谢谢喵！(･ω･) 5.1.1. 什么是struct struct的中文意思为结构体，它是一种自定义的数据类型，它允许程序为相关联的值命名和打包&am…...

编程日记 2025/5/19 14:16:38

vue-cli 5接入模块联邦 module federation

vue-cli 5接入模块联邦 module federation 模块联邦概念实现思路配置遇到的问题: 模块联邦概念模块联邦由webpack 5最先推出的,让应用加载远程的代码模块来实现不同的Web应用共享代码片段.模块联邦分为两个角色,一个是生产者,一个是消费者.生产者暴露代码供消费者消费 (用一个…...

编程日记 2025/5/18 23:07:25

[前端]mac安装nvm（node.js）多版本管理

NVM功能简介 NVM（Node Version Manager）是一个用于管理多个Node.js版本的命令行工具，它允许开发者在同一台机器上安装、切换和卸载不同版本的Node.js，从而解决版本不兼容的问题。以下是NVM的一些主要功能和用途： 安装和…...

编程日记 2025/5/19 19:38:24

thinkphp8+layui分页

前端 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>demo</title><link href"//unpkg.com/layui2.9.20/dist/css/layui.css" rel"stylesheet"> </head> <…...

编程日记 2025/5/16 17:43:48

【NLP高频面题 - Transformer篇】Transformer的位置编码是如何计算的？

【NLP高频面题 - Transformer篇】Transformer的位置编码是如何计算的？ 重要性：★★★ NLP Github 项目： NLP 项目实践：fasterai/nlp-project-practice 介绍：该仓库围绕着 NLP 任务模型的设计、训练、优化、部署和应用…...

编程日记 2025/5/17 6:59:00

VSCode搭建Java开发环境 2024保姆级安装教程（Java环境搭建+VSCode安装+运行测试+背景图设置）

名人说：一点浩然气，千里快哉风。—— 苏轼《水调歌头》创作者：Code_流苏(CSDN) 目录一、Java开发环境搭建二、VScode下载及安装三、VSCode配置Java环境四、运行测试五、背景图设置很高兴你打开了这篇博客，更多详细的安装教程&…...

编程日记 2025/5/20 15:24:28

计算机网络压缩版

计算机网络到现在零零散散也算过了三遍，一些协议大概了解，但总是模模糊糊的印象，现在把自己的整体认识总结一下，（本来想去起名叫《看这一篇就够了》，但是发现网上好的文章太多了，还是看这篇吧&a…...

编程日记 2025/5/17 1:28:31

大语言模型中的Agent；常见的Agent开发工具或框架

大语言模型中的Agent 大语言模型中的Agent是指以大语言模型为核心驱动，具有自主理解、感知、规划、记忆和使用工具等能力，能够自动化执行复杂任务的系统.以下是一些例子： AutoGPT：它相当于一个完整的工具包，可以为各种项目构建和运行自定义AI Agent。使用OpenAI的GPT-4和…...

编程日记 2025/5/19 22:00:19

设计模式-备忘录模式

背景游戏角色恢复问题：角色有攻击力和防御力，在Boss站前保存攻击力和防御力，大战之后，攻击力和防御力下降，从备忘录恢复到大战前的状态。传统思路： 一个游戏对象，对应一个保存状态对象。 …...

编程日记 2025/5/15 9:41:02

重温设计模式--状态模式

文章目录状态模式（State Pattern）概述状态模式UML图作用：状态模式的结构环境（Context）类：抽象状态（State）类：具体状态（Concrete State）类&#x…...

编程日记 2025/5/19 14:28:48

道可云人工智能元宇宙每日资讯｜2024（GIAC）智能视听大会在青岛举行

道可云元宇宙每日简报（2024年12月23日）讯，今日元宇宙新鲜事有： 2024（GIAC）智能视听大会在青岛举行 12月22日，2024（GIAC）智能视听大会在青岛举行。大会以“数字文化智能…...

编程日记 2025/5/22 15:43:06

理解神经网络

神经网络是一种模拟人类大脑工作方式的计算模型，是深度学习和机器学习领域的基础。基本原理神经网络的基本原理是模拟人脑神经系统的功能，通过多个节点（也叫神经元）的连接和计算，实现非线性模型的组合和输出。每个…...

编程日记 2025/5/20 23:47:53

初学stm32 --- NVIC中断

目录 STM32 NVIC 中断优先级管理 NVIC_Type: ISER[8]： ICER[8]： ISPR[8]： ICPR[8]： IABR[8]： IP[240]： STM32 的中断分组： 中断优先级分组函数 NVIC_PriorityGroupConfig 中断初始化函…...

编程日记 2025/5/20 7:47:48

机器人角度参考方式

机器人的角度可以根据需求和系统设计来决定。通常情况下，机器人角度（如航向角或偏航角）有两种常见的参考方式： 参考开机时的 0：这是最常见的方式，机器人在开机时会将当前的方向作为 0（即参考方向…...

编程日记 2025/5/19 15:38:57

不同路径

不同路径一个机器人位于一个 m x n 网格的左上角 （起始点在下图中标记为 “Start” ）。机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角（在下图中标记为 “Finish” ）。问总共有多少条不同的路径&#xff…...

编程日记 2025/5/17 20:47:46

WPS工具栏灰色怎么办

WPS离线不登录，开启工具栏等相关功能当你在使用WPS的过程中，若因网络问题或其他特殊原因，导致无法登录使用WPS时，可根据以下步骤开启离线兼容模式，开启此模式后，可在未登录的状态下，激活并使用…...

编程日记 2025/5/22 13:44:55

js的节流与防抖方法封装

简介节流（Throttling）和防抖（Debouncing） 是防止频繁触发函数执行的两种技术，它们的目标都是减少函数的执行次数。区别防抖（Debouncing） ：当用户停止触发事件后，经…...

编程日记 2025/5/22 16:29:10

深信服企业级数据备份与恢复系统（整机裸机恢复）

概述深信服企业级数据备份与恢复系统可实现无需搭建目标环境，目标机可以是没有操作系统的物理主机或虚拟机，实现异构环境下的裸机恢复。深信服企业级数据备份与恢复系统支持的多种连接恢复方式： 1. PXE连接恢复：PXE连接需要做…...

编程日记 2025/5/19 8:44:09

uniapp 微信小程序页面部分截图实现

uniapp 微信小程序页面部分截图实现原理都是将页面元素画成canvas 然后将canvas转化为图片，问题是我页面里边本来就有一个canvas，ucharts图画的canvas我无法画出这块。想了一晚上，既然canvas最后能转化为图片，那我直接…...

编程日记 2025/5/19 3:47:34

Sequelize ORM sql 语句工具

Sequelize ORM sql 语句工具 sequelize orm中文网视频学习长乐未央初始化配置 Sequelize orm 配置文章落日沉溺于海在命令行中全局安装 npm i -g sequelize-clisequelize 执行需要匹配 mysql2 对应的依赖（安装 mysql2） npm i sequelize mysql2初始化…...

编程日记 2025/5/22 10:36:26

搭建Nacos注册中心

Nacos介绍目前开源的注册中心框架有很多，国内比较常见的有： Eureka：Netflix公司出品，目前被集成在SpringCloud当中，一般用于Java应用 Nacos：Alibaba公司出品，目前被集成在SpringCloudAlibaba中…...

编程日记 2025/5/21 21:07:44

Linux 下SVN新手操作手册

下面来介绍Linux 下 SVN操作方法： 1、SVN的安装 Centos 7 安装Subversion sudo yum -y install subversion Ubuntu 安装Subversion sudo apt-get install subversion 自定义安装，官方地址：https://subversion.apache.org/ 2、SVN的使用…...

编程日记 2025/5/22 8:21:56

解释下什么是面向对象？面向对象和面向过程的区别？

看着很基础是吧，你还真不一定会 4-Java 中创建对象的几种方式？ 1、使用new关键字，最常见的创建方式，通过调用类的构造方法（构造器）来创建对象。 2、使用反射，通过java的反射API可以动态的创建对…...

编程日记 2025/5/21 0:52:17

【CDN】快速了解CDN是什么？以及工作原理和应用场景

快速了解CDN是什么？以及工作原理和应用场景一、什么是CDN？CDN相关的术语解释二、CDN工作原理三、CDN与传统网站的区别四、CDN的作用和意义五、CDN的应用场景一、什么是CDN？ CDN英文全称Content Delivery Network，中文翻译即为内…...

编程日记 2025/5/21 7:02:09

【计算机视觉基础CV-图像分类】05 - 深入解析ResNet与GoogLeNet：从基础理论到实际应用

引言在上一篇文章中，我们详细介绍了ResNet与GoogLeNet的网络结构、设计理念及其在图像分类中的应用。本文将继续深入探讨如何在实际项目中应用这些模型，特别是如何保存训练好的模型、加载模型以及使用模型进行新图像的预测。通过这些步骤，读…...

编程日记 2025/5/21 6:28:40

WPF+MVVM案例实战与特效（四十五）- 打造优雅交互：ListBox 的高级定制与行为触发（侧边菜单交互面板）

文章目录 1、引言2、案例效果3、案例实现1、依赖安装2、文件创建3、代码实现1、依赖引用与上下文2、个性化视觉效果：自定义 ItemContainerStyle3、页面样式与布局完整代码4、ViewModel 逻辑实现5、子界面代码：3、实现效果4、源代码获取5、总结1、引言在WPF应用程序开发中，…...

编程日记 2025/5/16 0:28:26

Git进阶：本地或远程仓库如何回滚到之前的某个commit

在Git的使用过程中，我们经常会遇到需要回滚到之前某个commit的情况。无论是为了修复错误、撤销更改，还是为了重新组织代码，回滚到特定commit都是一个非常有用的技能。本文将介绍几种常用的回滚方法，帮助读者更好地掌握Git版本控制…...

编程日记 2025/5/6 22:21:36

Django 后端数据传给前端

Step 1 创建一个数据库 Step 2 在Django中点击数据库连接 Step 3 连接成功 Step 4 settings中找DATABASES Step 5 将数据库挂上面将数据库引擎和数据库名改成自己的 Step 6 在_init_.py中加上数据库的支持语句 import pymysql pymysql.install_as_MySQLdb()Step7 简单创建两列…...

编程日记 2025/5/19 9:27:55

Docker 技术系列之安装多版本Mysql5.6和Mysql5.7

image 大家好，后面的就不是关于MAC专有的内容，基本是跟Java环境，基础技术方面有关。所以这个教程对于在linux系统还是macOS都是通用的，不用担心。上一篇，我们安装好对应的Docker之后，感受到了它的便利。接…...

编程日记 2025/5/19 2:45:33

C# 范围判断函数

封装范围函数 public static class CommonUtil {/// <summary>/// 范围判断函数，检查给定的值是否在指定的最小值和最大值之间。/// 例如，可以用来判断当前日期是否在开始日期和结束日期之间。/// 该方法适用于任何实现了 IComparable 接口的类型…...

编程日记 2025/5/21 19:11:18

技术速递｜使用 Dependabot 管理 .NET SDK 更新

作者：Jamie Magee - 高级软件工程师排版：Alan Wang 保持 .NET SDK 版本的更新对于维护安全高效的应用程序至关重要。现在 Dependabot 可以在 global.json 中更新 .NET SDK 版本，这使您可以比以往更轻松地确保自己的应用程序始终运行最新的安…...

编程日记 2025/5/16 21:05:52

笔记本通过HDMI转VGA线连接戴尔显示器，wifi不可用或网速变慢

早上开开心心的来使用我的分屏显示器，结果winP开拓展，我的wifi就断掉了，琢磨了好一阵我以为是wifi的问题，发现不进行拓展，网络又好了，一上午就研究这个了，说是hdmi信号干扰了wifi信号啥的额&…...

编程日记 2025/5/22 16:21:09

Excel中match（）函数

函数功能概述 MATCH 函数是 Excel 中用于在指定区域中查找特定值的位置的函数。它返回指定数值在指定数组区域中的位置。这个位置是相对于查找区域的相对位置，而不是绝对的单元格位置。语法结构 MATCH(lookup_value, lookup_array, match_type)lookup_value&#xf…...

编程日记 2025/5/17 13:44:58

ACl访问控制列表

ACL的原理 ACL也称为访问控制列表，主要有包过滤的功能，同时也是包过滤防火前的本质其方式主要是定立规则，这些规则控制着数据包的允许或者通过 ACL的场景如下图，在全网互通的情况下，控制特定的数据包走向例如控…...

编程日记 2025/5/17 10:40:46

android 用户空间切换流程

在Android开发中，创建和切换用户是一个重要的功能，特别是在需要多用户支持的应用中，下面讲述一下用户切换的流程。一、CarUserManager.java 准备创建新用户，可以减少真正创建用户的时间 @RequiresPermission(anyOf = {Manifest.permission.MANAGE_USERS,Manifest.permis…...

编程日记 2025/5/22 14:06:08

突破续航瓶颈：数字样机技术引领新能源汽车复合制动新方向

随着我国经济快速发展和人民生活水平不断提升，汽车保有量截至2023年9月底就已达到了3.3亿，同比增长6.32%。庞大的汽车保有量对我国的环境和能源都产生了巨大的压力，具备节能环保优势的新能源汽车对于有效解决环境恶化和能源危机问题具有重要意…...

编程日记 2025/5/16 7:33:18

51单片机仿真摇号抽奖机源程序 12864液晶显示

资料下载地址：51单片机仿真摇号抽奖机源程序12864液晶显示仿真程序一、功能介绍单片机连接12864（st7920）液晶显示器和1个按键接INT0，模拟一个抽奖机。实现效果： 1、液晶初始显示“祝你好运！”&#xff…...

编程日记 2025/5/16 17:33:39

路由器的原理

✍作者：柒烨带你飞 💪格言：生活的情况越艰难，我越感到自己更坚强；我这个人走得很慢，但我从不后退。 📜系列专栏：网路安全入门系列目录路由器的原理一，路由器基础及相关…...

编程日记 2025/5/17 10:35:17

Vue（四）

1.Vuex 1.1 Vuex是什么 Vuex 是一个插件，可以帮我们管理 Vue 通用的数据。例如：购物车数据、个人信息数据。 1.2 vuex的使用 1.安装 vuex 安装 vuex 与 vue-router 类似，vuex 是一个独立存在的插件，如果脚手架初始化没有选 v…...

编程日记 2025/5/18 17:48:25

今日总结 2024-12-23

项目初始化拉取代码与环境配置： 难点：Git 命令不熟悉，依赖文件定位不准，启动脚本含义不明。解决办法：系统学习 Git 基础操作，如通过官方文档、优质的 Git 教程视频，反复练习克隆、分支切换等常…...

编程日记 2025/5/20 15:58:50

Vue常用指令

1. 插值表达式 {{}} <script setup> let msg="hello vue!" </script> <template> <h1>{{ msg }}--{{ 1+1 }}--{{ msg+sb }}</h1> </template> 2. Vue 常用指令 (以v- 开头) 2.1 v-html 替换标签元素内容，包含标签…...

编程日记 2025/5/21 14:04:28

欢乐力扣1-10

文章目录前言1、合并两个有序数组1.1.描述 2、移除元素2.1.描述2.2.思路 3、删除有序数组中的重复元素3.1.描述3.2.思路 4、输出有序数组中的重复项二4.1.描述4.2.思路 5、多数元素5.1.描述5.2.思路 6、轮转数组6.1.描述6.2.思路 7、买卖股票最佳时机一7.1.思路 8、买卖股票最…...

编程日记 2025/5/20 19:59:30