Electron应用仅显示Hello World，exchangeData数据无法展示求助

1. 确保主进程正确发送数据 #

主进程（main.js）需要通过IPC机制将exchangeData传递给渲染进程，核心是用webContents.send方法，且要确保发送时机在页面加载完成后：

// main.js 示例代码
const { app, BrowserWindow } = require('electron');
const path = require('path');
let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // 新手可先开启该选项简化调试，正式环境建议用preload脚本
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  mainWindow.loadFile('index.html');

  // 模拟生成数据并在页面加载完成后发送
  const exchangeData = "1000c,900c";
  mainWindow.webContents.on('did-finish-load', () => {
    mainWindow.webContents.send('exchange-data', exchangeData);
  });
}

app.whenReady().then(createWindow);

2. 渲染进程需监听并更新DOM #

渲染进程（index.html）要监听主进程发来的IPC事件，拿到数据后更新页面元素：

<!-- index.html 示例代码 -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Electron App</title>
</head>
<body>
  <h1>Hello World!</h1>
  <!-- 用于展示数据的容器 -->
  <div id="data-container"></div>

  <script>
    const { ipcRenderer } = require('electron');
    // 监听主进程发送的数据事件
    ipcRenderer.on('exchange-data', (event, data) => {
      // 将数据插入页面
      document.getElementById('data-container').textContent = `Exchange Data: ${data}`;
    });
  </script>
</body>
</html>

3. 排查常见通信坑 #

• 发送时机错误：如果在页面未加载完成时发送数据，渲染进程还没注册监听，会导致数据丢失，必须用did-finish-load事件触发发送。
• 权限配置问题：若开启Electron默认的contextIsolation: true，不能直接在渲染进程中require('electron')，需用preload脚本暴露IPC接口：

  // preload.js
  const { contextBridge, ipcRenderer } = require('electron');
  contextBridge.exposeInMainWorld('electronAPI', {
    onExchangeData: (callback) => ipcRenderer.on('exchange-data', callback)
  });
  

  主进程配置preload：

  webPreferences: {
    preload: path.join(__dirname, 'preload.js'),
    contextIsolation: true,
    nodeIntegration: false
  }
  

  渲染进程调用方式：

  <script>
    window.electronAPI.onExchangeData((event, data) => {
      document.getElementById('data-container').textContent = `Exchange Data: ${data}`;
    });
  </script>
  

• 控制台查错：打开开发者工具（Ctrl+Shift+I），查看Console面板是否有ipcRenderer未定义、元素不存在等报错，快速定位问题。

4. 验证数据流转 #

在主进程中添加console.log(exchangeData)确认数据已生成，在渲染进程的监听回调中添加console.log(data)确认数据已接收，逐步排查数据是否在流转中丢失。

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