App下載

使用 Electron 構(gòu)建一個簡單的桌面應用程序

小葵愛奮斗 2021-09-16 16:29:47 瀏覽數(shù) (2570)
反饋

使用 Electron 可以輕松創(chuàng)建桌面應用程序。你可以構(gòu)建可在任何操作系統(tǒng)中運行的跨平臺應用程序。在本篇文章中,我們將使用Vanilla JavaScript項目并將其轉(zhuǎn)換為Electron 應用程序。如果你了解 Vanilla JavaScript,請跟隨我一起完成本篇內(nèi)容。

先決條件:

1. 在你的計算機上安裝Node.js。

2. 有一個以前在 Vanilla JavaScript 中的項目示例(todo-list、notes-app、tic-tac-toe 等)

使用選舉構(gòu)建桌面應用程序

首先,在終端中寫入以下內(nèi)容,替換?my-app?,隨便取什么名字。

圖片

此命令將為我們的 Electron 應用程序生成結(jié)構(gòu)。

然后,輸入 ?cd?和 ?name of your project?

在 src 文件夾中,你將找到一個 ?index.html?, ?style.css?, 和 ?index.js?文件。

文件名為? index.js? 包含設置?my-app?。我們必須對其進行一些更改。

圖片

這種配置允許 Electron 與 Node.js 并帶有不同的模塊。

現(xiàn)在您可以將文件復制到? src?文件夾。

請記住,主 HTML 文件必須命名為 ?index.html?,因為 ?mainWindow? 函數(shù)將使用該文件來啟動應用程序。

圖片

你還可以更改起始文件的名稱而不是?index.html?。請記住,你可以替換 HTML 和 CSS 文件,但不要更改?index.js?文件。因為該文件是我們應用程序的核心。

現(xiàn)在你的項目準備好運行,輸入?npm start?。

你必須在應用程序運行時看到一個 Chromium 窗口彈出窗口。

圖片

在運行之前 ?build? 命令檢查一切正常。

如果你想對你的應用程序進行一些調(diào)整,現(xiàn)在是時候了。接下來,在你的終端中輸入?npm run make?。

此過程完成后,你將看到一個名為“out”的新文件夾。

圖片

現(xiàn)在你的應用程序已準備好安裝在你的機器上。

進入目錄?./out/make/squirrel.[system]?并運行? setup.exe? 文件。

結(jié)束語

單擊你的桌面窗口并訪問你全新的桌面應用程序!

圖片

到這里,你現(xiàn)在已經(jīng)使用 Electron 構(gòu)建了快速簡便的桌面應用程序!

我希望這篇文章對大家能有所用。感謝閱讀。


0 人點贊