為什麼用 JavaScript 來開發桌面應用

曾經的 JavaScript 脆弱、簡陋、甚至有被邊緣化的危險，不過 JavaScript 在經過了兩次飛躍後（以 V8 為首的 JavaScript 引擎和 Node.js 的問世），不再受人欺負，早已升級為綠博士（復仇者聯盟 4 中班納博士和綠巨人的合體，強大而充滿智慧）。 V8 引擎讓 JavaScript 的執行速度飛快，Node.js 讓 JavaScript 不僅僅能做 Web 前端頁面，還能開發後端應用。

儘管有了 Node.js，JavaScript 可以開發服務端應用，但有一類重要的應用它還是無法勝任——桌面應用。目前 Web 應用和移動應用看似成為主流，但如果沒有桌面應用，Web 應用和移動應用甚至都不會存在。所有的 Web 瀏覽器（IE、Chrome、Firefox、Safari 等）都是桌面應用，如果沒有桌面應用，Web 頁面根本沒地方執行；用於開發移動應用的開發工具（IDE）也是桌面應用。而且 Windows 的開始選單和 Mac OS X 的 Docker 中的每一個圖示都對應一個桌面應用，可以說，桌面應用無處不在。

如果將 Web 應用和移動應用比作國王，那麼桌面應用就是國王頭上的那頂王冠，沒有了王冠，國王什麼都不是，而賜予 JavaScript 製作王冠之神力的正是 Electron。這是一個基於 V8 引擎和 Node.js 的開發框架，允許用 JavaScript 開發跨平臺（Windows、Mac OS X 和 Linux）桌面應用。

有哪些著名應用是使用 Electron 開發的

目前有相當多的桌面應用是使用 Electron 開發的，例如，著名的 Visual Studio Code（微軟推出的一個跨平臺原始碼編輯器）就是用 Electron 開發的、螞蟻小程式（在支付寶中執行的小程式）也是用 Electron 來開發的；以小米、華為為主的眾多手機廠商推出的快應用（類似於微信小程式）的 IDE 也是用 Electron 開發的。

螞蟻小程式 IDE：

此外，大家熟悉的 Slack、Atom、XMind ZEN、WebTorrent、Hyper 等都是基於 Electron 的應用。

從 Electron 的主要使用者來看，很多都是大廠，如螞蟻金服、小米、華為、GitHub（Electron 就是 GitHub 推出的）、微軟等，由於現在 GitHub 被微軟收購了，因而目前 Electron 的後臺是微軟。因此學習 Electron 不用擔心以後沒市場，畢竟，各大廠都在用 Electron。

Electron 開發的好處

用 Electron 來開發有什麼好處呢？Electron 本身是基於 Node.js 的

而且 Electron 是跨平臺的，可以同時開發 Web 應用和桌面應用，無論是 UI，還是程式碼（JS），大多數資源都可以共享，這也為開發者大大減少了工作量，甚至企業也無需重複投入人力來開發系統。

此外，Web 應用在網路環境不好的情況下，頁面載入緩慢，它不僅僅要傳遞資料，而且要傳遞大量與 UI 相關的程式碼（如 CSS、HTML 等），非常耗時。

但桌面應用就不同了，執行時至少 UI 部分不需要從網路上更新，頂多是與服務端互動資料，就算網路不暢通，也可以暫時使用本地的資料。就算我們不開發這些“高大上”的產品，只開發相對容易的管理系統，在本地執行仍然會大幅度提升使用者體驗。最重要的一點，Electron 不僅僅支援 Web API，完成與 Web 應用相同的工作，而且還允許呼叫很多作業系統底層 API 來訪問計算機的硬體裝置，甚至可以自己用 C++、Go 來編寫本地模組，可以完成很多 Web 應用無法做到的事情。

可能有很多讀者以前開發過桌面應用，認為桌面應用也有缺點。比如，桌面應用很難做到實時更新，維護相對於 Web 應用費時費力，不過這個缺點是針對傳統桌面應用的，而基於 Electron 的應用沒有這個缺點。

Electron 之所以這麼多人用，並不僅僅是因為它基於 Web 技術，而且它還能呼叫很多本地 API，在實現很多功能時與本地應用非常接近。

學習 Electron，成為更優秀的開發者

作為一名開發者，學會開發桌面應用，會非常顯著地提升自己的核心競爭力，而且 Electron 開發桌面應用使用的是 Web 技術，可以考慮將 Web 應用與桌面應用作為一個應用來開發，這樣會大大提升開發效率。

前面提到，國外許多著名應用使用 Electron 來開發，包括常用的 Visual Studio Code。目前 ，Electron 在國內也不斷升溫，例如支付寶小程式 IDE、快應用 IDE 等都是使用 Electron 開發的。此外，儘管微信小程式 IDE 不是使用 Electron開發的，但卻是使用了類似的 NW.js 開發的，而 NW.js 的使用方法與 Electron 很像，舉一反三即可。

本課程筆者團隊也正在使用 Electron 開發一款跨平臺的開發工具 OriUnity，可以使用 JavaScript 同時開發桌面應用、Web 應用、移動 App 和小程式，而且可以將客戶端與服務端融為一體。在開發產品的過程中，我們也積累了很多 Electron 的實踐經驗。因此正好藉著達人課的機會，將 Electron 的一些開發經驗總結出來，希望對想入門 Electron 的讀者有一定的借鑑作用。

