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

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

news 2025/7/4 19:45:01

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))},
}