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

帶著這些問(wèn)題和疑惑，通過(guò)本文的介紹，可助您全面地認(rèn)識(shí)Electron這門(mén)新興的技術(shù)，迅速找到其入門(mén)途徑，并理解Electron為何被稱(chēng)為當(dāng)下開(kāi)發(fā)桌面App的最佳選擇。

初探Electron

一、Electron是什么？（為何稱(chēng)之為“跨平臺(tái)桌面瀏覽器”）

前端開(kāi)發(fā)的魅力，在于開(kāi)發(fā)者隨時(shí)要面臨全新技術(shù)的挑戰(zhàn)！

曾幾何時(shí)，作為前端開(kāi)發(fā)者的你可曾想過(guò)：如何利用HTML、CSS和JavaScript構(gòu)建跨平臺(tái)的桌面應(yīng)用程序？借助 Electron，這項(xiàng)工作將比你想象的更加簡(jiǎn)單。Electron作為一個(gè)使用新興技術(shù)（包括JavaScript，HTML和CSS），可以幫助用戶(hù)建立與系統(tǒng)功能的交互，讓開(kāi)發(fā)人員可以更專(zhuān)注于應(yīng)用程序本身。

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

Electron發(fā)展里程碑

• 2013年4月11日，Electron以Atom Shell為名起步。
• 2014年5月6日，Atom以及Atom Shell以MIT許可證開(kāi)源。
• 2015年4月17日，Atom Shell改名為Electron。
• 2016年5月11日，1.0版本發(fā)布。
• 2016年5月20日，允許向Mac應(yīng)用商店提交軟件包。
• 2016年8月2日，支持Windows商店。

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

Electron的內(nèi)置功能包括：

• 自動(dòng)更新 - 使應(yīng)用程序能夠自動(dòng)更新、升級(jí)
• 本機(jī)菜單和通知 - 創(chuàng)建本機(jī)應(yīng)用程序菜單和上下文菜單
• 應(yīng)用程序崩潰報(bào)告 - 您可以將崩潰報(bào)告提交給遠(yuǎn)程服務(wù)器
• 調(diào)試和分析 - Chromium的內(nèi)容模塊可以發(fā)現(xiàn)性能瓶頸和運(yùn)行緩慢的原因。此外，您也可以在應(yīng)用中使用自己喜歡的Chrome開(kāi)發(fā)者工具
• Windows安裝程序 -您可以快速而簡(jiǎn)單創(chuàng)建安裝包

二、Electron 可以用來(lái)做什么？（哪些場(chǎng)景需要使用Electron）

