文章目錄

• • Electron API
  • 使用 Node.js 的 API
  • 進程通信
  • 渲染進程向主進程通信
  • 主進程向渲染進程通信
  • 通信原理
  • remote
  • 渲染進程間通信
  • 渲染進程數據共享

Electron API

渲染進程和主進程分別可調用的 Electron API。所有Electron的API都被指派給一種進程類型。 許多 API 只能被用于主進程中，有些API又只能被用于渲染進程，又有一些主進程和渲染進程中都可以使用。

你可以通過如下方式獲取Electron API

const { BrowserWindow, ... } = require('electron')

下面是一些常用的Electron API：

在后面會選擇其中常用的模塊進行詳細介紹。

使用 Node.js 的 API

可以同時在Electron的主進程和渲染進程使用Node.js API，)所有在Node.js可以使用的API，在Electron中同樣可以使用。

import {shell} from 'electron'; import os from 'os';document.getElementById('btn').addEventListener('click', () => { shell.showItemInFolder(os.homedir()); })

有一個非常重要的提示: 原生Node.js模塊 (即指，需要編譯源碼過后才能被使用的模塊) 需要在編譯后才能和Electron一起使用。

進程通信

主進程和渲染進程雖然擁有不同的職責，然是他們也需要相互協作，互相通訊。

例如：
在web頁面管理原生GUI資源是很危險的，會很容易泄露資源。所以在web頁面，不允許直接調用原生GUI相關的API。渲染進程如果想要進行原生的GUI操作，就必須和主進程通訊，請求主進程來完成這些操作。

渲染進程向主進程通信

ipcRenderer 是一個 EventEmitter 的實例。 你可以使用它提供的一些方法，從渲染進程發送同步或異步的消息到主進程。 也可以接收主進程回復的消息。

在渲染進程引入ipcRenderer：

import { ipcRenderer } from 'electron';

異步發送：

通過 channel 發送同步消息到主進程，可以攜帶任意參數。

在內部，參數會被序列化為 JSON，因此參數對象上的函數和原型鏈不會被發送。

ipcRenderer.send('async-render', '我是來自渲染進程的異步消息');

同步發送：

const msg = ipcRenderer.sendSync('sync-render', '我是來自渲染進程的同步消息');

注意: 發送同步消息將會阻塞整個渲染進程，直到收到主進程的響應。

主進程監聽消息：

ipcMain模塊是EventEmitter類的一個實例。 當在主進程中使用時，它處理從渲染器進程（網頁）發送出來的異步和同步信息。 從渲染器進程發送的消息將被發送到該模塊。

ipcMain.on：監聽 channel，當接收到新的消息時 listener 會以 listener(event, args…) 的形式被調用。

ipcMain.on('sync-render', (event, data) => {console.log(data);});

主進程向渲染進程通信

在主進程中可以通過BrowserWindow的webContents向渲染進程發送消息，所以，在發送消息前你必須先找到對應渲染進程的BrowserWindow對象。：

const mainWindow = BrowserWindow.fromId(global.mainId);mainWindow.webContents.send('main-msg', `ConardLi]`)

根據消息來源發送：

在ipcMain接受消息的回調函數中，通過第一個參數event的屬性sender可以拿到消息來源渲染進程的webContents對象，我們可以直接用此對象回應消息。

ipcMain.on('sync-render', (event, data) => {console.log(data);event.sender.send('main-msg', '主進程收到了渲染進程的【異步】消息！')});

渲染進程監聽：

ipcRenderer.on:監聽 channel, 當新消息到達，將通過listener(event, args…)調用 listener。

ipcRenderer.on('main-msg', (event, msg) => {console.log(msg); })

通信原理

ipcMain 和 ipcRenderer 都是 EventEmitter 類的一個實例。EventEmitter 類是 NodeJS 事件的基礎，它由 NodeJS 中的 events 模塊導出。

EventEmitter 的核心就是事件觸發與事件監聽器功能的封裝。它實現了事件模型需要的接口， 包括 addListener，removeListener, emit 及其它工具方法. 同原生 JavaScript 事件類似， 采用了發布/訂閱(觀察者)的方式， 使用內部 _events 列表來記錄注冊的事件處理器。

我們通過 ipcMain和ipcRenderer 的 on、send 進行監聽和發送消息都是 EventEmitter 定義的相關接口。

remote

remote 模塊為渲染進程（web頁面）和主進程通信（IPC）提供了一種簡單方法。 使用 remote 模塊, 你可以調用 main 進程對象的方法, 而不必顯式發送進程間消息, 類似于 Java 的 RMI 。

import { remote } from 'electron';remote.dialog.showErrorBox('主進程才有的dialog模塊', '我是使用remote調用的')

但實際上，我們在調用遠程對象的方法、函數或者通過遠程構造函數創建一個新的對象，實際上都是在發送一個同步的進程間消息。

在上面通過 remote 模塊調用 dialog 的例子里。我們在渲染進程中創建的 dialog 對象其實并不在我們的渲染進程中，它只是讓主進程創建了一個 dialog 對象，并返回了這個相對應的遠程對象給了渲染進程。

渲染進程間通信

Electron并沒有提供渲染進程之間相互通信的方式，我們可以在主進程中建立一個消息中轉站。

渲染進程之間通信首先發送消息到主進程，主進程的中轉站接收到消息后根據條件進行分發。

渲染進程數據共享

在兩個渲染進程間共享數據最簡單的方法是使用瀏覽器中已經實現的HTML5 API。 其中比較好的方案是用Storage API， localStorage，sessionStorage 或者 IndexedDB。

就像在瀏覽器中使用一樣，這種存儲相當于在應用程序中永久存儲了一部分數據。有時你并不需要這樣的存儲，只需要在當前應用程序的生命周期內進行一些數據的共享。這時你可以用 Electron 內的 IPC 機制實現。

將數據存在主進程的某個全局變量中，然后在多個渲染進程中使用 remote 模塊來訪問它。

在主進程中初始化全局變量：

global.mainId = ...; global.device = {...}; global.__dirname = __dirname; global.myField = { name: 'ConardLi' };

在渲染進程中讀取：

import { ipcRenderer, remote } from 'electron';const { getGlobal } = remote;const mainId = getGlobal('mainId') const dirname = getGlobal('__dirname') const deviecMac = getGlobal('device').mac;

在渲染進程中改變：

getGlobal('myField').name = 'code秘密花園';

多個渲染進程共享同一個主進程的全局變量，這樣即可達到渲染進程數據共享和傳遞的效果。

總結

以上是生活随笔為你收集整理的Electron基础的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。