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

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

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

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

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

main.js是electron應(yīng)用的入口文件。主要用戶啟動(dòng)electron的界面。可以通過以下代碼來啟動(dòng)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();
  // 窗口關(guān)閉的監(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();
  }
});

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

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

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

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

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

那么渲染進(jìn)程需要給主進(jìn)程發(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)聽過程。 主進(jìn)程設(shè)置好監(jiān)聽，渲染進(jìn)程通過ipcRenderer.send()發(fā)送消息。主進(jìn)程獲得消息后，通過event.sender.send()返回信息。返回信息也是異步的，所以渲染進(jìn)程也設(shè)置了監(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";
});

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

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

{
  // 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的端口。
第二步，設(shè)置VS Code項(xiàng)目的調(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)試主進(jìn)程。
首先啟動(dòng)electron項(xiàng)目。
因?yàn)樯厦媾渲昧藅ask，所以可以使用VS Code的task進(jìn)行啟動(dòng)。按下快捷鍵shift + command + p可以啟動(dòng)命令，輸入task electron命令，回車，就可以運(yùn)行electron的task進(jìn)行項(xiàng)目的啟動(dòng)。
項(xiàng)目啟動(dòng)后，再開始設(shè)置主進(jìn)程代碼的斷點(diǎn)。在VS Code的調(diào)試界面中設(shè)置斷點(diǎn)，并點(diǎn)擊運(yùn)行。這個(gè)時(shí)候，操作啟動(dòng)的electron應(yīng)用，當(dāng)運(yùn)行到斷點(diǎn)所在代碼時(shí)，就可以觸發(fā)斷點(diǎn)調(diào)試。

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

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

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

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