0037. 使用 ipcRenderer.send、ipcMain.on 实现从渲染进程到主进程的单向 IPC 通信
1. 📝 概述
- 通过一个简单的 demo 来了解
ipcRenderer.send、ipcMain.on的一种基本用法。
2. 💻 demos.1 - 使用 ipcRenderer.send、ipcMain.on 实现从渲染进程到主进程的单向 IPC 通信
js
const { app, BrowserWindow, ipcMain } = require('electron')
let win
function createWindow() {
win = new BrowserWindow({
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
},
})
win.webContents.openDevTools()
win.loadFile('./index.html')
}
function handleIPC() {
ipcMain.on('message-from-renderer', (event, ...args) => {
console.log('主进程收到了来自渲染进程的消息')
console.log('渲染进程在发送 message-from-renderer 请求时，传递的参数如下：')
console.log(...args)
})
}
app.on('ready', () => {
createWindow()
handleIPC()
})html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>24.02.24</title>
</head>
<body>
<h1>renderer process</h1>
<button id="btn">ipcRenderer.send('message-from-renderer', 1, 2, 3)</button>
<script>
const { ipcRenderer } = require('electron')
document.getElementById('btn').addEventListener('click', () => {
console.log(
'按钮被点击了，向主进程发起 message-from-renderer 请求，并传入请求参数 1、2、3'
)
ipcRenderer.send('message-from-renderer', 1, 2, 3)
})
</script>
</body>
</html>- 最终效果
- 渲染进程使用 ipcRenderer.send 发送消息给主进程，主进程通过 ipcMain.on 对渲染进程发送过来的消息进行监听，实现【渲染进程】到【主进程】的【单向 IPC 通信】。
