Electron 程序間通訊

運作機制：

主程序

處理原生應用邏輯

main腳本的程序被稱為主程序，一個Electron應用總是有且隻有一個主程序

職責

• 建立渲染程序(可多個)
• 控制應用生命周期 (啟動、退出app以及對app的一些事件監聽)
• 調用系統底層功能、調用原生資源

可調用接口

• NodeJS api
• Electron提供的主程序api(包括一些系統功能和Electron附加功能)

渲染程序

負責頁面渲染

由于Electron使用了Chromium來展示Web頁面，是以Chromium的多程序架構也被使用到。每個Electron中的Web頁面運作在它自己的渲染程序中。

主程序使用BrowserWindow執行個體建立頁面。每個BrowerWindow執行個體都是在自己的渲染程序裡運作頁面。當一個BrowserWindow執行個體被銷毀後。相應的渲染程序也會被終止。

渲染程序就是一個浏覽器視窗，它能存在多個并且互相獨立，不過和浏覽器不同的是，它能調用Node API

職責

• 用HTML和CSS渲染界面
• 用JS做界面互動

可調用接口

• DOM API
• NodeJS API
• Electron提供的渲染程序API

程序間通訊：

官方文檔

主程序收發資訊

詳細參考ipcMain

• 主程序接收渲染程序發送的資訊

ipcMain.on('message',(e,msg)=>{
    console.log(msg);
});
           

• 主程序（主視窗）發送資訊給渲染程序

mainWindow.webContents.send('message', { time: new Date() });
           

渲染程序收發資訊

可通過ipcRenderer發送或接收

• 渲染程序接收主程序發送的資訊

ipcRenderer.on('message', (event, text) => {
  console.log(text);
});
           

• 渲染程序發送資訊給主程序

ipcRenderer.send('message', { name: 'katte' })
           

remote子產品：

參考官方提供remote

• 在渲染程序中建立其他視窗(渲染程序)

本來新的渲染程序隻有主程序才可以建立，不過有了remote子產品 我們也可以在一個渲染程序中建立另一個渲染程序；

const {BrowserWindow} = require('electron').remote;
let wind = new BrowserWindow({
    width:800,
    height:600
});
win.loadUrl('https://github.com');
           

注意：官方還說了一些不可用的場景，和remote的生命周期；

個人了解

官方雖然提供了2種方式來實作主程序和渲染程序的通訊，但是我覺得還是有它們不同的應用場景的作為一個剛接觸electron不久的小白，大膽總結一下

• 傳遞資訊直接用ipc模型
• 需要主程序處理的用remote

更多精彩内容歡迎關注公衆号：Electron，每日更新技術幹貨！