electron发送消息给渲染进程

源码资源网

在Electron中，主进程（main process）可以通过webContents对象向渲染进程（renderer process）发送消息。以下是主进程向渲染进程发送消息的示例代码：

主进程（main.js）:

1. const { app, BrowserWindow } = require('electron');
   
2. 
   
3. function createWindow() {
   
4.   // 创建浏览器窗口
   
5.   const win = new BrowserWindow({
   
6.     width: 800,
   
7.     height: 600,
   
8.     webPreferences: {
   
9.       nodeIntegration: true,
   
10.       contextIsolation: false,
    
11.     },
    
12.   });
    
13. 
    
14.   // 加载渲染进程的index.html文件
    
15.   win.loadFile('index.html');
    
16. 
    
17.   // 向渲染进程发送消息
    
18.   win.webContents.on('did-finish-load', () => {
    
19.     win.webContents.send('main-process-message', 'Hello from main process');
    
20.   });
    
21. }
    
22. 
    
23. app.whenReady().then(createWindow);

复制代码

渲染进程（index.js，假设你已经在index.html文件中包含了该脚本）:

1. const { ipcRenderer } = require('electron');
   
2. 
   
3. // 监听主进程发送的消息
   
4. ipcRenderer.on('main-process-message', (event, message) => {
   
5.   console.log(message); // 输出: Hello from main process
   
6. });

复制代码

渲染进程还需要确保在渲染HTML时，Electron的preload脚本被正确设置，以允许ipcRenderer模块在渲染进程中使用。如果你使用了nodeIntegration: true，则不需要preload脚本。如果没有，你需要创建一个preload.js文件并在BrowserWindow的webPreferences中指定它：

1. const { contextBridge, ipcRenderer } = require('electron');
   
2. 
   
3. contextBridge.exposeInMainWorld('electron', {
   
4.   sendMessage: (channel, args) => ipcRenderer.send(channel, args),
   
5.   receiveMessage: (channel, callback) => ipcRenderer.on(channel, (event, ...args) => callback(...args)),
   
6. });

复制代码

然后在创建BrowserWindow时，使用webPreferences的preload属性来加载这个脚本：

1. win.webContents.openDevTools();

复制代码