共计 1832 个字符，预计需要花费 5 分钟才能阅读完成。
思路
- 主过程监听一个事件
- 渲染过程触发事件向主过程发送音讯
- 主过程收到渲染过程的音讯，给予渲染过程以响应
- 渲染过程收到主过程的响应
代码实现
主过程监听一个事件, 并且响应渲染过程
const {ipcMain} = require("electron")
ipcMain.on("sendMessage", (event, args) => {console.log("收到渲染过程的音讯", args);
win.webContents.send("receiveMessage", "我是主过程已收到音讯" + args); // 响应渲染过程
});渲染过程触发主过程事件，并且监听主过程响应事件
<body>
<button id="btn"> 发送告诉 </button>
</body>
<script>
const {ipcRenderer} = require("electron");
const oBtn = document.getElementById("btn");
oBtn.onclick = function () {ipcRenderer.send("sendMessage", "我是渲染过程");
};
ipcRenderer.on('receiveMessage', (event, args)=>{console.log('接管到主过程的音讯',args)
})
</script>留神
- 渲染过程须要汇合 node 过程，否者会报
Uncaught ReferenceError: require is not defined谬误
const win = new BrowserWindow({
// fullscreen: true,
// transparent: true, // 窗口通明
// frame: true, // 无边框
// .......
webPreferences: {nodeIntegration: true, // 汇合 node 过程},
});- 主过程 console 打出的中文乱码解决, start 的时候加上
chcp 65001
"scripts": {"start": "chcp 65001 && electron ."},残缺代码
- 主过程
// index.js
const path = require("path");
const {app, BrowserWindow, ipcMain} = require("electron");
function createWindow() {
// 创立浏览器窗口
const win = new BrowserWindow({
// fullscreen: true,
// transparent: true, // 窗口通明
// frame: true, // 无边框
webPreferences: {nodeIntegration: true, // 汇合 node 过程},
});
win.loadFile("./app.html"); // 渲染过程网页
ipcMain.on("sendMessage", (event, args) => {console.log("收到渲染过程的音讯", args);
win.webContents.send("receiveMessage", "我是主过程已收到音讯" + args);
});
win.webContents.openDevTools(); // 开启调试}
app.whenReady().then(createWindow);- 渲染过程
<!--app.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button id="btn"> 发送告诉 </button>
</body>
<script>
const {ipcRenderer} = require("electron");
const oBtn = document.getElementById("btn");
oBtn.onclick = function () {ipcRenderer.send("sendMessage", "我是渲染过程");
};
ipcRenderer.on('receiveMessage', (event, args)=>{console.log('接管到主过程的音讯',args)
})
</script>
</html>效果图
正文完
