Electron 是什麼
Electron是一款利用Web技術開發跨平臺桌面應用的框架，它的前身是Atom Shell。Electron將 Chromium 和 Node.js 的事件循環整合到了一起，同時提供了一些與原生系統交互的 API。
哪些應用是用Electron開發的
在Electron官方頁面上羅列了上百款利用Electron開發的應用，包括了文本編輯、通訊聊天、音樂娛樂、數據庫管理等等方面，其中比較知名的應用有Atom、VSCode和WordPress.com等。
部署開發環境
安裝Node.js
Electron開發環境依賴於Node.js，所以需要先安裝Node.js。
安裝Electron
使用npm安裝Electron:
cnpm install electron-prebuilt -g
如果提示權限錯誤，可以通過管理員權限打開cmd後重新運行上述命令。
安裝完畢後執行：
electron -v
檢查是否安裝成功。
至此我們的開發環境就部署好了，下面就可以進行Electron的開發了。
Hello Word
Electron官方給出了一個簡單的示例程序，可以通過Git工具從GitHub上的直接獲取。對於沒有安裝Git的用戶，可以直接點擊Download ZIP下載文件。
我們把下載下來的zip文件解壓出來，打開Windows的命令行，進入該目錄，然後運行：
electron ./
如果一切順利，就可以看到應用窗口了。
到這大家肯定有個疑問：這個程序是怎麼跑起來的？由於Electron是Node的運行時，所以它的入口是在package.json中的main進行定義的。package.json是程序信息的描述文件，裡面聲明瞭程序的名稱、簡介、版本等信息。
例子中指定的入口文件是main.js，我們打開該文件看下：
裡面定義了一個creatWindow方法。在方法裡新建了一個瀏覽器窗口，並且加載了index.html頁面，還打開了開發者工具。
應用在初始化完成後就執行creatWindow方法，所以我們就可以看到上面打開應用後的效果。
開發體驗如何
基於 Electron的開發，就好像開發一個網頁一樣，而且能夠無縫地使用Node。或者說：就好像構建一個Node app，並通過HTML和CSS構建界面。另外，你只需為一個瀏覽器（最新的Chrome）進行設計，而不必花費更多的精力去考慮瀏覽器兼容性。
原理解析
Electron應用是由兩種進程組成：主進程和渲染進程。有些模塊會工作在其中一個進程上，而有些會在兩個進程之上。主進程更多地充當幕後角色，而渲染進程則是應用的每個窗口。
主進程
主進程，通常是一個命名為 main.js 的文件，該文件是每個Electron應用的入口。它控制了應用的生命週期（從打開到關閉）。它能調用原生元素和創建新的（多個）渲染進程，而且整個Node API是內置其中的。
渲染進程
渲染進程是應用的一個瀏覽器窗口。與主進程不同，它能存在多個並且是相互獨立的。它們也能隱藏的。它通常被命名為index.html。它們就像典型的HTML文件，但在Electron中，它們能獲取完整的Node API特性。因此，這也是它與其它瀏覽器不同的地方。
相互通訊
我們知道，Web頁面因為安全限制，不能直接訪問原生的GUI資源（比如dialog、電源監控），Electron中也是一樣，渲染進程如果想要進行原生的GUI操作，就必須和主進程通訊，請求相應的GUI操作。IPC就為此而生，它提供了進程間的通訊。利用它能在主進程與渲染進程之間傳遞信息。（雖然渲染進程不能直接操作原生GUI，但它有能力調用Node.js的API，間接就擁有了調用操作系統底層 API 的能力）
Electron應用就像Node應用，它也使用一個package.json文件。該文件能定義哪個文件作為主進程，並因此讓Electron知道從何啟動你的應用。然後主進程能創建渲染進程，並能使用 IPC讓兩者間進行消息傳遞。
如何調試
渲染進程的調試
渲染進程其實就是一個chrome瀏覽器窗口，其調試與用chrome調試html頁面完全一樣。通過Ctrl+Shift+I快捷鍵調出開發者工具就可以進行調試了。
主進程的調試
為了提供一種方法來調試主進程中的腳本，Electron提供了 --debug 以及 --debug-brk 的選項開關。
命令行開關
使用如下的命令行開關來調試Electron的主進程：
--debug=[port]
當這個開關用於Electron時，它將會監聽V8引擎中有關port的調試器協議信息。默認的port是5858。
--debug-brk=[port]
就像--debug一樣，但是會在第一行暫停腳本運行。
使用VS Code來調試
1. 在VS Code中打開Electron工程，通過快捷鍵Ctrl+Shift+B設置VS Code的任務運行程序，用於啟動electron。
2. 點擊“配置任務運行程序”按鈕，選擇Others選項
3. VS Code會自動生成一個task.json文件
4. 將task.json中的command改為“electron”，args改為“[“—debug-brk=5858”,”.”]”
現在我們就可以直接通過快捷鍵Ctrl+Shift+B來運行程序了
5. 切換到調試視圖
6. 點擊配置按鈕，選擇Node.js環境，VS Code會自動生成launch.json配置文件
7. 打開主進程對應的main.js文件，在需要的地方加上斷點：
8. 切換到調試視圖，選擇附加到進程，並點擊啟動按鈕啟動調試
9. 通過快捷鍵Ctrl+Shift+B啟動應用進行調試，下面就會自動停止到第一段代碼處
10. 接下來就可以像在瀏覽器中調試js一樣進行調試了。
打包應用
應用開發完了要給別人用就需要將應用打包。Electron是用electron-packager模塊來打包的。
1. 運行npm install electron-packager --save-dev命令安裝electron-packager模塊
electron-packager的打包基本命令是：
electron-packager --platform= --arch= [optional flags...]
參數說明：
• sourcedir：項目所在路徑
• appname：打包的項目名字
• platform：你要構建哪個平臺的應用（Windows、Mac還是Linux）
• arch：決定構建哪個構架下（x86或x64，all表示兩者）
2. 項目根目錄下面的package.json裡添加打包代碼
"packager": "electron-packager ./ HelloWorld --platform=win32 --out=./OutApp "
3. 運行命令npm run-script packager打包應用
可以看到在項目目錄中多出了一個OutApp文件夾，裡面是打包出來的應用文件夾。
運行裡面的HelloWorld.exe文件，我們的應用就打開來了。
加密資源
可以看到，在每個包下的resources文件夾裡的app文件夾 就是我們寫的程序，這樣我們的代碼就是暴露在用戶電腦上的，這非常的不安全，還好electron 自帶了加密功能。
1. 運行npm install asar -g命令全局安裝asar
2. 運行npm install asar --save-dev命令在項目中安裝asar
3. 安裝成功後就可以使用asar命令來講程序加密打包了。進入我們上面打包出來的應用的resources目錄，運行asar pack ./app app.asar命令將app文件夾加密
4. 在resources目錄中就生成了app.asar文件
5. 刪除多餘的app文件夾
喜歡我的文章就關注我吧，有問題可以發表評論，我們一起學習，一起進步
