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

Electron视图进程和主进程通讯

news 来源：原创 2025/5/14 18:36:34

快速创建基于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.js

const { 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.包含打包的模板库，链接和上面一样