Electron入門介紹

Electron是什麼

能夠認爲Electron是一種運行環境庫，咱們能夠基於此，用HTML、JS和CSS寫桌面應用。
PC端的UI交互，主要有web應用和桌面應用。具體採用哪一種方式，主要看系統的應用場景，哪一個更合適用哪一個。
對於Web應用：

優勢：

1. 部署、升級方便。用戶經過瀏覽器就能夠訪問；
2. HTML/JS/CSS編寫，方便且高效；
3. windows、linux都支持；

缺點：

1. 對於開發者：瀏覽器適配比較繁瑣；
2. 對於開發者：有些應用，必須指定瀏覽器或版本。好比OCX必須是IE內核，H5要求瀏覽器必須是較高版本；
3. 對於用戶：傳統行業中，部分用戶對web應用不習慣，尤爲在專業工具軟件方面，以爲web應用沒有桌面應用用起來踏實。
4. 對於開發者：必須打開瀏覽器，輸入一長串URL地址（雖然能夠創建瀏覽器收藏夾或者建立URL的快捷方式到桌面，但大部分用戶不會這麼作）；

由於以前開發的一款應用是專業工具軟件，給科研院所的設計人員使用。並且用戶的大部分系統是XP，且不容許安裝非IE瀏覽器。咱們發現，採用web方式，效果很很差。所以決定用桌面應用。
考慮到開發效率、人員配備狀況以及後續的升級，因而調研了一下nw.js和Electron技術。本文主要講解Electron的入門。（注：Electron的一個遺憾，不支持XP系統。nw.js 0.14.7之後版本不支持XP系統。）

Electron網址：

https://electronjs.org/
https://github.com/electron/e...

環境安裝（Windows）

Node.js安裝

Electron中使用了Node.js，所以首先安裝Node.js。安裝十分簡單，直接從官網下載安裝包，點擊安裝便可。當前最新版本8.9.4。
新版本的Node.js中自動集成了npm，npm是JS的包管理器。能夠幫助咱們管理包的下載、依賴、部署、發佈等。能夠認爲是js中的maven。

安裝完後，在命令行窗口中分別輸入node -v和npm -v來查看node和npm的版本。

cnpm安裝（非必須）

考慮到npm下載包時是從國外的服務器上下載，不只速度慢，並且不穩定。所以，建議使用淘寶npm鏡像（官網：https://npm.taobao.org/）。
安裝cnpm：

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm的使用方法和npm同樣。後續使用中，npm所有替換爲cnpm便可。

例子

從github上下載第一個示例，運行看效果

# 克隆這倉庫
> git clone https://github.com/electron/electron-quick-start
# 進入倉庫
> cd electron-quick-start
# 安裝依賴庫
> cnpm install
# 運行應用，也能夠用： cnpm run start
> cnpm start

注意：須要安裝git，具體安裝步驟這裏不描述。另外，注意這裏使用的cnpm。
若是沒有安裝git，直接下載壓縮包也能夠。

命令行中執行上述操做，最後的效果：

（注：我把命令行窗戶和彈出的Hello World窗口截在一張圖了）

主要文件結構

進入到electron-quick-start文件夾，能夠看到主要目錄結構

electron-quick-start/
 ├── package.json
 ├── main.js
 ├── index.html
 ├── node_modules/

index.html：窗口中顯示的內容，在index.html中
package.json：項目的配置信息和所需的各類模塊，在這裏配置。npm install命令根據它，自動下載所需模塊
main.js：用於建立窗口和處理系統事件
node_modules：npm install安裝包的位置。若是是全局安裝，則不在這個目錄。

能夠打開各個文件和目錄，看看具體的內容，先大體瞭解，有個總體概念。

例子中package.json簡要解釋

"name": "electron-quick-start"

經過name字段，指定窗口標題。

"main": "main.js"

經過main字段，指定應用的啓動腳本。若是未指定，Electron會優先加載index.js。

"scripts": {    "start": "electron ."  }

配置npm的命令，這裏是start命令。npm start命令調用的就是這裏的「electron .」
注意：這裏直接使用的是"electron ."，而不是"node_modules.binelectron ."。雖然前面electron模塊是局部安裝，可是運行npm命令時，會將當前目錄的node_modules/.bin子目錄加入PATH變量，執行結束後，再將PATH變量恢復原樣。所以，即便非全局安裝，electron也能夠不帶路徑。這裏的electron其實就是一個shell腳本。

"devDependencies": {    "electron": "~1.6.2"  }

配置依賴的模塊，這裏只有Electron模塊。

本身手動編寫一個例子，並運行

若是上訴的簡單例子還不夠直觀，能夠本身創建一個。
》建立一個文件夾ETest；
》該文件夾下創建三個文件：index.html, main.js, package.json。文件的內容參考上訴例子；
》打開命令窗口，cd到ETest目錄下；
》啓動程序：e:githubelectron-quick-startnode_modules.binelectron .
》完成。
注意這裏直接使用的是上一步electron-quick-start例子中的electron命令。

還有一個重要例子

github上有一個electron-api-demos的例子，裏面介紹了主要的一些功能及實現代碼。能夠下載下來參考：

> git clone https://github.com/electron/electron-api-demos
> cd electron-api-demos
> cnpm install
> cnpm start

結果界面：

這裏例子中，展現了：
》建立新窗口；
》管理窗口狀態；
》窗口失去焦點和獲取焦點的事件；
》建立無邊框窗口；
》自定義菜單和右鍵菜單；
》註冊鍵盤快捷鍵
》打開外部連接；
》通知消息（帶圖片）；
》使用系統窗口（文件選擇窗口、錯誤提示窗口、信息提示窗口、保存窗口）
》添加系統狀態欄圖標；
》多進程間通訊；
》獲取系統信息；
》拷貝和粘貼；
》打印PDF；
》截圖。

要更深刻的瞭解，能夠參網上相應的文檔。