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

server/2024/12/22 10:31:10/

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

1. 背景:

electron+vue实现桌面应用开发

2.异步模式

2.1使用.send.on的方式

preload.js中代码示例:

javascript">
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【主进程】:

javascript">// 获取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【渲染进程】:

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

2.2 使用.invoke的方式

preload.js中代码示例:

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

main.js【主进程】:

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

vue.js【渲染进程】:

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

3. 同步模式

3.1 使用.sendSync

preload.js中代码示例:

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

main.js【主进程】:

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

vue.js【渲染进程】:

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

http://www.ppmy.cn/server/152211.html

相关文章

多维高斯分布

高斯分布(Gaussian Distribution) 高斯分布,又称正态分布,是一种最常见的概率分布形式,广泛应用于统计学、机器学习和自然科学等领域。 高斯分布的概率密度函数(PDF) 对于给定的均值 μ 和方差…

36. Three.js案例-创建带光照和阴影的球体与平面

36. Three.js案例-创建带光照和阴影的球体与平面 实现效果 知识点 Three.js基础 WebGLRenderer WebGLRenderer 是Three.js中最常用的渲染器,用于将场景渲染到网页上。 构造器 new THREE.WebGLRenderer(parameters)参数类型描述parametersobject可选参数&#…

苍穹外卖-前端部分(持续更新中)

d 第二种:cmd中输入 vue ui进入图形化界面选择npm,vue2进行创建 先将创建的Vue框架导入Vsocde开发工具 然后ctrshiftp 输入npm 点击serve将项目启动 下这种写法跨域会报错: 解决方法: 注意 这种用法:(不是单引号&…

端到端自动驾驶大模型:视觉-语言-动作模型 VLA

模型框架定义、模型快速迭代能力是考查智驾团队出活能力的两个核心指标。在展开讨论Vision-Language-Action Models(VLA)之前,咱们先来讨论端到端自动驾驶大模型设计。 目录 1. 端到端自动驾驶大模型设计 1.1 模型输入设计 1.2 模型输出设计 1.3 实现难点分析 …

#{ }和${ } 、参数处理

目录 #{ }和${ } 参数处理 入参-parameterType 使用Map 使用Bean / List<Bean> 使用多参数 Param注解&#xff08;命名参数&#xff09; 出参-resultType 返回Map / List<Map> 返回Map<String,Map> 属性名不一致-resultMap结果映射 #{ }和${ }…

HarmonyOS(71) 自定义事件分发之TouchTestStrategy使用说明

TouchTestStrategy 1、前言2、TouchTestStrategy简介2.1、TouchTestStrategy枚举类型简介2.2、TouchTestStrategy.DEFAULT效果1.3、TouchTestStrategy.FORWARD_COMPETITION效果2.3、TouchTestStrategy.FORWARD效果3、参考资料1、前言 本文根据官方文档自定义事件分发整理而来,…

汽车气候控制传感器

红外温度传感器在过程控制和制造中使用了多年&#xff0c;现在已被接受用于乘用车。必须解决生产、可靠性和成本问题。此外&#xff0c;还必须解决复杂的信号调节和校准问题。 红外温度传感器在过程控制和制造中使用了多年&#xff0c;现在已被接受用于乘用车。必须解决生产、…

无人机加激光雷达高效率实时建模技术详解

无人机与激光雷达的结合在实时三维点云建模成像技术中展现出了高效率与高精度&#xff0c;这种技术结合了无人机的灵活性与激光雷达的高精度测量能力&#xff0c;以下是该技术的详细介绍&#xff1a; 技术原理 1. 激光雷达&#xff08;LiDAR&#xff09;&#xff1a; 定义&am…