摘要：當一個實例被銷毀后，相應的渲染進程也會被終止。之所以命名為，主要是為了與主進程這個概念對應。部分在事件觸發后才能使用。當全部窗口關閉時退出。主進程接收到消息并處理之后，會返回處理結果。

簡介

Electron 是一個可以使用 Web 技術如 JavaScript、HTML 和 CSS 來創建跨平臺原生桌面應用的框架。借助 Electron，我們可以使用純 JavaScript 來調用豐富的原生 APIs。

Electron用 web 頁面作為它的 GUI，而不是綁定了 GUI 庫的 JavaScript。它結合了 Chromium、Node.js 和用于調用操作系統本地功能的 APIs（如打開文件窗口、通知、圖標等）。

現在已經有很多由 Electron 開發應用，比如 Atom、Insomnia、Visual Studio Code 等。查看更多使用 Electron 構建的項目可以訪問 [Apps Built on Electron
](https://electron.atom.io/apps/)

安裝

安裝 electron 之前，需要安裝 Node.js。如果沒有安裝，推薦使用 nvm 等 Node.js 版本管理工具進行安裝／

然后建議修改 electron 的源為國內源：

$ export ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/"

不然會出現如下錯誤：

Error: connect ETIMEDOUT 54.231.50.42:443
    at Object.exports._errnoException (util.js:1016:11)
    at exports._exceptionWithHostPort (util.js:1039:20)
    at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1138:14)

安裝 electron：

$ npm install electron -g

進程

Electron 的進程分為主進程和渲染進程。

主進程

在 electron 里面，運行 package.json 里面 main 腳本的進程成為主進程。主進程控制整個應用的生命周期，在主進程中可以創建 Web 形式的 GUI，而且整個 Node API 是內置其中。

渲染進程

每個 electron 的頁面都運行著自己的進程，稱為渲染進程。

主進程與渲染進程的聯系及區別

主進程使用 BrowserWindow 實例創建頁面。每個 BrowserWindow 實例都在自己的渲染進程里運行頁面。當一個 BrowserWindow 實例被銷毀后，相應的渲染進程也會被終止。

主進程管理所有頁面和與之對應的渲染進程。每個渲染進程都是相互獨立的，并且只關心他們自己的頁面。

在 electron 中，頁面不直接調用底層 APIs，而是通過主進程進行調用。所以如果你想在網頁里使用 GUI 操作，其對應的渲染進程必須與主進程進行通訊，請求主進程進行相關的 GUI 操作。

在 electron 中，主進程和渲染進程的通信主要有以下幾種方式：

ipcMain、ipcRender

Remote 模塊

進程通信將稍后詳細介紹。

打造第一個 Electron 應用

以下所有代碼可以在 https://github.com/nodejh/electron-quick-start 找到。

一個最簡單的 electron 應用目錄結構如下：

electron-demo/
├── package.json
├── main.js
└── index.html

package.json 與 Node.js 的完全一致，所以我們可以使用 npm init 來生成。然后將 "main": "index.js" 修改為 "main": "main.js"。之所以命名為 main.js，主要是為了與主進程這個概念對應。

main.js

創建 main.js 文件并添加如下代碼：

const electron = require("electron");

const {
  app, // 控制應用生命周期的模塊
  BrowserWindow, // 創建原生瀏覽器窗口的模塊
} = electron;

// 保持一個對于 window 對象的全局引用，如果不這樣做，
// 當 JavaScript 對象被垃圾回收， window 會被自動地關閉
let mainWindow;

function createWindow() {
  // 創建瀏覽器窗口。
  mainWindow = new BrowserWindow({width: 800, height: 600});

  // 加載應用的 index.html。
  // 這里使用的是 file 協議，加載當前目錄下的 index.html 文件。
  // 也可以使用 http 協議，如 mainWindow.loadURL("http://nodejh.com")。
  mainWindow.loadURL(`file://${__dirname}/index.html`);

  // 啟用開發工具。
  mainWindow.webContents.openDevTools();

  // 當 window 被關閉，這個事件會被觸發。
  mainWindow.on("closed", () => {
    // 取消引用 window 對象，如果你的應用支持多窗口的話，
    // 通常會把多個 window 對象存放在一個數組里面，
    // 與此同時，你應該刪除相應的元素。
    mainWindow = null;
  });
}

// Electron 會在初始化后并準備
// 創建瀏覽器窗口時，調用這個函數。
// 部分 API 在 ready 事件觸發后才能使用。
app.on("ready", createWindow);

// 當全部窗口關閉時退出。
app.on("window-all-closed", () => {
  // 在 macOS 上，除非用戶用 Cmd + Q 確定地退出，
  // 否則絕大部分應用及其菜單欄會保持激活。
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", () => {
  // 在 macOS 上，當點擊 dock 圖標并且該應用沒有打開的窗口時，
  // 絕大部分應用會重新創建一個窗口。
  if (mainWindow === null) {
    createWindow();
  }
});

關于 app 和 BrowserWindow 對象和實例的更多用法可參考 electron 的文檔：

app

BrowserWindow

index.html

然后編輯需要展示的 index.html：

  
    
    
    
  
  
    
Hello World!
    We are using Node.js
    
    and Electron
    
    
  

在這個例子中，我們顯示出了 electron 使用的 Node.js 版本和 electron 的版本。index.html 跟網頁的 HTML 一摸一樣，只是多了一些 electron 的全局對象。

運行

因為前面已經全局安裝了 electron，所以我們可以使用 electron 命令來運行項目。在 electron-demo/ 目錄里面運行下面的命令：

$ electron .

然后會彈出一個 electron 應用客戶端，如圖所示：

因為在主進程中啟用了開發模式 mainWindow.webContents.openDevTools()，所以默認啟動開發者工具。

如果是局部安裝的 electron，即 npm install --save electron，則可以運行下面的命令來啟動應用：

$ ./node_modules/.bin/electron .

進行通信

對于 electron 來說，主進程和渲染進程直接的通信是必不可少的。

前面提到過 electron 進程間的通信的方式主要有兩種，一種是用于發送消息的 ipcMain 和 ipcRenderer 模塊，一種用于 RPC 的 remote 模塊。

現在假設一個業務場景，用戶在頁面中輸入文本消息，渲染進程將消息發送給主進程，主進程處理后將處理結果返回給頁面。為了方便起見，主進程的處理就假設為翻轉文本。當然，這個功能在前端完全可以實現，這里只是為了演示進程通信。

ipcMain 和 ipcRenderer

首先在渲染進程中添加一個輸入框和一個按鈕，并實現點擊按鈕獲取輸入框的內容。然后使用 ipcRenderer 發送消息。主進程接收到消息并處理之后，會返回處理結果。所以渲染進程中還需要接收主進程的消息。

修改 index.html，添加下面的代碼：

  
  

  click me

接下來在主進程中接收渲染進程的消息，并進行處理（翻轉字符串），然后將處理結果發送給主進程。修改 main.js 如下：

//...

// 監聽渲染進程發送的消息
ipcMain.on("asynchronous-message", (event, arg) => {
  const reply = arg.split("").reverse().join("");
  console.log("reply: ", reply);
  // 發送消息到主進程
  event.sender.send("asynchronous-reply", reply);
});

然后重新運行項目。在頁面的輸入框內輸入字符，點擊按鈕，就能彈出如下的彈出框，說明渲染進程與主進程通信成功：

remote

remote 模塊提供了一種在渲染進程（網頁）和主進程之間進行進程間通訊（IPC）的簡便途徑。

使用 remote 模塊，我們可以很方便地調用主進程對象的方法，而不需要發送消息。

在 index.html 的