初探Electron，從入門到實踐

本文由葡萄城技術團隊於博客園原創並首發

轉載請注明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。

 

在開始之前，我想您一定會有這樣的困惑：標題里的Electron 是什么？Electron能做什么？許多偉大的公司使用Electron框架的原因又是什么？

帶着這些問題和疑惑，通過本文的介紹，可助您全面地認識Electron這門新興的技術，迅速找到其入門途徑，並理解Electron為何被稱為當下開發桌面App的最佳選擇。

 

初探Electron
一、Electron是什么？（為何稱之為“跨平台桌面瀏覽器”）

前端開發的魅力，在於開發者隨時要面臨全新技術的挑戰！

曾幾何時，作為前端開發者的你可曾想過：如何利用HTML、CSS和JavaScript構建跨平台的桌面應用程序？借助 Electron，這項工作將比你想象的更加簡單。

Electron作為一個使用新興技術（包括JavaScript，HTML和CSS），可以幫助用戶建立與系統功能的交互，讓開發人員可以更專注於應用程序本身。

Electron設計之初便充分結合了當今最好的Web技術，作為一個跨平台的“集成框架”，它可以輕松地與Mac、Windows和Linux兼容。而所謂的“集成框架”也就是它將“Chromium”和“Node.js”很好的集成在了一起，並明確分工，Electron負責硬件部分，“Chromium”和“Node.js”負責界面與邏輯，大家井井有條，共同構成了一個成本低廉卻十分高效的解決方案，在快速交付上甚至比Native還要快速。

Electron發展里程碑

·      2013年4月11日，Electron以Atom Shell為名起步。

·      2014年5月6日，Atom以及Atom Shell以MIT許可證開源。

·      2015年4月17日，Atom Shell改名為Electron。

·      2016年5月11日，1.0版本發布。

·      2016年5月20日，允許向Mac應用商店提交軟件包。

·      2016年8月2日，支持Windows商店。

簡而言之，Electron JS是一個運行時框架，它允許用戶使用HTML5、CSS和JavaScript創建桌面套件應用程序，而大部分應用程序都是由兩種非常受歡迎的技術混合而成：Node.js和Chromium。因此，您編寫的任何Web應用程序都可以在Electron JS 上正常運行。

Electron的內置功能包括：

·      自動更新 - 使應用程序能夠自動更新、升級

·      本機菜單和通知 - 創建本機應用程序菜單和上下文菜單

·      應用程序崩潰報告 - 您可以將崩潰報告提交給遠程服務器

·      調試和分析 - Chromium的內容模塊可以發現性能瓶頸和運行緩慢的原因。此外，您也可以在應用中使用自己喜歡的Chrome開發者工具

·      Windows安裝程序 -您可以快速而簡單創建安裝包

二、Electron 可以用來做什么？（哪些場景需要使用Electron）

