場景

用HTML和CSS和JS構(gòu)建跨平臺桌面應(yīng)用程序的開源庫Electron的介紹以及搭建HelloWorld：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106413828

Electron怎樣進行渲染進程調(diào)試和使用瀏覽器和VSCode進行調(diào)試：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106414541

在上面搭建好項目以及知道怎樣進行調(diào)試后，那么Electron怎樣實現(xiàn)主進程與渲染進程之間的通信。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關(guān)注公眾號
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費下載。

實現(xiàn)

ipcMain

從主進程到呈現(xiàn)程序進程異步通信。

ipcMain模塊是EventEmitter類的一個實例。在主進程中使用時，它處理從渲染器進程（網(wǎng)頁）發(fā)送的異步和同步消息。從渲染器發(fā)送的消息將發(fā)送到此模塊。

ipcRenderer

從呈現(xiàn)程序進程到主進程異步通信。

ipcRenderer模塊是EventEmitter類的一個實例。它提供了一些方法，因此您可以將渲染進程（網(wǎng)頁）中的同步和異步消息發(fā)送到主進程。您還可以收到主流程的回復(fù)。

渲染進程向主進程通信，主進程收到數(shù)據(jù)并回應(yīng)，渲染進程接收回應(yīng)

打開主進程main.js,首先引入ipcMain

const {app, BrowserWindow,ipcMain} = require('electron')

然后通過ipcMain.on注冊事件

ipcMain.on("send-message-to-main",(event,args)=>{console.log("主進程接受到的數(shù)據(jù)是:",args);event.reply("send-message-to-renderer","這是來自主進程的問候"); })

第一個參數(shù)是事件名，自己定義。

然后通過args接收渲染進程傳遞的參數(shù)。

通過event.reply回應(yīng)一個事件和數(shù)據(jù)給渲染進程。

然后打開渲染進程renderer.js,引入ipcRenderer

const {ipcRenderer} = require("electron");

然后在index.html中新建一個button并設(shè)置一個id

<div><button id="sendToMain">發(fā)送信息給主進程</button> </div>

然后在renderer.js中通過id獲取button并設(shè)置點擊事件

var btnSendToMain=document.getElementById('sendToMain'); btnSendToMain.onclick = SendToMain;

在點擊事件中通過ipcRender.sender向主進程發(fā)送消息

function SendToMain() {ipcRenderer.send("send-message-to-main","這是來自渲染進程的數(shù)據(jù)：公眾號：霸道的程序猿"); }

這里發(fā)送數(shù)據(jù)時的第一個參數(shù)要與上面主進程的on里面的第一個參數(shù)一樣。

然后在renderer.js中通過ipcRenderer.on接收主進程的響應(yīng)的事件和數(shù)據(jù)。

ipcRenderer.on("send-message-to-renderer",(event,args)=>{console.log("渲染進程收到的數(shù)據(jù):",args); })

其中第一個參數(shù)要與上面主進程reply里面的參數(shù)一樣。

然后調(diào)試運行項目，打開調(diào)試頁面。點擊按鈕

?

此時打查看主進程的控制臺輸出

?

主進程主動和渲染進程通信

打開主進程main.js,設(shè)置一個5秒的延遲，然后通過mainWindow去實現(xiàn)

? setTimeout(()=>{mainWindow.webContents.send("send-message-to-renderer","我是主進程，主動和你通信");},5000);

這里的第一個參數(shù)send-message-to-renderer要與渲染進程中

ipcRenderer.on("send-message-to-renderer",(event,args)=>{console.log("渲染進程收到的數(shù)據(jù):",args); })

所綁定的事件名稱相對應(yīng)。

調(diào)試運行項目打開調(diào)試頁面，等待5秒。

?

?

?

?

?

總結(jié)

以上是生活随笔為你收集整理的Electron中通过ipcMain和ipcRender实现主进程和渲染进程之间的相互通信的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。