在本教程中，我們將探討如何使用HTML、CSS和JavaScript技術開發Windows應用程序（即exe文件）。我們將使用一個名為Electron的框架，它可以讓你開發跨平臺的桌面應用程序。通過Electron，我們可以在Windows、Mac和Linux上分發相同的應用程序。
什么是 Electron？
———-
Electron 是用于構建跨平臺的桌面應用程序的開源框架。它使用Node.js運行時環境，并允許你使用Web技術（HTML、CSS和JavaScript）來開發桌面應用。Electron 底層使用了 Chromium 以支持現代 Web 特性。
環境準備
———-
1. 安裝Node.js：為了使用Electron，首先需要安裝Node.js。訪問https://nodejs.org/en/download/ 完成Node.js的安裝。
2. 創建項目文件夾：在你的電腦上創建一個新的文件夾，用于存放你的項目文件。例如在某個位置新建一個名為“MyApp”的文件夾。
開始開發
———–
1. 初始化項目：打開命令提示符或終端，然后導航到你的項目文件夾。運行以下命令以初始化項目：
“`
cd MyApp
npm init
“`
2. 安裝Electron：運行以下命令以在項目中安裝Electron：
“`
npm install electron –save-dev
“`
3. 創建HTML、CSS和JavaScript文件：在項目文件夾中，創建以下3個文件：
– `index.html`
– `styles.css`
– `main.js`
4. 編寫HTML和CSS文件：在`index.html`文件中編寫以下HTML代碼，并在`styles.css`文件中編寫相應的樣式：
“`html
Hello, Electron!
This is your first Electron app.
“`
“`css
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
.container {
max-width: 700px;
margin: 30px auto;
background-color: #fff;
padding: 30px;
border-radius: 5px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 24px;
margin: 0 0 20px;
}
p {
font-size: 16px;
}
“`
5. 編寫JavaScript文件：在`main.js`文件中，使用以下Electron代碼創建一個窗口，并加載`index.html`文件：
“`javascript
const { app, BrowserWindow }應用哥app = require(“electron”);
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
},
});
win.loadFile(“index.html”);
}
app.whenReady().then(createWindow);
“`
6. 配置`package.json`文件：打開`package.json`文件，在`scripts`部分設置如下內容：
“`json
“scripts”: {
“start”: “electron .”
}
“`
7. 運行應用程序：打開命令提示符或終端，導航到你的html網頁開發項目文件夾。運行以下命令以啟動應用程序：
“`
npm start
“`
8. 打包應用程序：為了將Electron應用程序打包成exe文件，可使用一個名為`electron-packager`的工具。首先，運行以下命令以在項目中安裝依賴：
“`
npm install electron-packager –save-dev
“`
然后，在`package.json`的`scripts`部分，添加一個名為`package`的腳本，如下所示：
“`json
“scripts”: {
“start”: “electron .”,
“package”: “electron-packa
ger . MyApp –platform=win32 –arch=x64 –overwrite”
}
“`
接下來，運行以下命令打包應用程序：
“`
npm run package
“`
此命令將會為你在項目文件夾中創建一個名為“MyApp-win32-x64”的文件夾，其中包含一個名為`MyApp.exe`的可執行文件。用戶可以直接雙擊這個文件打開你的應用程序。
總結
———-
現在，你已經學會了使用HTML、CSS和JavaScript技術開發exe文件。通過Electron框架，你不僅可以為 Windows 創建程序，還可以輕松地構建 Mac 和 Linux 應用程序。學習這些技術后，你將能夠開發跨平臺的桌面應用程序。
