Electron视图进程和主进程通讯

快速创建基于vue的electron项目：@quick-start/create-electron - npm

视图线程也就index.html是无法直接访问这个api的（如果没有开启视图层访问nodejs的功能，现在几乎没法直接开启，开启了一堆警告提示）

所以需要通过reload.js方式给index.html视图层注入对应的方法，挂在window对象下面

视图层给后端发起消息如果希望通过then的方式获取结果，推荐使用
ipcRenderer.invoke
如果是同步情况可以使用
ipcRenderer.sendSync
个人建议使用ipcRenderer.invoke
如果是仅仅视图层发起消息，不关注后续处理结果，推荐使用
ipcRenderer.send

主线程处理

他们三个发起消息后，主线程处理的方式是不一样的
ipcRenderer.invoke：

//main.jsconst { ipcMain } = require('electron');ipcMain.handle('message-from-renderer', (event, message) => {console.log('主进程收到消息:', message, "event", event);return "我是主进程的返回值:btn2"});

ipcRenderer.sendSync：

//main.js
const { ipcMain } = require('electron');ipcMain.on('render-send-sync-to-main', (event, message) => {console.log(`receive message from render: ${message}`)event.returnValue = '主进程回复的消息';})

ipcRenderer.send

//main.js
const { ipcMain } = require('electron');ipcMain.on('message-from-renderer1', (event, message) => {console.log('主进程收到消息:', message, "event", event);event.reply('reply-from-main', '我是主进程的返回值:btn1');});

preload封装
 

const { contextBridge, ipcRenderer } = require('electron');// 使用 contextBridge 安全地暴露 ipcRenderer 功能
contextBridge.exposeInMainWorld('api', {sendMessage: (id, message) => ipcRenderer.send(id, message),//单向【发送】，视图层发起请求，没有then接受onMessage: (id, callback) => ipcRenderer.on(id, callback),//视图层单向接受数据onMessageOne: (id, callback) => ipcRenderer.once(id, callback),//视图层单向接受数据invoke: (id, message) => ipcRenderer.invoke(id, message),//【双向响应】，视图层发起请求，用then接受成功
});

视图层访问

window.onload = () => {//使用旧的通讯方式document.querySelector('#btn1').onclick = function () {console.log('click', this.id)window.api.sendMessage('message-from-renderer1', 'id:' + this.id);window.api.onMessageOne('reply-from-main', (event, message) => {console.log('btn1响应结果', message);});}//使用新的通讯方式document.querySelector('#btn2').onclick = function () {console.log('click', this.id)window.api.invoke('message-from-renderer', '你好啊,我来来之渲染层').then((result) => {console.log("btn2:响应结果", result)})}
}

更多参考：
1.electron渲染线程与主线程通信，渲染线程与渲染线程通信_electron主线程和渲染线程通信-CSDN博客

2.打包的文档：electron-builder

3.包含打包的模板库，链接和上面一样