Electron中ipcMain.on的event参数弃用替代方案及笔记卡片实现问题

核心问题分析 #

1. DOM加载顺序错误：create.js放在<head>中执行时，页面<body>还未渲染完成，导致无法获取到createButton元素，点击事件绑定失败。
2. IPC参数接收错误：ipcRenderer.on的回调函数第一个参数固定为event对象，你直接将第一个参数当作noteText，导致无法正确获取主进程传递的文本内容。
3. 自定义变量传递无效：当前代码未实现从渲染进程向主进程传递自定义数据的逻辑，且若使用旧版IPC写法可能收到弃用提示，推荐使用Electron官方推荐的现代IPC API。

修改后的完整代码 #

main.js #

使用ipcMain.handle和ipcRenderer.invoke实现双向通信（替代传统send/on，避免弃用提示）：

const { app, BrowserWindow, ipcMain } = require('electron');

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      contextIsolation: false, // 若需直接require electron，需关闭该选项（生产环境建议使用preload脚本）
      nodeIntegration: true
    }
  });

  mainWindow.loadFile('index.html');
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
  app.quit();
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

// 处理渲染进程的创建笔记请求，支持接收自定义文本
ipcMain.handle('createNote', (event, customText) => {
  // 若未传入自定义文本，使用默认值
  const noteText = customText || 'New Note';
  // 向渲染进程发送笔记创建完成的通知
  mainWindow.webContents.send('noteCreated', noteText);
  return '笔记创建成功'; // 可选：返回结果给渲染进程
});

create.js #

修正DOM加载问题，使用invoke发送请求并修正参数接收：

// 等待DOM加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
  const { ipcRenderer } = require('electron');

  const createButton = document.getElementById('createButton');
  createButton.addEventListener('click', async () => {
    // 可传递自定义文本到主进程，比如这里用自定义字符串，也可替换为输入框的值
    const customNoteText = '我的自定义笔记';
    // 发送请求到主进程
    await ipcRenderer.invoke('createNote', customNoteText);
  });

  // 接收主进程的笔记创建通知，正确处理参数顺序
  ipcRenderer.on('noteCreated', (event, noteText) => {
    const noteContainer = document.getElementById('noteContainer');
    const noteCard = document.createElement('div');
    // 给笔记卡片添加基础样式，方便区分
    noteCard.style.border = '1px solid #ccc';
    noteCard.style.padding = '10px';
    noteCard.style.margin = '10px 0';
    noteCard.style.borderRadius = '4px';
    noteCard.textContent = noteText;
    noteContainer.appendChild(noteCard);
  });
});

index.html #

将脚本移到<body>末尾，确保DOM加载完成后执行：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ToDo</title>
</head>
<body>
  <div id="Header">
    <h1>Header</h1>
    <button id="createButton">Create</button>
  </div>
  <div id="noteContainer"></div>
  
  <!-- 将脚本移到body末尾，确保DOM已加载 -->
  <script src="create.js"></script>
</body>
</html>

关键修改说明 #

• DOM加载处理：通过DOMContentLoaded事件或把脚本放在<body>末尾，确保获取DOM元素时元素已存在。
• 现代IPC API使用：ipcMain.handle和ipcRenderer.invoke是Electron推荐的双向通信方式，避免旧API的弃用提示，同时支持请求-响应模式。
• 参数传递修正：无论是主进程还是渲染进程，IPC回调的第一个参数都是event对象，实际数据从第二个参数开始获取。

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