使用 JavaScript 和 Electron.js 構建桌面 GUI 應用程式

在當今科技時代，桌面應用程式在我們的日常生活中具有極其重要的意義，它們提供了增強的使用者體驗並充分利用了本地機器的功能。傳統上，開發桌面應用程式需要精通特定平臺的程式語言和框架，這對希望涉足桌面開發的 Web 開發人員來說是一個挑戰。然而，Electron.js 有效地解決了這一難題。

Electron.js 以前稱為 Atom Shell，是一個源自 GitHub 的開源框架。它使開發人員能夠使用熟悉的 Web 技術（如 HTML、CSS 和 JavaScript）構建跨平臺桌面應用程式。透過彌合 Web 開發和桌面應用程式開發之間的差距，Electron.js 為開發人員創造了新的機會，讓他們能夠建立強大且功能豐富的桌面應用程式。

Electron.js 的架構

要了解 Electron.js 的工作原理，讓我們仔細看看它的架構。Electron.js 結合了兩個主要元件：Chromium 渲染引擎和 Node.js 執行時。

  • Chromium 渲染引擎 − Electron.js 使用與流行的 Web 瀏覽器 Google Chrome 相同的渲染引擎——Chromium。這使得 Electron.js 應用程式能夠以與 Web 瀏覽器相同的功能和效能渲染和顯示 Web 內容。

  • Node.js 執行時 − Electron.js 集成了 Node.js 執行時，它提供了對底層作業系統和原生 API 的訪問。這意味著開發人員可以充分利用 Node.js 的強大功能，並利用其廣泛的模組和庫生態系統來構建桌面應用程式。

Electron.js 利用多程序架構，其中每個 Electron.js 應用程式都包含兩個主要程序：主程序和渲染程序。

  • 主程序 − 主程序作為一個獨立的 Node.js 程序執行，負責建立和管理瀏覽器視窗。它與渲染程序通訊，處理系統級事件，並可以訪問原生 API。主程序控制應用程式的生命週期，並充當 Electron.js 應用程式的入口點。

  • 渲染程序 − 每個 Electron.js 應用程式可以有多個渲染程序，每個程序對應一個單獨的瀏覽器視窗。渲染程序負責渲染和顯示每個瀏覽器視窗中的 Web 內容。它們在單獨的 JavaScript 上下文中執行，提供了一定程度的隔離和安全性。每個渲染程序都可以訪問 Electron.js API，從而可以與主程序互動並執行諸如操作 DOM、發出網路請求和處理使用者互動等任務。

構建一個簡單的 Electron.js 應用程式

現在我們已經對 Electron.js 及其架構有了很好的瞭解，讓我們深入研究如何使用 JavaScript 構建一個簡單的 Electron.js 應用程式。我們將建立一個應用程式，該應用程式顯示一個帶有“Hello, Electron.js”訊息的視窗。

要開始，請按照以下步驟操作：

設定開發環境

確保您的機器上已安裝 Node.js，因為 Electron.js 是建立在 Node.js 之上的。您可以從官方網站 (https://nodejs.org) 下載並安裝最新版本的 Node.js。

建立一個新的 Electron.js 專案

建立一個新的專案資料夾，並使用命令列導航到該資料夾。透過執行以下命令初始化一個新的 Node.js 專案：

npm init -y

此命令將使用預設設定初始化一個新的 Node.js 專案。

安裝 Electron.js

透過執行以下命令將 Electron.js 作為開發依賴項安裝：

npm install electron --save-dev

此命令將在您的專案中安裝 Electron.js 包。

建立主入口點

在您的專案資料夾中建立一個名為 index.js 的新檔案，並新增以下程式碼：

const { app, BrowserWindow } = require('electron');

function createWindow() {
   // Create the browser window
   const mainWindow = new BrowserWindow({
      width: 800,
      height: 600,
      webPreferences: {
         nodeIntegration: true,
      },
   });

   // Load the index.html file
   mainWindow.loadFile('index.html');
}

// When Electron has finished initialising and is ready to create browser windows
app.whenReady().then(() => {
   createWindow();

   app.on('activate', function () {
      if (BrowserWindow.getAllWindows().length === 0) createWindow();
   });
});

// Quit the application when all windows are closed
app.on('window-all-closed', function () {
   if (process.platform !== 'darwin') app.quit();
});

解釋

在此程式碼中，我們從 Electron.js 包中匯入必要的模組，定義 createWindow 函式以建立瀏覽器視窗，並設定視窗建立和應用程式退出所需的事件處理程式。

建立 HTML 檔案

在專案資料夾中建立一個名為 index.html 的新檔案，並新增以下程式碼：

示例

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Electron.js Application</title>
   </head>
   <body>
      <h1>Hello, Electron.js</h1>
   </body>
</html>

此 HTML 檔案將顯示在 Electron.js 應用程式的視窗中。

執行 Electron.js 應用程式

npx electron.

結論

Electron.js 徹底改變了開發人員使用 Web 技術構建桌面應用程式的方式。它提供了一個強大的框架，該框架結合了 Chromium 渲染引擎和 Node.js 執行時，使開發人員能夠使用 HTML、CSS 和 JavaScript 建立跨平臺桌面應用程式。憑藉其豐富的外掛和工具生態系統，Electron.js 使開發人員能夠構建功能豐富、效能卓越且視覺效果出色的桌面應用程式。

在本文中，我們探討了 Electron.js 的基礎知識，並學習瞭如何使用 JavaScript 構建一個簡單的 Electron.js 應用程式。我們討論了 Electron.js 的架構、其主要程序以及主程序和渲染程序的作用。我們還逐步介紹了設定開發環境和構建 Electron.js 應用程式的過程。

更新於： 2023-07-24

2K+ 次瀏覽

開啟您的 職業生涯

透過完成課程獲得認證

立即開始
廣告