以Windows平台應用開發為例，大部分人首先會想到使用成熟的開發方案，如QT(C++)、WPF(C#) 等。但面臨以下幾種使用場景，這些方案將顯得捉襟見肘：

·      公司要設計一個全新的APP， 但技術人員大部分由前端開發構成

·      公司原本就有在線的Web應用，但是想讓該應用能夠在桌面端直接打開（離線狀態下也可使用），並增加一些與系統交互的功能

 

以我的親身經歷為例：

在SpreadJS項目中，我們需要將基於web版的表格編輯器封裝成APP使用，同時增加文件操作的能力，如導入導出excel、導入PDF 等，而SpreadJS是一個純前端的表格控件，開發人員全部由前端開發組成，對C++和C#並不熟悉，如果投入過大的時間精力用來學習其他開發語言，整個項目的技術管理和項目管理將變得無法控制。除此之外，鑒於項目本身對應用的業務邏輯要求並不高，只是套一個具有瀏覽器屬性的運行環境即可，因此，單獨為此配置C++、C# 開發人員將無形中提升更多項目成本。

為此，我們引入了Electron框架：現有的前端開發人員能在不學習其他語言的情況下，直接搞定上述需求，這就是Electron 為我們帶來的價值。

三、為什么選擇 Electron？（Electron的出現為前端開發者謀得了一份好差事）

可以這么說，Electron這個框架讓網路里流傳很廣的一句話不再是玩笑：“不要和老夫說什么C++、Java，老夫行走江湖就一把JS，遇到需求擼起袖子就是干”。Electron可以幫助前端開發者在不需要學習其他語言和技能的情況下，快速開發跨平台桌面應用。

Electron的出現將蠶食很大一部分桌面客戶端領域的市場份額，鑒於它的跨平台特性，在不同系統之間僅需少量的優化工作。可想而知，這個成本到底有多低。

在開發的體驗上，Electron是基於"Chromium"和"Node.js"的，所以幾乎所有的Node.js模塊都可以在Electron上運行，並很容易使用“npm”搭積木的方式快速交付一個產品。

四、大型應用使用Electron框架的成功案例

 
1. SpreadJS純前端表格控件
 
SpreadJS 是一款基於 HTML5 的純前端電子表格控件，以“高速低耗、高度類似Excel、可無限擴展”為產品特色，提供移動跨平台和瀏覽器支持，同時滿足 .NET、Java、App 等應用程序中的 Web Excel 組件開發、數據填報、在線文檔、圖表公式聯動、類 Excel UI 設計等業務場景，在數據可視化、Excel 導入導出、公式引用、數據綁定、框架集成等場景下無需大量代碼開發和測試，極大降低了企業研發成本和項目交付風險。

2. WebTorrent

WebTorrent，作為第一個在瀏覽器中運行的torrent客戶端，是一個完全由JavaScript編寫並使用WebRTC進行點對點傳輸的客戶端應用。無需任何插件，擴展或安裝，WebTorrent將用戶鏈接到分散的瀏覽器到瀏覽器網絡，以確保有效的文件傳輸。

WebTorrent使用Electron框架開發，使其盡可能輕量、無廣告且開源。此外，使用Electron還有助於流式傳輸，並充當混合客戶端，將應用程序連接到所有流行BitTorrent和WebTorrent網絡。

3. WordPress

WordPress 桌面是一個使用了Electron和React作為框架的桌面應用程序，提供無縫的跨平台體驗，允許用戶專注於他們的內容和設計，而不會被任何瀏覽器標簽所分心。

4. Slack

Slack采用了Electron框架構建，鑒於其高性能表現和無框架外觀，將帶來與瀏覽器完全不同的體驗方式。對於尋求更集中的工作空間的團隊來說，Slack Desktop絕對是最適合的應用程序之一。

雖然Slack Desktop融合了很多技術，但大多數資源文件和代碼都是遠程加載的，它們結合了Chromium的渲染引擎和Node.js運行時和模塊系統。

5. WhatsApp

WhatsApp作為下載量最高的Messenger應用程序，也是基於Electron框架構建的。Electron幫助WhatsApp開發人員以低廉的成本完成了幾乎所有工作，並通過更加簡化和創新的技術，為用戶帶來全新的桌面體驗方式。

Electron 架構實現
 

Electron基本文件結構

Electron有一個基本的文件結構，類似於我們在創建網頁時使用的文件結構：

electron-quick-start

- index.html 這是一個HTML5網頁，是一個渲染器進程，在加載的時候會渲染index.html頁面

- main.js 創建窗口並處理系統事件

- package.json 是我們應用程序的啟動腳本。它將在主進程中運行，並包含有關應用程序的所有信息

Electron的架構主要分為兩部分：主進程和渲染進程

回顧以往的web開發，我們的代碼，無論是HTML、CSS還是Javascript，都是運行在瀏覽器沙盒中的，我們無法越過瀏覽器的權限訪問系統本身的資源，代碼的能力被限制在了瀏覽器中。瀏覽器之所以這么做，是為了安全的考慮。設想一下，我們在使用瀏覽器的時候，會打開各式各樣不同來源的網站，如果JavaScript代碼有能力訪問並操作本地操作系統的資源，那將是多么可怕的事情。

假設：你在某天不小心打開了一個惡意的網站，可能你存儲在硬盤上的文件就被偷走了（都用不着去修電腦）。

但我們要開發的是桌面應用程序，如果無法訪問到本地的資源肯定是不行的。Electron將nodejs巧妙的融合了進來，讓nodejs作為整個程序的管家。管家擁有較高的權限，可以訪問和操作本地資源，使用原本在瀏覽器中不提供的高級API。同時管家也管理着渲染進程窗口的創建和銷毀。所以，我們將這個管家稱之為主進程。在使用Electron開發的程序中，會使用main.js作為程序的主入口，該文件內代碼執行的內容，就是主進程中執行的內容。

主進程

主進程控制應用程序的生命周期。Electron 用來運行 package.json 的 main 腳本的進程被稱為主進程。 在主進程中運行的腳本通過創建web頁面來展示用戶界面。它內置了完整的Node.js API，主要用於打開對話框以及創建渲染進程。此外，主進程還負責處理與其他操作系統交互、啟動和退出應用程序。

主進程就像是應用程序的管家，負責管理整個應用程序的生命周期以及所有渲染進程的創建。

按照慣例，主進程位於名為main.js的文件中，你可以通過在package.json文件中修改配置屬性來更改主進程文件。

比如，我們可以打開package.json並更改配置屬性：

“main”: “main.js”, -> “main”: “mainTest.js”,

 

請注意，Electron有且只有一個主進程。且主進程銷毀時，所有渲染進程也將一並銷毀。在chrome瀏覽器的默認策略下，每一個tab都是獨立的進程，Electron也正是利用了這一策略。

渲染進程

渲染進程是應用程序中的瀏覽器窗口。與主進程不同，Electron可以有許多渲染進程，且每個進程都是獨立的。由於 Electron 使用了 Chromium 來展示web 頁面，所以 Chromium 的多進程架構也被使用到。 每個Electron中的 web 頁面運行在它自己的渲染進程中。

正是因為每個渲染進程都是獨立的，因此一個崩潰不會影響另外一個，這些要歸功於Chromium的多進程架構。

如何保持進程通信？

 

即便Electron中的所有進程同時存在並保持獨立運行，但他們仍然需要以某種方式進行溝通，尤其是在他們負責不同任務的時候。

為了保持進程通信，Electron有一個進程間通信系統（IPC也就是內部進程通信）。您可以使用IPC在主進程和渲染進程之間傳遞信息。

// 在主進程中
global.sharedObject = {
someProperty: 'default value'
}
// 在第一個頁面中
require('electron').remote.getGlobal('sharedObject').someProperty= 'new value'Copy
// 在第二個頁面中
console.log(require('electron').remote.getGlobal('sharedObject').someProperty)

 

Electron 進程通信的實現方式：

·      主進程使用 BrowserWindow 實例創建頁面。每個 BrowserWindow 實例都在自己的渲染進程里運行頁面。 當一個BrowserWindow 實例被銷毀后，相應的渲染進程也會被終止。

·      主進程管理所有的web頁面和它們對應的渲染進程。 每個渲染進程都是獨立的，它只關心它所運行的 web頁面。

·      在頁面中調用與 GUI 相關的原生 API 是不被允許的，因為在 web 頁面里操作原生的GUI 資源是非常危險的，而且容易造成資源泄露。 如果你想在 web 頁面里使用 GUI 操作，其對應的渲染進程必須與主進程進行通訊，請求主進程進行相關的 GUI 操作。

說句題外話：在兩個網頁（渲染進程）間共享數據最簡單的方法是使用瀏覽器中已經實現的 HTML5 API。 其中比較好的方案是用 Storage API， localStorage，sessionStorage 或者 IndexedDB，但這些不是今天的主題。

 

如何構建 Electron系統架構？

為了降低構建整個 Chromium 帶來的復雜度，Electron通過libchromiumcontent 來訪問 Chromium 的Content API。libchromiumcontent 是一個獨立的、引入了 Chromium Content 模塊及其所有依賴的共享庫。用戶不需要一個強勁的機器來構建Electron。

Electron只用了Chromium的渲染庫而不是其全部組件。這使得升Chromium更加容易，但也意味着Electron缺少了Google Chrome里的一些瀏覽器相關的特性。

 

打包

原來打包步驟略微繁瑣，如今由於社區發展，產生了很多優秀的打包工具，讓我們可以不用關注很多細節，（比如asar）

我們僅需做的 ：將app 的目錄結構整理好，提供對應的資源，如icon等，然后使用工具制作鏡像即可將資源打包成為各個平台下的APP應用。

 

打包工具的選擇

通常情況下，我們選擇Electron-builder （跨平台支持性較好，上手成本低）

 

Electron 快速上手實踐　　

這里我准備了一個Demo項目，這個Demo源碼您可以在葡萄城技術社區獲取到。

這個演示我將以SpreadJS的一個應用為例，展示如何將Web應用轉換為Electron桌面應用。

我這里使用electron-builder進行項目文件的打包，您可以直接在項目根目錄通過 npx electron-builder命令執行打包命令。

項目打包過程可能需要些時間，在這期間，我向您介紹一下Electron 打包的配置文件，您可以根據您的實際情況配置如下文件以滿足您的需求

"build": {
"appId": "your.id", // appid
"productName": "程序名稱",// 程序名稱
"files": [ // 打包需要的不過濾的文件
"build/**/*",
"main.js",
"node_modules/**/*"
],
"directories": {
"output": "./dist-out", // 打包輸出的目錄
"app": "./", // package所在路徑
"buildResources": "assets"
},
"nsis": {
"oneClick": false, // 是否需要點擊安裝，自動更新需要關掉
"allowToChangeInstallationDirectory":true, //是否能夠選擇安裝路徑
"perMachine": true // 是否需要輔助安裝頁面
},
"win": {
"target": [
{
"target": "nsis", // 輸出目錄的方式
"arch": [ // 輸出的配置ia32或者x64/x86
"x64"
}
],
"publish": [ // 自動更新的配置
{
"provider": "generic", // 自己配置更新的服務器要選generic
"url":"http://127.0.0.1:8080/updata/" //更新配置的路徑
}
}
}　　

 

 緩慢的打包進程結束后，您應該可以在項目目錄中的build目錄看到生成的exe文件

點擊安裝，它就像一個普通的桌面應用程序一樣開始了安裝進程。（這里的軟件名稱和軟件logo都是我們項目中配置好的）

 

安裝完成后，打開程序，這里我們可以看到打包好的應用和在Web端訪問時的效果別無二致，同時也能夠像其他桌面應用程序一樣，支持離線使用。

 

 

至此，初探Electron，從入門到實踐教程結束，如果大家還有更多使用上的疑惑或想要了解更多高級用法，可以通過官方文檔學習https://electronjs.org/docs。

同時，葡萄城資深開發工程師也為大家在2019年9月4日 14：00准備了干貨滿滿的線上技術分享公開課，本次分享的內容也正是文中提到的Electron實踐，屆時歡迎大家按時參加。

http://live.vhall.com/878864086

 

PS：相關圖片和資源來自網絡，如侵連刪