|
electron 主进程中弹出窗口中接收渲染进程消息
在 Electron 中,主进程和渲染进程之间的通信可以通过 IPC(Inter-Process Communication)来实现。你可以使用 `ipcMain` 和 `ipcRenderer` 模块来发送和接收消息。以下是一个示例,展示了如何在主进程中弹出一个窗口,并接收来自渲染进程的消息。
### 1. 主进程代码(main.js)
- const { app, BrowserWindow, ipcMain } = require('electron');
- function createWindow() {
- const mainWindow = new BrowserWindow({
- width: 800,
- height: 600,
- webPreferences: {
- nodeIntegration: true,
- contextIsolation: false, // 如果使用 Electron 12 及以上版本,建议使用 contextIsolation: true,并通过 preload 脚本来暴露 API。
- },
- });
- mainWindow.loadFile('index.html');
- // 监听来自渲染进程的消息
- ipcMain.on('message-from-renderer', (event, arg) => {
- console.log('Received message from renderer:', arg);
- // 可以选择回复渲染进程
- event.reply('message-from-main', 'Hello from Main Process!');
- });
- }
- // 当 Electron 完成初始化并准备创建浏览器窗口时调用
- app.whenReady().then(createWindow);
- // 处理窗口关闭
- app.on('window-all-closed', () => {
- if (process.platform !== 'darwin') {
- app.quit();
- }
- });
- app.on('activate', () => {
- if (BrowserWindow.getAllWindows().length === 0) {
- createWindow();
- }
- });
复制代码
### 2. 渲染进程代码(index.html)
- html
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Electron IPC Example</title>
- </head>
- <body>
- <h1>Electron IPC Example</h1>
- <button id="sendMessage">Send Message to Main</button>
- <script>
- const { ipcRenderer } = require('electron');
- document.getElementById('sendMessage').addEventListener('click', () => {
- // 发送消息到主进程
- ipcRenderer.send('message-from-renderer', 'Hello from Renderer!');
- });
- // 监听来自主进程的回复
- ipcRenderer.on('message-from-main', (event, arg) => {
- console.log('Received message from main:', arg);
- });
- </script>
- </body>
- </html>
复制代码
### 说明
1. **主进程**:
- 使用 `ipcMain.on` 监听来自渲染进程的消息。
- 可以使用 `event.reply` 向发送消息的渲染进程回复消息。
2. **渲染进程**:
- 使用 `ipcRenderer.send` 发送消息到主进程。
- 使用 `ipcRenderer.on` 监听主进程的回复。
通过这种方式,你可以在主进程中弹出窗口并接收来自渲染进程的消息。
|
|