electron 大致結構

一、Electron支持的平臺：

OS X
Windows
Linux

二、一個標準的electron app包含的結構：

Windows 或是 Linux中：
electron/resources/app
|_package.json
|_main.js
|_index.html

三、electron程序打包：

通常使用asar來進行打包，electron中通常包含兩種API：
Node.js和Chromium提供的Web API
Node API如fs.readFile

四、使用Native Node模塊

安裝Native模塊的三種方式：
1)electron-rebuild
2)使用npm
3)使用node-gyp 

五、測試主進程

window下面的DevTools只能測試渲染進程，爲了測試主進程可使用--debug或是--debug-brk分支也可使用node-inspector進行測試

六、electron簡述

electron可讓你使用javascript來建立桌面應用，能夠將其理解爲Node.js的一個變體，它提供了豐富的運行時訪問Native的API接口。可是electron並非一個GUI庫，相反的，electron使用web頁面做爲它的GUI，因此能夠將它看作是一個小的Chromium瀏覽器。在Electron中運行package.json和main腳本的進程成爲主進程，能夠在主進程中經過建立Web頁面來顯示GUI。electron使用Chromium的多進程機制來渲染頁面，每一個頁面擁有一個本身的進程，該進程成爲渲染進程。在electron中用戶能夠經過Node.js的API跨過網頁運行的沙箱去訪問更爲底層的系統應用。
主進程經過使用BrowserWindow實例建立頁面，每一個BrowserWindow都是在本身的渲染進程中運行。當一個BrowserWindow實例被銷燬的時候對應的渲染進程也被銷燬了。主進程管理着全部的網頁和它們對應的渲染進程，每一個渲染進程只關心本身的網頁。渲染進程如果想訪問GUI操做，須要向主進程發出請求。在electron中主進程和渲染進程之間有幾種交互方式：ipcRenderer和ipcMain來發送messages。

七、一個簡單而完整的Electron app

package.json文件的格式和Node的模塊是同樣的，main.js是app啓動腳本，將會運行在主進程中。若是main沒有出如今package。json中，electron將會嘗試裝載index.js
main.js須要建立window界面並處理系統事件運行electron程序：
能夠先用npm裝上electron-prebuilt，進入app的root目錄
執行electron .

八、桌面環境的整合

關於Notification通知：
HTML5的API只能是在渲染進程中使用，Windows，Linux和OS X中都支持通知機制。
其餘的功能看具體的桌面環境進行相應的配置

九、在線和離線事件監測

electron主進程中並不能利用HTML5中的navigator對象進行事件探測，可是能夠利用electron中的交互工具將事件監測結果反饋給主進程。使用ipcMain和ipcRender進行事件信息的傳遞
十、electron中API概要
electron支持全部的Node.js的內建模塊，也支持第三方的node模塊，包括native模塊。electron同時提供了額外的native內建模塊能夠用於開發原生的桌面應用。一些模塊只能在主進程中使用，一些模塊只能是在渲染進程中使用，而有一些是通用的模塊。規則爲：若是模塊是GUI或是和底層系統相關的就是隻能在主進程中使用。
主進程就是main.js而渲染進程是在index.html中運行。

十一、進程對象

進程process對象和通常的node區別在於：
process.type 進程的類型能夠是browser或是renderer
process.version['electron'] electron的版本
process.version['chome'] Chromium的版本
process.resourcesPath Javascript腳本文件的路徑
process.mas 構建Mac應用商店時值爲true，其餘的爲undefined。

十二、事件

當electron裝載內部初始化腳本的時候，頁面和主腳本文件就開始裝載
此時會觸發事件。

1三、electron支持的Chromium命令行開關

--client-certificate=path
--ignore-connections-limit=domains
--disable-http-cache
--remote-debugging-port=port
--js-flags=flags
--proxy-server=address:port
--proxy-bypass-list=hosts
--proxy-pac-url=url
--no-proxy-server
--host-rules=rules
--host-resolver-rules=runles
...

1四、環境變量：

