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

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:返回变量给vue
	event.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))
	},
}
相关推荐
Hello_Embed2 小时前
STM32HAL 快速入门(二十):UART 中断改进 —— 环形缓冲区解决数据丢失
笔记·stm32·单片机·学习·嵌入式软件
咸甜适中3 小时前
rust语言 (1.88) 学习笔记:客户端和服务器端同在一个项目中
笔记·学习·rust
Magnetic_h4 小时前
【iOS】设计模式复习
笔记·学习·ios·设计模式·objective-c·cocoa
研梦非凡4 小时前
ICCV 2025|从粗到细:用于高效3D高斯溅射的可学习离散小波变换
人工智能·深度学习·学习·3d
前端君5 小时前
实现最大异步并发执行队列
javascript
limengshi1383925 小时前
机器学习面试:请介绍几种常用的学习率衰减方式
人工智能·学习·机器学习
知识分享小能手6 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队7 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
周周记笔记7 小时前
学习笔记:第一个Python程序
笔记·学习
萌萌哒草头将军7 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite