摘要：目前類似的工具有，等。在渲染進程中，直接調(diào)用原生的接口是十分危險的。這里介紹一種，通過和對象，以消息的方式進行通信。主進程獲得消息后，通過返回信息。另外，還提供了一種同步的消息傳遞方式。打包完成功能代碼后，我們需要將代碼打成可運行的包。

目前，使用前端技術開發(fā)桌面應用已經(jīng)越來越成熟，這使得前端同學也可以參與桌面應用的開發(fā)。目前類似的工具有electron，NW.js等。這里我們著重介紹下electron。

electron是基于Node.js和Chromium做的一個工具。electron是的可以使用前端技術實現(xiàn)桌面開發(fā)，并且支持多平臺運行。下面來講下如何使用electron開發(fā)桌面app。

一個最簡單的electron項目包含三個文件, package.json, index.html, main.js。
package.json是Node.js項目的配置文件，index.html是桌面應用的界面頁面，main.js是應用的啟動入口文件。其中，核心的文件是inde.html和main.js，下面來講下這兩個文件的細節(jié)。
index.html是應用的展示界面，代碼如下：

  
    
    
  
  
    
Hello World!
    We are using node ,
    Chrome ,
    and Electron .
  

main.js是electron應用的入口文件。主要用戶啟動electron的界面。可以通過以下代碼來啟動electron界面。

const electron = require("electron");
const { app } = electron;
const { BrowserWindow } = electron;
let win;
function createWindow() {
  // 創(chuàng)建窗口并加載頁面
  win = new BrowserWindow({width: 800, height: 600});
  win.loadURL(`file://${__dirname}/index.html`);

  // 打開窗口的調(diào)試工具
  win.webContents.openDevTools();
  // 窗口關閉的監(jiān)聽
  win.on("closed", () => {
    win = null;
  });
}

app.on("ready", createWindow);
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", () => {
  if (win === null) {
    createWindow();
  }
});

上面的代碼就實現(xiàn)了一個hello world的electron應用。代碼寫完后，需要運行代碼看看效果，這個時候需要使用electron-prubuilt來運行代碼。
首先，我們需要安裝electron-prubuilt包。可以通過命令npm install --saved-dev electron-prebuilt進行安裝。安裝完成后，項目本地就可以使用electron命令，直接運行命令electron .就可以看到hello world的效果。或者可以在package.json中設置scripts，方便項目的運行。
具體代碼可以去這里獲取。

electron中，由package.json中的main.js運行出來的進程為主進程(Main Process)。主進程用于創(chuàng)建GUI界面以便web頁面的展示。electron由Chromium負責頁面的顯示，所以當創(chuàng)建一個頁面時，就會對應的創(chuàng)建渲染進程(Renderer Process)。
主進程通過創(chuàng)建BrowserWindow對象來創(chuàng)建web顯示頁面，BrowserWindow運行在他自己的渲染進程中。當BrowserWindow被銷毀時，對應的渲染進程也會終止。

在渲染進程中，直接調(diào)用原生的GUI接口是十分危險的。如果你想在渲染進程中使用原生的GUI的功能，需要讓渲染進程與主進程進行通信，再由主進程去調(diào)用對應接口。那么主進程和渲染進程是如何進行通信的呢？
electron中，主進程與渲染進程的通信存在多種方法。這里介紹一種，通過ipcMain和ipcRenderer對象，以消息的方式進行通信。
先來看下主進程如何向渲染進程發(fā)信息。
首先，渲染進程通過接口ipcRenderer.on()來監(jiān)聽主進程的消息信息。主進程通過接口BrowserWindow.webContents.send()向所有渲染進程發(fā)送消息。相關代碼如下：

// renderer.js
// 引入ipcRenderer對象
const electron = require("electron");
const ipcRenderer = electron.ipcRenderer;
// 設置監(jiān)聽
ipcRenderer.on("main-process-messages", (event, message) => {
  console.log("message from Main Process: " , message);  // Prints Main Process Message.
});

// main.js
// 當頁面加載完成時，會觸發(fā)`did-finish-load`事件。
win.webContents.on("did-finish-load", () => {
  win.webContents.send("main-process-messages", "webContents event "did-finish-load" called");
});

那么渲染進程需要給主進程發(fā)生消息該如何做呢？

// renderer.js
ipcRenderer.on("asynchronous-reply", (event, arg) => {
  console.log("asynchronous-reply: %O %O", event, arg);
});
ipcRenderer.send("asynchronous-message", "hello");

// main.js
ipcMain.on("asynchronous-message", (event, arg) => {
  // 返回消息
  event.sender.send("asynchronous-reply", "ok");
});

上面的代碼是異步監(jiān)聽過程。 主進程設置好監(jiān)聽，渲染進程通過ipcRenderer.send()發(fā)送消息。主進程獲得消息后，通過event.sender.send()返回信息。返回信息也是異步的，所以渲染進程也設置了監(jiān)聽。
另外，electron還提供了一種同步的消息傳遞方式。代碼如下:

// renderer.js
console.log("synchronous-message: ", ipcRenderer.sendSync("synchronous-message", "hello"));

// main.js
ipcMain.on("synchronous-message", (event, arg) => {
  event.returnValue = "ok";
});

主進程與渲染進程相互傳遞數(shù)據(jù)的例子可以去這里獲取。

一個app的開發(fā)過程，會用到代碼調(diào)試，那么electron應該如何進行調(diào)試呢？
electron中，渲染進程因為是Chromium的頁面，所以可以使用DevTools進行調(diào)試。啟動DevTools的方式是：在main.js中，創(chuàng)建好BrowserWindow后，通過接口BrowserWindow.webContents.openDevTools();來打開頁面的DevTools調(diào)試工具，進行頁面調(diào)試，具體的調(diào)試方法和使用Chrome進行調(diào)試一致。
主進程是基于Node.js的，所以electron的調(diào)試和Node.js類似。這里說下在VS Code中如何進行electron主進程的調(diào)試。
第一步，設置VS Code的tasks，用于啟動electron。相關配置如下:

{
  // See https://go.microsoft.com/fwlink/?LinkId=733558
  // for the documentation about the tasks.json format
  "version": "0.1.0",
  "command": "electron",
  "isShellCommand": true,
  "showOutput": "always",
  "suppressTaskName": true,
  "args": ["--debug=5858", "."]
}

其中，--debug=5858是用于調(diào)試Node.js的端口。
第二步，設置VS Code項目的調(diào)試配置。可以生成launch.json，內(nèi)容如下：

{
  "version": "0.2.0",
  "configurations": [ {
      "name": "Attach",
      "type": "node",
      "address": "localhost",
      "port": 5858,
      "request": "attach"
    }
  ]
}

其中的port:5858的端口信息需要和上面的--debug=5858端口保持一致。
配置完成后，便可以開始調(diào)試主進程。
首先啟動electron項目。
因為上面配置了task，所以可以使用VS Code的task進行啟動。按下快捷鍵shift + command + p可以啟動命令，輸入task electron命令，回車，就可以運行electron的task進行項目的啟動。
項目啟動后，再開始設置主進程代碼的斷點。在VS Code的調(diào)試界面中設置斷點，并點擊運行。這個時候，操作啟動的electron應用，當運行到斷點所在代碼時，就可以觸發(fā)斷點調(diào)試。

electron除了使用前端技術實現(xiàn)界面展示的功能外，還提供了大量的桌面環(huán)境接口。比如支持Notification，Jump List, dock menu等。具體支持哪些桌面接口以及如何使用，可以去http://electron.atom.io/docs/... 了解。

完成功能代碼后，我們需要將代碼打成可運行的包。可以使用electron-packager來進行應用打包，electron-packager支持windows, Mac, linux等系統(tǒng)。具體介紹可以去https://github.com/electron-u... 了解。
打包的步驟很簡單，只需要兩步：

全局安裝Node.js模塊electron-packager。

運行命令： electron-packager --platform= --arch= [optional flags...]。 其中platform可以取darwin, linux, mas, win324個值；arch可以取ia32, x64兩個值。
需要注意，打包后，代碼中的所有路徑都必須使用絕對路徑，通過${__dirname}獲得app的根路徑，然后拼接成絕對路徑。