以Windows平臺(tái)應(yīng)用開(kāi)發(fā)為例，大部分人首先會(huì)想到使用成熟的開(kāi)發(fā)方案，如QT(C++)、WPF(C#) 等。但面臨以下幾種使用場(chǎng)景，這些方案將顯得捉襟見(jiàn)肘：

• 公司要設(shè)計(jì)一個(gè)全新的APP， 但技術(shù)人員大部分由前端開(kāi)發(fā)構(gòu)成
• 公司原本就有在線的Web應(yīng)用，但是想讓該應(yīng)用能夠在桌面端直接打開(kāi)（離線狀態(tài)下也可使用），并增加一些與系統(tǒng)交互的功能

在這里有一個(gè)實(shí)際的例子：
在SpreadJS項(xiàng)目中，用戶(hù)需要將基于web版的表格編輯器封裝成APP使用，同時(shí)增加文件操作的能力，如導(dǎo)入導(dǎo)出excel、導(dǎo)入PDF等，而SpreadJS是一個(gè)純前端的表格控件，開(kāi)發(fā)人員全部由前端開(kāi)發(fā)組成，對(duì)C++和C#并不熟悉，如果投入過(guò)大的時(shí)間精力用來(lái)學(xué)習(xí)其他開(kāi)發(fā)語(yǔ)言，整個(gè)項(xiàng)目的技術(shù)管理和項(xiàng)目管理將變得無(wú)法控制。除此之外，鑒于項(xiàng)目本身對(duì)應(yīng)用的業(yè)務(wù)邏輯要求并不高，只是套一個(gè)具有瀏覽器屬性的運(yùn)行環(huán)境即可，因此，單獨(dú)為此配置C++、C# 開(kāi)發(fā)人員將無(wú)形中提升更多項(xiàng)目成本。

為此，我們引入了Electron框架：現(xiàn)有的前端開(kāi)發(fā)人員能在不學(xué)習(xí)其他語(yǔ)言的情況下，直接搞定上述需求，這就是Electron 為我們帶來(lái)的價(jià)值。

三、為什么選擇 Electron？（Electron的出現(xiàn)為前端開(kāi)發(fā)者謀得了一份好差事）

可以這么說(shuō)，Electron這個(gè)框架讓網(wǎng)路里流傳很廣的一句話(huà)不再是玩笑：“不要和老夫說(shuō)什么C++、Java，老夫行走江湖就一把JS，遇到需求擼起袖子就是干”。Electron可以幫助前端開(kāi)發(fā)者在不需要學(xué)習(xí)其他語(yǔ)言和技能的情況下，快速開(kāi)發(fā)跨平臺(tái)桌面應(yīng)用。

Electron的出現(xiàn)將蠶食很大一部分桌面客戶(hù)端領(lǐng)域的市場(chǎng)份額，鑒于它的跨平臺(tái)特性，在不同系統(tǒng)之間僅需少量的優(yōu)化工作。可想而知，這個(gè)成本到底有多低。

在開(kāi)發(fā)的體驗(yàn)上，Electron是基于"Chromium"和"Node.js"的，所以幾乎所有的Node.js模塊都可以在Electron上運(yùn)行，并很容易使用“npm”搭積木的方式快速交付一個(gè)產(chǎn)品。

四、大型應(yīng)用使用Electron框架的成功案例

1. SpreadJS純前端表格控件

SpreadJS 是一款基于 HTML5 的純前端電子表格控件，以“高速低耗、高度類(lèi)似Excel、可無(wú)限擴(kuò)展”為產(chǎn)品特色，提供移動(dòng)跨平臺(tái)和瀏覽器支持，同時(shí)滿(mǎn)足 .NET、Java、App 等應(yīng)用程序中的 Web Excel 組件開(kāi)發(fā)、數(shù)據(jù)填報(bào)、在線文檔、圖表公式聯(lián)動(dòng)、類(lèi) Excel UI 設(shè)計(jì)等業(yè)務(wù)場(chǎng)景，在數(shù)據(jù)可視化、Excel 導(dǎo)入導(dǎo)出、公式引用、數(shù)據(jù)綁定、框架集成等場(chǎng)景下無(wú)需大量代碼開(kāi)發(fā)和測(cè)試，極大降低了企業(yè)研發(fā)成本和項(xiàng)目交付風(fēng)險(xiǎn)。

2. WebTorrent

WebTorrent，作為第一個(gè)在瀏覽器中運(yùn)行的torrent客戶(hù)端，是一個(gè)完全由JavaScript編寫(xiě)并使用WebRTC進(jìn)行點(diǎn)對(duì)點(diǎn)傳輸?shù)目蛻?hù)端應(yīng)用。無(wú)需任何插件，擴(kuò)展或安裝，WebTorrent將用戶(hù)鏈接到分散的瀏覽器到瀏覽器網(wǎng)絡(luò)，以確保有效的文件傳輸。

WebTorrent使用Electron框架開(kāi)發(fā)，使其盡可能輕量、無(wú)廣告且開(kāi)源。此外，使用Electron還有助于流式傳輸，并充當(dāng)混合客戶(hù)端，將應(yīng)用程序連接到所有流行BitTorrent和WebTorrent網(wǎng)絡(luò)。

