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

在當今的數字時代，桌面應用程式在我們日常生活中仍然扮演著至關重要的角色。它們提供豐富的使用者體驗，並允許開發者利用本地機器的強大功能。然而，傳統上，構建桌面應用程式需要了解特定平臺的程式語言和框架，這使得Web開發者難以轉向桌面開發。這就是Electron.js發揮作用的地方。

Electron.js，以前稱為Atom Shell，是一個由GitHub開發的開源框架。它使開發者能夠使用HTML、CSS和JavaScript等Web技術建立跨平臺桌面應用程式。透過利用Web技術，Electron.js彌合了Web開發和桌面應用程式開發之間的差距，為開發者創造強大且功能豐富的桌面應用程式開闢了新的可能性。

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年7月24日

342 次瀏覽

啟動您的職業生涯

透過完成課程獲得認證

開始
廣告