作者 | 李小明

責編 | 屠敏

認識 Electron

Electron是由GitHub開發，用HTML、CSS 和 JavaScript來構建跨平台桌面應用程序的一個開源庫。Electron通過將Chromium和Node.js合併到同一個運行時環境中，並將其打包為Mac、Windows和Linux系統下的應用。Electron於2013年作為構建GitHub上可編程的文本編輯器Atom的框架而被開發出來。

這不意味著Electron是綁定了GUI庫的JavaScript。相反，Electron使用Web頁面作為它的GUI，所以你能把它看作成一個被JavaScript控制的，精簡版的Chromium瀏覽器。

Electron的版本更新很頻繁，基本保持在1周發布一個小版本，每季度發布一個大版本。除了穩定版外還有Beta版和Nightly（最新功能試用版），Chromium更新時，Electron也會跟著更新。

為什麼選擇Electron

如今的桌面應用軟體基本都需要跨平台運行，類似於MFC、Duilib等技術都無法滿足需求。當今的跨平台桌面應用軟體開發以使用QT，Electron較多。

QT跨平台開發

Qt是一個跨平台C++圖形用戶界面應用程序開發框架。它既可以開發GUI程序，也可用於開發非GUI程序，比如控制台工具和伺服器。作為使用C++語言開發的框架，他的優缺點十分明顯。

優點：

• 運行效率高；
• 架構健壯，性能強大。

缺點：

• 開發周期長；
• 需要開發者具有C++編程能力；
• QT是一款收費軟體，如果不想繳費購買License，又想用QT開發商業（閉源）程序，必須遵守LGPL協議，開源使用了LGPL庫的源代碼。

Electron桌面軟體開發

Electron最早用於開發GitHub上的可編程文本編輯器Atom,它是一個藉助Node.js和Chromium, 利用HTML/CSS/JavaScript語言創建桌面應用的框架。與之類似的還有NW.js, 但是NW.js社區發展基本處於停滯狀態，更新也較慢。

優點：

• 使用JavaScript語言作為開發語言，方便前端開發者輕鬆開發桌面應用，原C++/Java語言開發者，也可以很快入手開發；
• 方便調試，提供了瀏覽器的開發者工具，輕鬆斷點調試；
• 豐富的Web前端UI資源，可以快速製作絢麗的界面；
• 快速構建，迭代開發。最複雜的底層瀏覽器部分Electron已經幫你搞定，你只需要負責上層界面及業務邏輯的開發。Electron還提供了熱更新功能，只需載入更新模塊，會自動幫你檢查更新並後台下載；
• 崩潰日誌報告。輕鬆收集崩潰日誌，定位錯誤代碼；
• C++插件擴展；
• 代碼開源。Electron是GitHub上的開源項目，開發者有疑問可以在GitHub社區（https://github.com/electron/electron）上直接提issue，高級開發者可以修改Electron底層代碼，訂製自己的Elcetron。

缺點：

• 打包文件太大。Electron畢竟是一個瀏覽器，最小的應用安裝包也要幾十兆大小；
• 無法代碼加密。和Web開發類似，使用者可以在開發者工具看到應用的客戶端代碼，商業軟體需要代碼加密的可以選擇重要功能在服務端實現，桌面應用請求，或使用Node文件實現；
• 運行耗資源。瀏覽器通病，Electron應用也是多進程系統，啟動幾個Electron應用還好，如果太多會造成機器卡頓；
• 不支持XP系統，Node.js並不支持XP系統。

綜上，如果你想快速的開發出炫酷的桌面應用，而又對系統限制不大，建議你選擇Electron，如果你是一個前端開發人員，又想製作桌面應用，建議你選擇Electron。

創建一個簡單的應用：環境安裝

Electron應用本質上是一個Node.js應用程序，需要安裝Node.js，到官網（http://Node.js.cn/download/）安裝即可。安裝完後，在命令行窗口中分別輸入node -v和npm -v來查看Node和NPM的版本。

初始化應用

與Node.js模塊相同，應用的入口為package.json 文件，該文件可以在一個文件夾下使用npm init命令，按照提示填充各項信息生成。 一個最基本的Electron 應用一般來說會有如下的目錄結構：

myapp/
├── package.json
├── main.js
└── index.html

main.js是主進程，完成窗口的創建，url或html文件的載入。GitHub上提供了一個簡單的Electron應用https://github.com/electron/electron-quick-start.git，可供學習參考。

使用C++插件擴展功能

對於複雜的業務邏輯，可以開發成C++插件Node，C++插件主要完成一些複雜的邏輯功能，供Electron調用。Electron對於C++生成的Node插件引用功能來自於Node.js,可以使用require() 函數載入到工程中，像普通的模塊一樣使用。JavaScript 與C++ 庫之間介面使用V8引擎，如下圖所示：

插件開發環境

C++插件的開發需要安裝node-gyp、Python 2.76，Windows下開發還要安裝Visual Studio。

每個插件都有一個工程文件binging.gyp,配置了源文件、include路徑及鏈接庫，目標文件，使用的編譯器等，格式如下：

{
"targets": [
{
"target_name": "addon",
"sources": [ "addon.cc" ]
}
]
}

C++與JavaScript通過V8交互執行的整體過程如下圖所示：

C++可以使用Napi介面，模塊的載入使用宏NODEAPIMODULE(hello, Init)，導出的JavaScript介面在Init中定義，示例如下：

#include <napi.h>
Napi::String Method(const Napi::CallbackInfo& info) {
Napi::Env env = info.Env();
return Napi::String::New(env, "world");
}
Napi::Object Init(Napi::Env env, Napi::Object exports) {
exports.Set(Napi::String::New(env, "hello"),
Napi::Function::New(env, Method));
return exports;
}
NODE_API_MODULE(hello, Init)

編譯C++插件使用命令如下：

node-gyp configure build

生成的C++插件為node文件，如hello.node 在JavaScript中調用C++插件直接使用require函數，代碼hello.js如下：

var addon = require("hello");
console.log(addon.hello());

JavaScript就可以調用C++的介面了,執行命令node hello.js，輸出"world"。

C++中調用JavaScript傳遞的回調函數需要使用libuv庫，libuv實現了Node.js的事件循環、工作線程、以及平台所有的的非同步操作的C庫。 具體參考示例代碼https://github.com/nodejs/node-addon-examples

Electron打包

Electron應用打包可以使用electron-builder和electron-packager，推薦使用electron-builder，打包命令為npm run builder，可以使用參數配置生成的安裝包的操作系統。

作者：李小明，現就職於環信，高級軟體開發工程師，負責IM桌面端軟體的研發，以C++、Node.js為開發語言，從事多年桌面軟體開發經驗，對行業前沿技術永遠不懈追求。

聲明：本文為作者原創投稿，版權歸 CSDN 所有，未經允許，嚴禁轉載。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！