20、electron 主进程与渲染进程之间的通讯ipcMain

1、主进程代码 
 1 let electron = require('electron')
 2 const {ipcMain,BrowserWindow} = require('electron')
 3 
 4 let app = electron.app   //引用APP
 5 let mainWindow = null;  //声明要打开的主窗口
 6 
 7 app.on('ready',()=>{
 8     mainWindow = new BrowserWindow({
 9         width:800,
10         height:800,
11         webPreferences:
12         {
13             nodeIntegration:true,
14             contextIsolation:false,
15             enableRemoteModule: true,  //允许使用remote模块
16         }
17     });
18 
19     require("@electron/remote/main").initialize();  //初始化remote模块
20     require("@electron/remote/main").enable(mainWindow.webContents);  //
21 
22     
23     mainWindow.loadFile('ipc通讯.html');
24 
25     setTimeout(() => {
26         mainWindow.webContents.send("main-to-render-message","启动完成了");
27     }, 3000);
28 
29     
30     mainWindow.on('closed',()=>{
31         mainWindow = null;   //关闭窗口释放资源
32     });
33 
34 });
35 
36 app.on("will-quit",()=>{
37     globalShortcut.unregister("ctrl+y");   //取消注册快捷键
38     globalShortcut.unregisterAll();
39 });
40 
41 // 接收从渲染进程发送到主进程的消息
42 ipcMain.on("render-to-main-message",(event,message)=>{
43     // 在控制台上打印一下
44     console.log(`receive message from render: ${message}`);
45  
46     // 回复消息
47     event.reply("main-to-render-message", `来自主进程：我收到了你的消息“${message}”`);
48 
49 });
50 
51 // 接收同步消息
52 ipcMain.on("render-to-main-message-sync", (event, message) => {
53  
54     // 控制台打印一下知道来了
55     console.log(`receive sync message from render: ${message}`);
56  
57     // 回复渲染进程的同步消息
58     event.returnValue = `来自主进程：我收到了你的消息“${message}”`;
59 });
View Code

2、渲染进程代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>Document</title>
 8 </head>
 9 <body>
10     <input type="text" id="message">
11     <button onclick="sendMessageToMainProcess()">发送消息给主进程</button>
12 
13     <script>
14         const electron = require("electron");
15         
16         // 接收主进程发来的消息
17         // 第一个参数是约定的事件的名称
18         // 第二个参数是处理事件的callback
19         electron.ipcRenderer.on("main-to-render-message", (event, message) => {
20             alert(message);
21         });
22 
23         // 向主进程发送消息
24         function sendMessageToMainProcess() {
25             const message = document.getElementById("message").value;
26 
27             // 第一个参数是约定的事件的名称，主进程要监听这个事件
28             // 第二个及之后的参数是要发送的具体的消息
29             electron.ipcRenderer.send("render-to-main-message", message);
30 
31             // 发送同步消息
32             const replayMessage = electron.ipcRenderer.sendSync("render-to-main-message-sync", message);
33             alert(replayMessage);
34         }
35     </script>
36 </body>
37 </html>
View Code

 

参考：https://www.electronjs.org/zh/docs/latest/api/ipc-main

https://www.cnblogs.com/cc11001100/p/14290450.html

 

posted @ 2022-12-20 10:04  ziff123  阅读(46)  评论(0)  编辑  收藏  举报