Electron中如何通过ipc机制实现main.js与index.html间的数据收发？

常见故障原因及修复方案 #

• 故障1：渲染进程未提前注册notes2通道监听
  主进程发送消息前，必须保证渲染进程已经完成了对应通道的监听注册。渲染进程监听代码示例（需配合预加载脚本使用，见下文）：

// 渲染进程JS
window.electronAPI.onNotes2((data) => {
  console.log('收到主进程消息：', data)
})

• 故障2：win实例作用域异常
  若你在创建窗口的函数内部局部定义win变量，外部的ipcMain.on回调可能无法访问到正确的窗口实例，或win被垃圾回收导致值为undefined。需将win定义为全局变量：

// main.js 顶部全局声明
let win;
function createWindow() {
  win = new BrowserWindow({
    // 窗口基础配置
  })
  win.loadFile('index.html')
}

• 故障3：上下文隔离配置错误
  新版Electron默认开启contextIsolation、关闭nodeIntegration，无法直接在渲染进程中引入ipcRenderer，需通过预加载脚本暴露通信能力：

1. 编写preload.js：

const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('electronAPI', {
  sendNotes: (data) => ipcRenderer.send('notes', data),
  onNotes2: (callback) => ipcRenderer.on('notes2', (_, data) => callback(data))
})

2. 主进程创建窗口时指定预加载脚本：

const path = require('path')
let win;
function createWindow() {
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'), // 填写preload.js实际存储路径
      contextIsolation: true,
      nodeIntegration: false
    }
  })
  win.loadFile('index.html')
}

3. 渲染进程发送notes消息触发主进程回调：

// 渲染进程JS，可放在DOM加载完成的回调中执行
window.electronAPI.sendNotes('传给主进程的数据')

• 故障4：发送消息时窗口未完成加载
  若你不是在收到渲染进程消息后回发，而是创建窗口后立刻发消息，需等窗口加载完成再发送：

win.webContents.on('did-finish-load', () => {
  win.webContents.send('notes2', '消息内容')
})

内容的提问来源于stack exchange，提问作者Moh_beh