一. 什么是Electron? 它和NW.js的區別是什么？
Electron是GitHub開發的桌面應用開發框架，它支持使用HTML、CSS、JavaScript來構建跨平台的桌面應用。
Electron和NW.js(NW.js是什么可以百度下)的區別是：
1. 整合Chromium 和 Node.js的方式不同。
在NW.js中，Chromium是直接被打補丁打進去的。因此 Node.js 和 Chromium 共享了同一個javascript上下文。
在Electron中，它不是以補丁的形式將Chromium整合進去的。而是通過Chromium的Content API 以及使用了 Node.js的node_bindings。
在NW.js中它維護一個共享的javascript上下文。而在 Electron中它有多個獨立的javascript上下文（比如：它有一個后端的main進程，作用是負責啟動運行應用的視窗，另一個是renderer進程，它是負責具體的應用視窗）。
2. 入口文件不同。
NW.js 一般是使用HTML作為入口文件，而Electron使用的是javascript作為入口文件。Electron將加載的應用視窗的職責委派給javascript。
二. Electron的應用場景有哪些？
1. Slack: 它是一款企業溝通協作工具，那么我們可以使用 Electron來做這方面的事情。並且可以支持音頻或視頻功能等。
2. Light Table: 它是一款代碼編輯器，我們也可以使用Electron做代碼編輯器的桌面應用程序。
3. Game Dev Tycoon: 它是一款模擬類游戲，也可以使用做游戲相關的產品。
4. Gitter： 它是一種服務，它為GitHub上的開源項目提供聊天室的功能。它可以讓用戶使用其Github賬號登錄，然后訪問項目或組織的聊天室。
5. Macaw: 他是一款創新的所見即所得的web設計工具。它可以讓web設計師直接為他們的網站做視覺設計，在以前，他們都要先在圖片編輯軟件中做好，然后再生成對應的HTML和CSS代碼，現在我們可以使用該工具直接生成網站代碼。省去了將視覺設計稿轉成網站這一步。但是它和我們以前的Dreamweaver不同的是，它可以直接生成語義化的HTML和CSS代碼。
三. 使用Electron先來實現一個簡單的 "hello world" 應用程序
要使用 Electron的話，首先我們需要安裝該插件包，我們可以使用npm來安裝它，安裝命令如下：
npm install -g electron
如上安裝完成后，我們來看看 一個 electron應用需要包含如下三個文件：
|------ electron-demo | |--- index.html | |--- main.js | |--- package.json
package.json 基本代碼如下：
{ "name": "hello-world", "version": "1.0.0", "description": "", "main": "main.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }
如上 在electron中入口文件就是main.js, 默認是以js文件作為入口文件的，它以NW.js的區別是：NW.js 是以html文件作為入口的。
main.js 代碼如下：
'use strict'; // 引入 electron模塊 const electron = require('electron'); // 創建 electron應用對象的引用 const app = electron.app; const BrowserWindow = electron.BrowserWindow; // 定義變量 對應用視窗的引用 let mainWindow = null; // 監聽視窗關閉的事件（在Mac OS 系統下是不會觸發該事件的） app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); } }); // 將index.html 載入應用視窗中 app.on('ready', () => { /* 創建一個新的應用窗口，並將它賦值給 mainWindow變量。 */ mainWindow = new BrowserWindow(); // 載入 index.html 文件 mainWindow.loadURL(`file://${__dirname}/index.html`); // 當應用被關閉的時候，釋放 mainWindow變量的引用 mainWindow.on('closed', () => { mainWindow = null; }); });
index.html 代碼如下：
<html> <head> <title>Hello World</title> </head> <style> body { background-image: linear-gradient(45deg, #ead790 0%, #ef8c53 100%); text-align: center; } button { background: rgba(0, 0, 0, 0.40); box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.5); border-radius: 8px; color: white; padding: 10px 20px; border: none; font-family: 'Roboto', sans-serif; font-size: 14px; position: relative; top: 40%; cursor: pointer; outline: none; } button:hover { background: rgba(0, 0, 0, 0.3); } </style> <body> <button onclick="sayHello()">Say Hello</button> <script type="text/javascript"> function sayHello() { alert('Hello world'); } </script> </body> </html>
如上代碼編寫完成后，我們現在就可以來通過命令運行該應用程序了。我們先進入我們項目中的根目錄下，然后執行如下命令即可：
electron .
如下圖所示：
運行完成后，會打開一個視窗口，當我們單擊應用程序中的按鈕時候，會彈出窗口，如下圖所示：
Electron還有如下特性：
1. 支持創建多視窗，而且每個視窗都有自己獨立的javascript上下文。
2. 通過shell和screen API 整合了桌面操作系統的特性。
3. 支持獲取計算機電源狀態。
4. 支持阻止操作系統進入省點模式。（對於演示文稿比較有用）
5. 支持創建托盤應用。
6. 支持創建菜單和菜單項。
7. 支持為應用更新來自動更新應用代碼。
8. 支持匯報程序崩潰。
9. 支持自定義Dock菜單項。
10.支持操作系統通知。
11.支持為應用創建啟動安裝器。