3. WordPress

WordPress 桌面是一個(gè)使用了Electron和React作為框架的桌面應(yīng)用程序，提供無(wú)縫的跨平臺(tái)體驗(yàn)，允許用戶(hù)專(zhuān)注于他們的內(nèi)容和設(shè)計(jì)，而不會(huì)被任何瀏覽器標(biāo)簽所分心。

4. Slack

Slack采用了Electron框架構(gòu)建，鑒于其高性能表現(xiàn)和無(wú)框架外觀，將帶來(lái)與瀏覽器完全不同的體驗(yàn)方式。對(duì)于尋求更集中的工作空間的團(tuán)隊(duì)來(lái)說(shuō)，Slack Desktop絕對(duì)是最適合的應(yīng)用程序之一。雖然Slack Desktop融合了很多技術(shù)，但大多數(shù)資源文件和代碼都是遠(yuǎn)程加載的，它們結(jié)合了Chromium的渲染引擎和Node.js運(yùn)行時(shí)和模塊系統(tǒng)。

5. WhatsApp

WhatsApp作為下載量最高的Messenger應(yīng)用程序，也是基于Electron框架構(gòu)建的。Electron幫助WhatsApp開(kāi)發(fā)人員以低廉的成本完成了幾乎所有工作，并通過(guò)更加簡(jiǎn)化和創(chuàng)新的技術(shù)，為用戶(hù)帶來(lái)全新的桌面體驗(yàn)方式。

Electron 架構(gòu)實(shí)現(xiàn)

Electron基本文件結(jié)構(gòu)

Electron有一個(gè)基本的文件結(jié)構(gòu)，類(lèi)似于我們?cè)趧?chuàng)建網(wǎng)頁(yè)時(shí)使用的文件結(jié)構(gòu)：

electron-quick-start

• index.html 這是一個(gè)HTML5網(wǎng)頁(yè)，是一個(gè)渲染器進(jìn)程，在加載的時(shí)候會(huì)渲染index.html頁(yè)面
• main.js 創(chuàng)建窗口并處理系統(tǒng)事件
• package.json 是我們應(yīng)用程序的啟動(dòng)腳本。它將在主進(jìn)程中運(yùn)行，并包含有關(guān)應(yīng)用程序的所有信息

Electron的架構(gòu)主要分為兩部分：主進(jìn)程和渲染進(jìn)程

回顧以往的web開(kāi)發(fā)，我們的代碼，無(wú)論是HTML、CSS還是Javascript，都是運(yùn)行在瀏覽器沙盒中的，我們無(wú)法越過(guò)瀏覽器的權(quán)限訪問(wèn)系統(tǒng)本身的資源，代碼的能力被限制在了瀏覽器中。瀏覽器之所以這么做，是為了安全的考慮。設(shè)想一下，我們?cè)谑褂脼g覽器的時(shí)候，會(huì)打開(kāi)各式各樣不同來(lái)源的網(wǎng)站，如果JavaScript代碼有能力訪問(wèn)并操作本地操作系統(tǒng)的資源，那將是多么可怕的事情。

假設(shè)：你在某天不小心打開(kāi)了一個(gè)惡意的網(wǎng)站，可能你存儲(chǔ)在硬盤(pán)上的文件就被偷走了（都用不著去修電腦）。

但我們要開(kāi)發(fā)的是桌面應(yīng)用程序，如果無(wú)法訪問(wèn)到本地的資源肯定是不行的。Electron將nodejs巧妙的融合了進(jìn)來(lái)，讓nodejs作為整個(gè)程序的管家。管家擁有較高的權(quán)限，可以訪問(wèn)和操作本地資源，使用原本在瀏覽器中不提供的高級(jí)API。同時(shí)管家也管理著渲染進(jìn)程窗口的創(chuàng)建和銷(xiāo)毀。所以，我們將這個(gè)管家稱(chēng)之為主進(jìn)程。在使用Electron開(kāi)發(fā)的程序中，會(huì)使用main.js作為程序的主入口，該文件內(nèi)代碼執(zhí)行的內(nèi)容，就是主進(jìn)程中執(zhí)行的內(nèi)容。

