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

embedded/2024/12/24 8:05:33/

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/embedded/148282.html

相关文章

Ubuntu Netlink 套接字使用介绍

Netlink 套接字 是 Linux 特有的一种 IPC(进程间通信)机制,用于用户态进程和内核模块之间的通信。它可以用来完成路由管理、设备通知、网络状态更新等任务。 1. Netlink 的基本工作原理 Netlink 是一种双向通信机制。Netlink 消息分为请求和…

uni-app 统一请求处理 请求拦截器 响应拦截器 请求封装

封装API接口 import {http} from ../utils/request.js export function login(code){return http({url:/wx/getSession,method: GET,data:{code}}) }调用接口 import {login,test,phoneMessage,updateAvatar} from ../../api/user.js function userLogin(){ login(code.value…

深入Linux权限体系:守护系统安全的第一道防线

1.什么是权限? a.权限是限制人的,人真实的人身份角色,因为我是学生所以我不能进校长办公室 b.目标事物的属性,也会影响权限 权限角色事物属性 权限就是你能不能做一件事情 认识人—用户、普通用户、root用户、人切换 root&am…

【数据可视化案例】探索影响不同国家预期寿命的主要因素

🧑 博主简介:曾任某智慧城市类企业算法总监,目前在美国市场的物流公司从事高级算法工程师一职,深耕人工智能领域,精通python数据挖掘、可视化、机器学习等,发表过AI相关的专利并多次在AI类比赛中获奖。CSDN…

【操作系统】基于信号量与PV操作解决东西向汽车过独木桥问题

【操作系统】基于信号量与PV操作解决东西向汽车过独木桥问题 问题 东西向汽车过独木桥,为了保证安全,只要桥上无车,则允许一方的汽车过桥,待一方的汽车全部过完后,另一方的汽车才允许过桥。某一时刻,桥上…

Android Bootable Recovery 中的 `bspatch.cpp` 文件详解

Android Bootable Recovery 中的 bspatch.cpp 文件详解 引言 在 Android 系统中,Recovery 模式是一个非常重要的组件,它允许用户在设备启动时执行一系列的维护操作,例如系统更新、数据擦除、备份和恢复等。Android Bootable Recovery 的核心功能之一是处理增量更新(Delta…

开源软件兼容性可信量化分析

开源软件兼容性可信量化分析 课程:软件质量分析 作业 开源软件兼容性问题严重程度分成哪4级?分别表示什么风险?版本间兼容性可信度量公式什么?等级划分表是什么?阐述软件间兼容性测试框架以及面向Java和C的工具平台框…

Redis梳理

1、Redis是什么? Redis是开源的(BSD许可开源),内存数据结构存储,被用作数据库,缓存,消息队列。 它支持的数据结构像Strings,hashes,lists,sets,sorted set等范围查询数据结构,以及bi…