export ELECTRON_ENABLE_LOGGING=true
ELECTRON_RUN_AS_NODE
ELECTRON_ENABLE_LOGGING
...

1五、定製DOM元素

File對象：
DOM的File接口經過HTML5的API提供了用戶操做native文件的方法。electron增長了path屬性接口能夠直接訪問文件的真實路徑
標籤：
webview標籤在electron app中植入額外的內容，和iframe不一樣的是webview運行在一個獨立的進程中，它並不具備和你的頁面相同的權限，全部app和它的交互都是異步進行的，這使得app在使用植入內容的時候更加安全。
window.open函數：
當調用window.open的時候會在頁面中新建立一個窗口，默認狀況下建立的BrowserWindow將會繼承父類窗口的options。

1六、主進程的模塊

1)app模塊：
負責控制應用程序的生命週期如
const app = require('electron').app;
app.on('window-all-closed', function(){
app.quit();
});
app對象能夠發出如下事件：
will-finish-launching
當程序完成基本的啓動，相似於ready事件。啓動crash事件監聽或是自動更新。大多數狀況下，須要在ready事件中處理更多的事情。
ready
electron完成初始化
window-all-closed
當全部的窗口都已經關閉的時候觸發，只有在當程序將要推退出的時候觸發。當用戶調用app.quit()的時候，electron會關閉全部的窗口並
發出will-quit事件，此時便不會發出window-all-clised事件。
before-quit
當程序開始關閉窗口的時候發出,調用event.prevertDefault()將會阻止默認的行爲。
will-quit
當窗口都已經關閉，程序即將退出的時候發出該事件。
quit
程序退出
...
2)autoUpdater模塊
該模塊提供了Squirrel自動更新框架一個接口
3)BrowserWindow模塊
能夠用於建立一個新的瀏覽器窗口
4)contentTracing模塊
用來收集Chromium內容模塊產生的跟蹤信息。
5)dialog模塊
用來顯示原生系統對話框，好比打開文件對話框
6)globalShortcut模塊
用來註冊和註銷全局的鍵盤快捷方式。
7)ipcMain模塊
該模塊是EventEmitter的一個實例對象，在主進程中使用，能夠發送同步或是異步的message和渲染進程 進行交互。
8)Menu模塊
用來建立一個原生的菜單，好比上下文菜單。
9)MenuItem模塊
用來往菜單中添加菜單子項。
10)powerMonitor模塊
用來顯示電池電量變化，只能是在主進程中使用，並且只能是在ready事件已經發出的狀況下。
11)powerSaveBlocker模塊
用來阻止系統進入省電模式，休眠模式。
12)protocol模塊
用來註冊一個定製的協議或是聲明使用一個已經存在的協議
13)session模塊
用來建立新的Session對象，保存本地對象等操做。
14)webContents模塊
這是一個EventEmitter，負責渲染和控制一個網頁，是一個BrowserWindow的屬性。
15)Tray模塊
一個Tray表明着一個操做系統通知區域的一個icon，一般狀況下是和一個上下文菜單綁定的。

1七、渲染進程的模塊

1)desktopCapturer模塊
用來獲取可用的資源，能夠用getUserMedia來獲取。
2)ipcRenderer對象
是一個EventEmitter對象的實例，提供了一些方法能夠用來和主進程之間進行message交互。
3)remote模塊
提供了一個簡單的跨進程之間通訊的方法。GUI相關的模塊只能是在主進程中使用像是dialog和menu等，若是想要在渲染進程中使用就須要使用ipc機制向主進程申請。remote模塊有點像是java中的RMI
4)webFrame模塊
用來定製當前網頁的渲染。

1八、兩個進程共同的模塊

1)clipboard模塊
提供了執行復制和粘貼操做的方法。
2)crashReporter模塊
發送程序的奔潰報告。
3)nativeImage模塊
在electron中獲取圖片能夠經過文件的路徑或是使用nativeImage對象。
4)screen模塊
這是一個EventEmitter，保存了關於屏幕的全部相關信息，像是大小，顯示，指針位置等等。直到ready事件觸發以後才能使用。
5)shell模塊
同了和桌面整合相關的函數。

