使用 JavaScript 和 Electron.js 建立桌面 GUI 應用程式-js教程-PHP中文網

首頁

web前端

js教程

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

王林

Sep 14, 2023 am 09:57 AM

使用 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 使用與流行的網頁瀏覽器 Google Chrome 相同的渲染引擎 — Chromium。這使得 Electron.js 應用程式能夠以與 Web 瀏覽器相同的功能和效能來渲染和顯示 Web 內容。
#Node.js 執行時期 − span>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 id="Hello-Electron-js">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 应用程序的过程。

以上是使用 JavaScript 和 Electron.js 建立桌面 GUI 應用程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。