課程結構

Electron 功能眾多，但這些功能基本上可分為基礎知識（開發環境安裝、開發步驟、IDE 的選擇等）、視窗、選單、高階 API（資料庫、托盤、攝像頭、拖拽、剪貼簿等）以及釋出應用程式，本課程將會結合這些知識點詳細講解如何用 Electron 開發桌面應用。

課程目的是培養大家解決實際問題的能力，每一課的知識點既相互獨立、又有聯絡，比如，在建立托盤時需要用到上下文選單的知識。大多數文章（除了配置開發環境和簡介外）都配有完整的實現程式碼，並且在最後還提供了兩個實戰案例：基於 Electron 的雲筆記和資料庫管理系統，把離散的知識點結合起來完成非常複雜的桌面應用專案。

本課程分為七大部分，共 29 篇（含開篇詞）。

第一部分（第 01 ~ 04 課）：Electron 基礎知識
這部分主要介紹了用 Electron 開發跨平臺桌面應用的原因、桌面應用的優勢、Electron 應用的基本開發步驟、如何搭建整合開發環境、用 Git 管理 Electron 應用等內容，這一部分是 Electron 學習的開胃菜，大餐請繼續往後看。

第二部分（第 05 ~ 09 課）：用 Electron 建立視窗
這部分詳細介紹了用 Electron 建立各種型別視窗的方式，主要內容包括只針對 Mac OS X 系統的檔案展示視窗、開啟對話方塊視窗、儲存對話方塊視窗、顯示訊息對話方塊視窗、使用 HTML 5 API 建立子視窗、用 open 方法開啟的子視窗互動、在視窗中嵌入 Web 頁面等。

第三部分（第 10 ~ 12 課）：建立各種型別選單
選單是桌面應用程式的重要部分，這一部分詳細介紹了在 Electron 中如何建立各種型別的選單，主要內容包括使用模板建立視窗選單、如何設定選單項的角色、選單項的型別、為選單新增圖示、建立動態選單、上下文選單。

第四部分（第 13 ~ 21 課）：常用的核心 API
這一部分是本系列課程的核心內容，講解了 Electron 中常用的核心 API，主要包括建立托盤應用、拖拽操作、使用攝像頭、根據作業系統定製樣式、用純 JavaScript API 操作 SQLite 資料庫、用 Node.js 模組操作 SQLite 資料庫、訪問 MySQL 資料庫、使用剪貼簿、註冊全域性鍵、測試等。

第五部分（第 22 ~ 23 課）：釋出應用程式
由於基於 Electron 的桌面應用需要依賴 Node.js、Electron 以及眾多的模組才能執行，這些東西肯定不能讓使用者自己一個個安裝，最好的解決方案就是把這些東西與開發的桌面應用一起打包，然後將一個安裝包發放給使用者，使用者只需要雙擊安裝包就可以搞定，因而學會發布 Electron 桌面應用非常必要。

因此，這部分內容主要介紹瞭如何用各種工具釋出基於 Electron 的應用，主要包括使用 electron-packager 和 electron-builder 建立安裝包及製作安裝程式（dmg、exe 等）。

第六部分（第 24 ~ 26 課）：專案實戰
這一部分是本系列課程的畫龍點睛之筆，需要把前面五部分介紹的知識點連線起來完成複雜的桌面應用，這裡提供了兩個完整的案例，一個是雲筆記系統，該系統可以將本地的筆記儲存到服務端，只是這裡的服務端是以太坊，而不是傳統的資料庫；第二個專案是基於 Electron 的 MySQL 資料庫管理系統，可以做本地管理 MySQL 資料庫，而且還可以將資料上傳到以太坊進行備份。

第七部分（第 27 ~ 28 課）：模組分析
這一部分主要介紹了 Node.js 和 Electron 模組的相關知識，包括使用 JavaScript 開發 Node.js 和 Electron 模組以及使用 C++ 開發 Node.js 和 Electron 的本地模組。通過這一部分的內容，可以讓 C++ 與 Electron 完美融合在一起，讓 Electron 擁有無限擴充套件性。

課程寄語

Node.js 和 Electron 堪稱 JavaScript 的左右護法，前者讓 JavaScript 可以輕而易舉地跨越不同型別應用的界限，後者讓 JavaScript 可以進入服務端和桌面應用領域。有了這兩個護法，JavaScript 可以真正成為唯一的全棧開發語言，從 Web 到移動，再到服務端，再到桌面應用，甚至是終端程式，無所不能。
本課程並不是單純講解 Electron 的知識，而是想要教會大家開發 Electron 桌面應用的思想，提高動手能力，今後無論遇到多複雜的桌面應用需求都能得心應手，輕鬆應對。
最後，預祝大家學習愉快，Good Luck！

作者李寧其他達人課推薦：
Python 爬蟲和資料分析實戰：https://gitbook.cn/m/mazi/comp/column?columnId=5a7d1a13a7f22b3dffca7e49
小程式與雲開發實戰 36 講：https://gitbook.cn/m/mazi/comp/column?columnId=5b7f5f06a62b70638ef61319
零基礎學區塊鏈和以太坊開發：https://gitbook.cn/m/mazi/comp/column?columnId=5ae14aa2d7ab44391b5a00df