如果您像我一樣，就喜歡JavaScript及其生態(tài)系統(tǒng)，并且一直在使用React之類的框架或帶有NodeJS的高性能Web服務(wù)器來構(gòu)建出色的Web應(yīng)用程序。現(xiàn)在，您想開發(fā)一個(gè)桌面應(yīng)用程序，不想學(xué)習(xí)一種新的編程語(yǔ)言，或者您想盡可能地從現(xiàn)有Web項(xiàng)目中重用。這是Electron進(jìn)入圖片保存日期的時(shí)間。

Electron允許您使用HTML，CSS和JavaScript構(gòu)建桌面應(yīng)用程序?；ヂ?lián)網(wǎng)上有很多反對(duì)Electron的論據(jù)，其中之一就是它的性能和許多次低質(zhì)量的應(yīng)用程序，但不要怪罪框架。電子功能強(qiáng)大且性能卓越。如今，許多流行的應(yīng)用程序都在Electron之上運(yùn)行，例如VS Code，Slack，Skype，Discord等。

但是，為什么會(huì)有很多人這么反對(duì)呢?問題始于應(yīng)用程序和人們使用Electron的方式。對(duì)于許多人來說，將Web應(yīng)用程序移植到Electron意味著將您現(xiàn)有的代碼保持原樣并將其嵌入到Electron容器中。這是一件可怕的事情嗎?也許不是，但是您沒有充分利用Electron的功能。您僅在更改獨(dú)立應(yīng)用程序的瀏覽器選項(xiàng)卡。

我們可以改善什么?在本文中，我們將探究Electron的基礎(chǔ)知識(shí)，并將構(gòu)建一個(gè)示例應(yīng)用程序來展示一些Electron方式。

[閱讀：Neural在2021年及以后的人工智能市場(chǎng)前景]

電子如何工作?

電子建立在3個(gè)主要組件之上：

鉻：負(fù)責(zé)網(wǎng)站內(nèi)容

NodeJS：用于與操作系統(tǒng)進(jìn)行交互

自定義API：解決與操作系統(tǒng)打交道時(shí)的常見問題

如架構(gòu)圖所示，這些組件中的每個(gè)組件都在電子架構(gòu)層上以不同級(jí)別進(jìn)行交互。

電子架構(gòu)

電子有兩種類型的過程。

主要流程：負(fù)責(zé)窗口管理以及與操作系統(tǒng)的所有交互。這就是一切的開始，它可以創(chuàng)建和管理多個(gè)渲染器進(jìn)程

渲染器過程：可能有一個(gè)或多個(gè)，每個(gè)都將托管一個(gè)Chrome實(shí)例并負(fù)責(zé)Web內(nèi)容。

請(qǐng)務(wù)必注意，渲染器進(jìn)程無(wú)法直接訪問OS功能。相反，他們通過IPC與主要流程進(jìn)行通信以實(shí)現(xiàn)這些任務(wù)。

許多典型的Electron應(yīng)用程序?qū)⑹褂弥鬟M(jìn)程創(chuàng)建一個(gè)渲染器進(jìn)程并加載其Web應(yīng)用程序。今天，我們將邁出這一步。

必備部分：Hello World!

接下來，我們將構(gòu)建一個(gè)“ hello world!” 應(yīng)用。我們不會(huì)使用不必要的框架或庫(kù)來專注于Electron代碼。

讓我們開始吧。

設(shè)置電子

構(gòu)建應(yīng)用程序的第一步是創(chuàng)建一個(gè)項(xiàng)目并安裝電子庫(kù)，因此從使用NPM創(chuàng)建項(xiàng)目開始：

npm init

并設(shè)置您的應(yīng)用程序詳細(xì)信息。作為該應(yīng)用程序的起點(diǎn)，我喜歡使用main.js，但您可以使用所需的任何文件名。

接下來，安裝Electron。

npm install -D electron@latest

建立屏幕

對(duì)于我們的微hello世界示例，我們需要兩個(gè)文件，main.js和hello-world.html。main.js是我們的主要過程;我們將創(chuàng)建第一個(gè)渲染器進(jìn)程，以加載我們的hello-world.html。