1九、開發electron相關知識

1)代碼格式
能夠經過運行npm run lint來顯示利用cpplint或是eslint獲取到的代碼風格。
javascript中：
文件不要使用空行結尾
文件必須包含-而不是下劃線_
const和let的使用
function中=>返回值的聲明
字符串的模板使用，不在使用+，注意$的使用
API的名稱中更傾向於使用setter和getter而不是JQuery中
的直接.text之類的用法。
2)源碼目錄結構
Electron
├── atom - C++ 源碼.
| ├── app - 系統程序入口.
| ├── browser - 包含了主窗口，UI和全部主進程相關的東西
| | 
| | ├── ui - 爲不一樣的平臺實現不用的UI界面.
| | | ├── cocoa - Cocoa指定源碼.
| | | ├── gtk - GTK+ 指定源碼.
| | | └── win - Windows GUI指定源碼.
| | ├── api - 主進程API的實現.
| | ├── net - 網絡相關代碼.
| | ├── mac - Mac指定Objective-C源代碼.
| | └── resources - icon，平臺相關的文件等等.
| ├── renderer - 運行在渲染進程的代碼.
| | └── api - 渲染進程中API的實現代碼.
| └── common - 主進程和渲染進程共同使用的代碼,包括一些函數工具，以及整合node的信息到Chromium的message loop中。
| └── api - 通用的API實現，以及electron內建模塊的實現
| 
├── chromium_src - 從Chromium中拷貝的源代碼.
├── default_app - electron默認顯示的頁面
| 
├── docs - 文檔文件.
├── lib - JavaScript的源代碼.
| ├── browser - Javascript主進程初始化代碼.
| | └── api - Javascript API實現代碼.
| ├── common - JavaScript通用的代碼
| | └── api - Javascript通用API實現代碼.
| └── renderer - Javascript渲染進程初始化代碼.
| └── api - Javascript渲染進程API實現代碼.
├── spec - 自動化測試.
├── atom.gyp - electron的構建規則.
└── common.gypi - 其餘的設置和像是node組件或是breakpad組件的構建規則.

其餘的文件夾：
script - 構建，打包，測試相關的腳本文件
tools - gyp文件的幫助腳本，不能被用戶直接調用的.
vendor - 第三方依賴庫源碼.
node_modules - 構建的時候須要使用的第三方node模塊.
out - ninja輸出的臨時文件目錄.
dist - 在建立distribution的時候生成的臨時目錄.
external_binaries - 下載的第三方不支持gyp的二進制框架.

20、構建系統

1)electron利用gyp來生成項目，利用ninja來構建項目。項目的配置信息是在.gyp或是.gypi文件中。
gyp文件包含electron項目的構建規則：
atom.gyp定義了electron自己如何構建
common.gyp調整Node的構建配置以適應Chromium
vendor/brightray/brightray.gyp定義了brightray如何建立包含了連接Chromium的默認配置
vendor/brightray/brightray.gypi包含了通用的構建配置
2)組件的構建
因爲Chromium是一個大工程，連接的時候須要很長的事件，因此Chromium引進了組件構建：將每一個組件做爲一個獨立的共享庫，使得連接的時候文件大小和執行速度獲得提高。
在electron中若是是Debug構建的話，二進制文件會連接到Chromium的共享庫版本以提高連接速度。若是是Release構建的話，二進制文件會連接到靜態共享庫中以得到最佳文件大小和執行效率。
3)項目的兩個階段生成方式
Release和Debug構建，能夠連接不一樣的庫。electron使用的是R和D做爲對應的標示。

 

以上只是本身調研electron時候的一些簡要的筆記，沒法做爲詳細文檔存儲。具體的electron說明文檔見：http://electron.atom.io/docs/v0.37.5/

原文連接：http://www.2cto.com/kf/201604/499352.html