使用 JavaScript 和 Electron.js 建立桌面 GUI 應用程式
- 王林轉載
- 2023-09-14 09:57:031620瀏覽
在當今的科技時代，桌面應用程式在我們的日常生活中具有巨大的意義，可以提供增強的使用者體驗並充分利用本地電腦的功能。傳統上，開發桌面應用程式需要特定於平台的程式語言和框架方面的專業知識，這對希望涉足桌面開發的 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>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中文網其他相關文章！