主進(jìn)程

主進(jìn)程控制應(yīng)用程序的生命周期。Electron 用來(lái)運(yùn)行 package.json 的 main 腳本的進(jìn)程被稱(chēng)為主進(jìn)程。 在主進(jìn)程中運(yùn)行的腳本通過(guò)創(chuàng)建web頁(yè)面來(lái)展示用戶(hù)界面。它內(nèi)置了完整的Node.js API，主要用于打開(kāi)對(duì)話(huà)框以及創(chuàng)建渲染進(jìn)程。此外，主進(jìn)程還負(fù)責(zé)處理與其他操作系統(tǒng)交互、啟動(dòng)和退出應(yīng)用程序。

主進(jìn)程就像是應(yīng)用程序的管家，負(fù)責(zé)管理整個(gè)應(yīng)用程序的生命周期以及所有渲染進(jìn)程的創(chuàng)建。

按照慣例，主進(jìn)程位于名為main.js的文件中，你可以通過(guò)在package.json文件中修改配置屬性來(lái)更改主進(jìn)程文件。

比如，我們可以打開(kāi)package.json并更改配置屬性：

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

請(qǐng)注意，Electron有且只有一個(gè)主進(jìn)程。且主進(jìn)程銷(xiāo)毀時(shí)，所有渲染進(jìn)程也將一并銷(xiāo)毀。在chrome瀏覽器的默認(rèn)策略下，每一個(gè)tab都是獨(dú)立的進(jìn)程，Electron也正是利用了這一策略。

渲染進(jìn)程

渲染進(jìn)程是應(yīng)用程序中的瀏覽器窗口。與主進(jìn)程不同，Electron可以有許多渲染進(jìn)程，且每個(gè)進(jìn)程都是獨(dú)立的。由于 Electron 使用了 Chromium 來(lái)展示web 頁(yè)面，所以 Chromium 的多進(jìn)程架構(gòu)也被使用到。 每個(gè)Electron中的 web 頁(yè)面運(yùn)行在它自己的渲染進(jìn)程中。

正是因?yàn)槊總€(gè)渲染進(jìn)程都是獨(dú)立的，因此一個(gè)崩潰不會(huì)影響另外一個(gè)，這些要?dú)w功于Chromium的多進(jìn)程架構(gòu)。

如何保持進(jìn)程通信？

即便Electron中的所有進(jìn)程同時(shí)存在并保持獨(dú)立運(yùn)行，但他們?nèi)匀恍枰阅撤N方式進(jìn)行溝通，尤其是在他們負(fù)責(zé)不同任務(wù)的時(shí)候。

為了保持進(jìn)程通信，Electron有一個(gè)進(jìn)程間通信系統(tǒng)（IPC也就是內(nèi)部進(jìn)程通信）。您可以使用IPC在主進(jìn)程和渲染進(jìn)程之間傳遞信息。

// 在主進(jìn)程中

Electron 進(jìn)程通信的實(shí)現(xiàn)方式：

• 主進(jìn)程使用 BrowserWindow 實(shí)例創(chuàng)建頁(yè)面。每個(gè) BrowserWindow 實(shí)例都在自己的渲染進(jìn)程里運(yùn)行頁(yè)面。 當(dāng)一個(gè)BrowserWindow 實(shí)例被銷(xiāo)毀后，相應(yīng)的渲染進(jìn)程也會(huì)被終止。
• 主進(jìn)程管理所有的web頁(yè)面和它們對(duì)應(yīng)的渲染進(jìn)程。 每個(gè)渲染進(jìn)程都是獨(dú)立的，它只關(guān)心它所運(yùn)行的 web頁(yè)面。
• 在頁(yè)面中調(diào)用與 GUI 相關(guān)的原生 API 是不被允許的，因?yàn)樵?web 頁(yè)面里操作原生的GUI 資源是非常危險(xiǎn)的，而且容易造成資源泄露。 如果你想在 web 頁(yè)面里使用 GUI 操作，其對(duì)應(yīng)的渲染進(jìn)程必須與主進(jìn)程進(jìn)行通訊，請(qǐng)求主進(jìn)程進(jìn)行相關(guān)的 GUI 操作。

