HTML，CSS和JavaScript語言是否可以真正用於構建桌面應用程式？

答案是肯定的。

在這篇文章中，我們將主要關注Electron如何使用HTML、CSS和Javascript等網路技術來建立桌面應用程式。

Electron可用於使用HTML，CSS和Javascript構建桌面應用程式。這些應用程式還適用於Windows，Mac，Linux等多種平臺。

Electron將Chromium和NodeJS結合到一個執行時。這使我們能夠將HTML、CSS和Javascript程式碼作為一個桌面應用程式來執行。

如果直接使用Electron，則在構建應用程式之前需要進行一些手動設定。另外，如果你想使用Angular，React，Vue或任何其他框架或庫，則需要為此進行手動配置。

Electron Forge使上述事情變得更加容易。

它提供了Angular、React、Vue等框架的模板應用，避免了額外的人工設定。

它還提供了一種構建和打包應用程式的簡便方法。它還提供了許多其他功能，可在其文件中找到。

先決條件

確保已安裝NodeJS。

使用以下命令全域性安裝Electron Forge：

npm install -g electron-forge

讓我們開始使用該應用程式

使用以下命令建立你的應用程式：

electron-forge init simple-desktop-app-electronjs

simple-desktop-app-electronjs是應用程式的名稱。

上面的命令將需要一些時間才能執行。

完成執行後，使用以下命令啟動應用程式：

cd simple-desktop-app-electronjsnpm start

這將開啟一個視窗，如下所示：

了解現有的資料夾結構和程式碼

應用程式有一個特殊的資料夾結構。在這裡我將提到這個資料夾結構中的一些重要的東西。

/ package.json /

它有關於你正在建立的應用程式的資訊，應用程式所需的所有依賴關係，以及一些指令碼。有些指令碼已經預先配置好了，你也可以新增新的指令碼。

config.forge路徑包含了ElectronJS的所有配置。例如，make-targets用於指定Windows、Mac或Linux等各種平臺的目標make檔案。

package.json還具有 "main": "src/index.js" ，這表明src/index.js是應用程式的起點。

/ src/index.js /

根據package.json，index.js是主指令碼。執行主指令碼的程序稱為主程序。所以主程序執行的是index.js指令碼。

主程序是用來顯示GUI元素，它通過建立網頁來實現。

建立的每個網頁都在稱為渲染器程序的程序中執行。

/ 主程序和渲染過程 /

主程序的目的是使用 BrowserWindow 例項建立網頁。

BrowserWindow 例項使用渲染器程序來執行每個網頁。

每個應用程式只能有一個主程序，但可以有許多渲染器程序。

主程序和渲染器程序之間也可以進行通訊。不過，本文將不涉及這個問題。

abcd.html在上述架構中顯示為第二個網頁。但是在我們的程式碼中，我們不會再有第二個網頁。

/ src/index.html /

index.js將index.html檔案載入到新的BrowerWindow例項中。

這基本上意味著index.js建立了一個新的GUI視窗，並將index.html網頁載入其中。index.html網頁在自己的渲染器程序中執行。

/ index.js中的程式碼說明 /

在index.js中建立的大部分程式碼都有很好的註釋來解釋它的作用。這裡我將提到index.js中需要注意的幾個關鍵點。

mainWindow = new BrowserWindow({ width: 800, height: 600,});// 並載入應用程式的index.html.mainWindow.loadURL(`file://${__dirname}/index.html`);

上面的程式碼片段基本上建立了一個BrowserWindow例項，並將index.html載入到BrowserWindow中。

app.on('ready', createWindow);

app是用於控制應用程式的事件生命週期。

上面的程式碼片段說，當應用程式準備就緒時，載入第一個視窗。

同樣，app也可以用來對各種事件執行其他操作。例如，它可以用來在應用程式關閉前執行一些動作等等。

讓我們建立一個溫度轉換器桌面應用程式

讓我們使用之前使用的應用程式，並稍加修改，建立一個溫度轉換器應用程式。

首先讓我們使用以下命令安裝Bootstrap：

npm install bootstrap --save

將以下程式碼複製到 src/index.html中：

建立一個ID為Celcius的文字框。每當在此文字框中鍵入任何內容時，都會呼叫 celciusToFahrenheit() 函式。建立一個ID為Fahrenheit的文字框。每當在此文字框中鍵入任何內容時，都會呼叫 fahrenheitToCelcius() 函式。每當在“Celcius”文字框中鍵入新值時，“Fahrenheit”文字框中的值就會在“Fahrenheit”中顯示相同的溫度每當在“Fahrenheit”文字框中鍵入新值時，“Celcius”文字框中的值將顯示與“Celcius”相同的溫度

renderer.js中提供執行溫度轉換的2個函式。

在src內建立一個名為renderer.js的檔案。將以下程式碼複製到其中：

function celciusToFahrenheit(){ let celcius = document.getElementById('celcius').value; let fahrenheit = (celcius* 9/5) + 32; document.getElementById('fahrenheit').value = fahrenheit;}function fahrenheitToCelcius(){ let fahrenheit = document.getElementById('fahrenheit').value; let celcius = (fahrenheit - 32) * 5/9 document.getElementById('celcius').value = celcius;}

celciusToFahrenheit() 函式讀取Celcius文字框中的值，將其轉換為Fahrenheit，然後將新溫度寫入Fahrenheit文字框中。

fahrenheitToCelcius() 函式與此完全相反。

執行應用程式

使用以下命令執行應用程式：

npm start

這應該會顯示以下視窗。用不同的值進行嘗試。

打包應用程式

打包應用程式的命令是：

npm run package

這個命令需要一些時間來執行。一旦它完成，檢查專案資料夾內的out資料夾。

我在Windows機器上進行了測試。這將在out資料夾中建立一個名為simple-desktop-app-electronjs-win32-x64的資料夾。

所以在out/simple-desktop-app-electronjs-win32-x64資料夾中，命令為這個應用程式建立一個.exe檔案。點選 .exe 檔案就會自動啟動桌面應用程式。

資料夾名稱simple-desktop-app-electronjs-win32-x64可以分解為appname-platform-architecture，其中

appname = simple-desktop-app-electronjsplatform = win32architecture = x64

在不帶任何引數的情況下執行此命令時，預設情況下，它將打包用於開發的平臺。

假設你想為不同的平臺和架構打包。那麼你可以使用下面的語法。

npm run package -- --platform=<platform> arch=<architecture>

例如，為了為Linux打包，你可以使用以下命令：

npm run package -- --platform=linux --arch=x64

這將在out資料夾中建立一個名為simple-desktop-app-electronjs-linux-x64的資料夾。

建立一個make檔案

為了建立應用程式的make檔案或安裝程式，請使用以下命令。

npm run make

這個命令需要一些時間來執行。一旦它完成，檢查專案資料夾內的out資料夾。

out/make資料夾中會有一個桌面應用程式的Windows安裝程式。

當你執行這個命令時，沒有任何引數，預設情況下，它會為你用於開發的平臺建立安裝程式。

程式碼

該桌面應用程式的程式碼可在我的GitHub倉庫中找到：https://github.com/aditya-sridhar/simple-desktop-app-electronjs

恭喜

你現在知道如何使用HTML，CSS和Javascript建立桌面應用程式。

本文介紹了Electron和Electron-Forge的非常基本的概念。

要了解有關它們的更多資訊，可以檢視其文件。

最近整理了一份優質視訊教程資源，想要的可以關注我然後私信“666”即可免費領取哦！如果文章對你有所啟發和幫助，可以點個關注、收藏、轉發，也可以留言討論，這是對作者的最大鼓勵。