本文涉及到的概念會很多，為了控制篇幅，這里更多的是拋磚引玉，更多資料需要大家到參考資料中自行補充相關知識概念。
Electron簡介
Electron（最初名為Atom Shell）是GitHub開發的一個開源框架。它允許使用Node.js（作為后端）和Chromium[^chromium]（作為前端）完成桌面GUI應用程序的開發。Electron現已被多個開源Web應用程序用於前端與后端的開發，著名項目包括GitHub的Atom和微軟的Visual Studio Code。
Electron是一個由GitHub開發的開源庫，通過將Chromium和Node.js組合並使用HTML，CSS和JavaScript進行構建Mac，Windows，和Linux跨平台桌面應用程序.
這不意味着 Electron 是綁定了 GUI 庫的 JavaScript。相反，Electron 使用 web 頁面作為它的 GUI，所以你可以把它看作成一個被 JavaScript 控制的，精簡版的 Chromium 瀏覽器。
Chromium
- 楓樹瀏覽器是一個基於Chromium的Windows/Linux瀏覽器。新增了部分功能，如鼠標手勢，鏈接拖動及IE標簽。（最后一次更新於2013-08-29，基帶版本27.0.1453.110[11]）
- 世界之窗瀏覽器極速版（TheWorld Chrome版）
- 搜狗高速瀏覽器：基於Chromium開發，同時加入了IE內核引擎。
- 360瀏覽器極速版：基於Chromium開發，同時加入了IE內核引擎。
- 獵豹瀏覽器：基於Chromium開發，同時加入了IE內核引擎。
- 傲游瀏覽器：基於Chromium開發，同時加入了IE內核引擎。
- 七星瀏覽器：基於Chromium開發，同時加入了IE核心引擎。外觀和楓樹瀏覽器類似。
- QQ瀏覽器：基於Chromium開發，針對IE內核優化。
- 百度瀏覽器：基於Chromium開發。
Node.js
Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境。
Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量又高效。
Node.js 的包管理器 npm，是全球最大的開源庫生態系統。
為什么選擇 Electron
Electron提供了一個Nodejs的運行時，專注於構建桌面應用，同時使用web頁面來作為應用的GUI，你可以將其看作是一個由JavaScript控制的迷你版的Chromium瀏覽器。
夠火（5w+ star）。Electron 的作者和 NW.js（原 node-webkit）是同一人，大家可以去知乎圍觀維護一個大型開源項目是怎樣的體驗？這個問題下作者的回答。官方也有 Electron 和 NW.js 的對比
作者先是在Intel工作開發維護node-webkit（后改名NW.js），之后加入GitHub開發Atom編輯器，編寫了一個新的桌面應用框架，當時的名稱叫做atom-shell，之后開源，而后改名Electron
Electron基礎概念
主進程和渲染進程
Electron 中，入口是一個 js 文件，運行這個入口文件（通常會是 package.json 里的 main 腳本）的進程稱作主進程，在主進程使用 BrowserWindow 模塊可以創建並管理 web 頁面，也就是應用的 GUI。
const {BrowserWindow} = require('electron')
// 主進程創建web頁面
let someWindow = new BrowserWindow(winOpts)
// 加載本地的文件
someWindow.loadURL('file://' + __dirname + '/index.html')在主進程創建的一個個web頁面也都運行着自己的進程，即渲染進程，渲染進程各自獨立，各自管理自己的頁面，可以想象是瀏覽器一個個的 tab。
- 主進程
- 整體控制
- 全局快捷鍵
- 屏幕
- 窗口
- 菜單項
- 系統托盤
- 從主進程到渲染進程的異步通信
- 創建和控制視圖
- 等等
- 渲染進程
- 頁面渲染
- webview標簽
- 渲染進程與主進程通信
- 從渲染進程到主進程的異步通信
- 子窗口
- 捕獲桌面資源
進程間通信
Web 頁面因為安全限制，不能直接訪問原生的GUI資源（比如dialog、電源監控），Electron 中也是一樣，渲染進程如果想要進行原生的GUI操作，就必須和主進程通訊，請求相應的GUI操作
- ipcMain和ipcRenderer
// 渲染進程中 const {ipcRenderer} = require('electron') ipcRender.send('somemsg', data); ipcRender.on('replaymsg', (evt, otherData) => { console.log(otherData) }) // 主進程中 const {ipcMain} = require('electron') ipcMain.on('somemsg', (evt, data) => { console.log(data) evt.sender.send('replymsg', otherData); }); - 直接在渲染進程使用remote模塊，remote 模塊可以直接獲取主進程中的模塊。這種方式其實是第一種方式的簡化。
// 在渲染進程打開提示對話框 const {dialog} = require('electron').remote dialog.showMessageBox({ opts }); - 主進程向渲染進程發送消息
this.webviewWindow.webContents.send('ping'); - 渲染進程之間的通信
如果數據不需要實時性，只是渲染進程之間數據的共享，那么使用官方的建議即可：How to share data between web pages?。如果要求實時性，需要配合前幾種種方式實現。// 主進程 // 兩個窗口互相獲取對方的窗口 id, 並發送給渲染進程 win1.webContents.send('distributeIds',{ win2Id : win2.id }); win2.webContents.send('distributeIds',{ win1Id : win1.id }); // 渲染進程 // 通過 id 得到窗口 remote.BrowserWindow.fromId(win2Id).webContents.send('someMsg', 'someThing'); - Vue event bus
src/renderer/bus.js
``` import Vue from 'vue'
export default new Vue() ```
src/renderer/tray.js
``` import bus from './bus' import { remote } from 'electron'
const tray = new remote.Tray(remote.clipboard.readImage()) const menu = remote.Menu.buildFromTemplate([ { label: 'ping', click () { // Send event to Vue bus.$emit('ping') } } ])
tray.setToolTip('hello world') tray.setContextMenu(menu) ```
SomeComponent.vueimport bus from '@/bus' /* ... */ mounted () { bus.$on('ping', () => { // event logic console.log('pong') }) } /* ... */
簡要總結下 Electron 的優缺點：
優點：
- 可以用 Web 前端技術開發跨平台的桌面客戶端
- 可以從 Node 的生態獲得極大的助力
- 文檔豐富，社區活躍
缺點：
- 包大，因為集成了 chromium
- 不支持xp
Electron Quick Start
git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start打包發布
- mac
electron-packager ./ --platform=mas --arch=x64
Electron & Vue全家桶 快速搭建
# 安裝 vue-cli 和 腳手架樣板代碼
npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project
# 安裝依賴並運行你的程序
cd my-project
yarn # 或者 npm install
yarn run dev # 或者 npm run dev技術棧
Vue
Vue (讀音 /vjuː/，類似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。
- 生命周期圖示
vuex
Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也集成到 Vue 的官方調試工具 devtools extension，提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。
axios
axios 是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端
Demo演示
運用Electron和一些開源Api做了一個簡單的demo，可以查看幣市行情，體驗堪比原生般順滑。
參考資料
備注
[^chromium]: Chromium是一個由Google主導開發的網頁瀏覽器，以BSD許可證等多重自由版權發行並開放源代碼。是Google為發展自家的瀏覽器Google Chrome而打開的項目，所以Chromium相當於Google Chrome的工程版或實驗版（盡管Google Chrome本身也有β版），新功能會率先在Chromium上開放，待驗證后才會應用在Google Chrome上，故Google Chrome的功能會相對落后但較穩定。