如何使用Electron構建響應式桌面應用

如果您像我一樣，就喜歡JavaScript及其生態系統，并且一直在使用React之類的框架或帶有NodeJS的高性能Web服務器來構建出色的Web應用程序。現在，您想開發一個桌面應用程序，不想學習一種新的編程語言，或者您想盡可能地從現有Web項目中重用。這是Electron進入圖片保存日期的時間。

Electron允許您使用HTML，CSS和JavaScript構建桌面應用程序。互聯網上有很多反對Electron的論據，其中之一就是它的性能和許多次低質量的應用程序，但不要怪罪框架。電子功能強大且性能卓越。如今，許多流行的應用程序都在Electron之上運行，例如VS Code，Slack，Skype，Discord等。

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

我們可以改善什么?在本文中，我們將探究Electron的基礎知識，并將構建一個示例應用程序來展示一些Electron方式。

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

電子如何工作?

電子建立在3個主要組件之上：

鉻：負責網站內容

NodeJS：用于與操作系統進行交互

自定義API：解決與操作系統打交道時的常見問題

如架構圖所示，這些組件中的每個組件都在電子架構層上以不同級別進行交互。

電子架構

電子有兩種類型的過程。

主要流程：負責窗口管理以及與操作系統的所有交互。這就是一切的開始，它可以創建和管理多個渲染器進程

渲染器過程：可能有一個或多個，每個都將托管一個Chrome實例并負責Web內容。

請務必注意，渲染器進程無法直接訪問OS功能。相反，他們通過IPC與主要流程進行通信以實現這些任務。

許多典型的Electron應用程序將使用主進程創建一個渲染器進程并加載其Web應用程序。今天，我們將邁出這一步。

必備部分：Hello World!

接下來，我們將構建一個“ hello world!” 應用。我們不會使用不必要的框架或庫來專注于Electron代碼。

讓我們開始吧。

設置電子

構建應用程序的第一步是創建一個項目并安裝電子庫，因此從使用NPM創建項目開始：

npm init

并設置您的應用程序詳細信息。作為該應用程序的起點，我喜歡使用main.js，但您可以使用所需的任何文件名。

接下來，安裝Electron。

npm install -D electron@latest

建立屏幕

對于我們的微hello世界示例，我們需要兩個文件，main.js和hello-world.html。main.js是我們的主要過程;我們將創建第一個渲染器進程，以加載我們的hello-world.html。