說(shuō)句題外話(huà)：在兩個(gè)網(wǎng)頁(yè)（渲染進(jìn)程）間共享數(shù)據(jù)最簡(jiǎn)單的方法是使用瀏覽器中已經(jīng)實(shí)現(xiàn)的 HTML5 API。 其中比較好的方案是用 Storage API， localStorage，sessionStorage 或者 IndexedDB，但這些不是今天的主題。

如何構(gòu)建 Electron系統(tǒng)架構(gòu)？

為了降低構(gòu)建整個(gè) Chromium 帶來(lái)的復(fù)雜度，Electron通過(guò)libchromiumcontent 來(lái)訪問(wèn) Chromium 的Content API。libchromiumcontent 是一個(gè)獨(dú)立的、引入了 Chromium Content 模塊及其所有依賴(lài)的共享庫(kù)。用戶(hù)不需要一個(gè)強(qiáng)勁的機(jī)器來(lái)構(gòu)建Electron。

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

打包

原來(lái)打包步驟略微繁瑣，如今由于社區(qū)發(fā)展，產(chǎn)生了很多優(yōu)秀的打包工具，讓我們可以不用關(guān)注很多細(xì)節(jié)，（比如asar）

我們僅需做的 ：將app 的目錄結(jié)構(gòu)整理好，提供對(duì)應(yīng)的資源，如icon等，然后使用工具制作鏡像即可將資源打包成為各個(gè)平臺(tái)下的APP應(yīng)用。

打包工具的選擇

通常情況下，我們選擇Electron-builder （跨平臺(tái)支持性較好，上手成本低）

Electron 快速上手實(shí)踐

這里我準(zhǔn)備了一個(gè)演示，這個(gè)演示我將以SpreadJS的一個(gè)應(yīng)用為例，展示如何將Web應(yīng)用轉(zhuǎn)換為Electron桌面應(yīng)用。

我這里使用electron-builder進(jìn)行項(xiàng)目文件的打包，您可以直接在項(xiàng)目根目錄通過(guò) npx electron-builder命令執(zhí)行打包命令。

項(xiàng)目打包過(guò)程可能需要些時(shí)間，在這期間，我向您介紹一下Electron 打包的配置文件，您可以根據(jù)您的實(shí)際情況配置如下文件以滿(mǎn)足您的需求。

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

緩慢的打包進(jìn)程結(jié)束后，您應(yīng)該可以在項(xiàng)目目錄中的build目錄看到生成的exe文件。

點(diǎn)擊安裝，它就像一個(gè)普通的桌面應(yīng)用程序一樣開(kāi)始了安裝進(jìn)程。（這里的軟件名稱(chēng)和軟件logo都是我們項(xiàng)目中配置好的）。

安裝完成后，打開(kāi)程序，這里我們可以看到打包好的應(yīng)用和在Web端訪問(wèn)時(shí)的效果別無(wú)二致，同時(shí)也能夠像其他桌面應(yīng)用程序一樣，支持離線使用。

以上就是教程的全部?jī)?nèi)容了，最后，有什么問(wèn)題歡迎討論，如果對(duì)您有幫助，歡迎點(diǎn)贊/關(guān)注/留言友愛(ài)三連走起來(lái)~

總結(jié)

以上是生活随笔為你收集整理的android开发入门与实践_Electron从入门到实践，前端开发者开发桌面App的最佳选择...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。