HTML5 封裝為 EXE 可執(zhí)行文件主要是將一個(gè)基于 HTML5、CSS和 JavaScript 的網(wǎng)頁(yè)應(yīng)用程序轉(zhuǎn)換為一個(gè)本地運(yùn)行的桌面應(yīng)用程序。這可以通過(guò)使用 “Webview” 或 “Webkit” 這樣的框架實(shí)現(xiàn)，這些框架可以在一個(gè)本地應(yīng)用程序中嵌入 web 瀏覽器。流行的工具包括 Electron、NW.js 和 Cordova 等。這里我們?cè)敿?xì)介紹使用 Electron 進(jìn)行封裝的過(guò)程。
Electron 是跨平臺(tái)開(kāi)發(fā)的桌面應(yīng)用程序的框架，由 Github 開(kāi)發(fā)并維護(hù)。它使用 Node.js 和 Chromium 提供了一個(gè)為桌面應(yīng)用程序提供原生功能的環(huán)境。大多數(shù)流行的桌面應(yīng)用程序如 VS Code、Slack，和WhatsApp 都是使用 Electron 來(lái)構(gòu)建的。
請(qǐng)按照以下步驟將 HTML5 封裝為 EXE 文件：
1. 安裝 Node.js:
請(qǐng)確保已經(jīng)安裝了 Node.js。可以從 https://nodejs.org/en/download/ 下載。
2. 安裝 Electron:
打開(kāi)命令提示符 （CMD）或終端, 輸入以下命令:
“`bash
npm install -g electron
“`
這將全局安裝 Electron 到您的計(jì)算機(jī)。
3. 創(chuàng)建項(xiàng)目文件夾:
創(chuàng)建一個(gè)名為 “my-html5-exe” 的新文件夾，然后導(dǎo)航到該文件夾：
“`bash
mkdir my-html5-exe
cd my-html5-exe
“`
4. 初始化項(xiàng)目:
在項(xiàng)目文件夾中，輸入以下命令以初始化項(xiàng)目:
“`bash
npm init
“`
按照提示完成初始化過(guò)程。其中的 “entry point” 輸入 “main.js”。
5. 安裝 Electron 到項(xiàng)目依賴(lài):
“`bash
npm install electron –save-dev
“`
6. 創(chuàng)建網(wǎng)頁(yè)文件:
在項(xiàng)目文件夾中，創(chuàng)建以下文件:
– index.html
– main.js
將您的 HTML5 內(nèi)容放入 index.html 文件中。
7. 編寫(xiě) main.js:
在 main.js 文件中，添加以下內(nèi)容:
“`javascript
const { app, BrowserWindow } = require(“electron”);
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
win.loadFile(“index.html”);
}
app.whenReady().then(createWindow);
app.on(“window-all-closed”, () => {
if (process.platform !== “darwin”) {
app.quit();
});
app.on(“activate”, () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
“`
這里我們創(chuàng)建了一個(gè)瀏覽器窗口，并加載了我們的 index.html 文件。
8ios免簽打包.exe. 修改 package.json:
將 “scripts” 字段替換為以下內(nèi)容:
“`json
“scripts”: {
“start”: “electron .”
}
“`
9. 運(yùn)行應(yīng)用程序:
在項(xiàng)目文件夾中，運(yùn)行以下命令:
“`bash
npm start
“`
此時(shí)您應(yīng)該會(huì)看到一個(gè)包含您的 HTML5 內(nèi)容的 Electron 窗口。
10. 打包為 EXE 文件:
我們將使用 electron-packager 進(jìn)行打包，首先安裝它:
“`bash
npm install electron-packager –save-dev
“`
然后在 package.json 的 “scripts” 字段添加以下內(nèi)容:
“`json
“scripts”: {
“start”: “electron .”,
“package”: “electron-packager . my-html5-exe –platform=win32 –arch=x64 –out=release –overwrite”
}
“`
現(xiàn)在，運(yùn)行以下命令將打包生成 EXE 文件：
“`bash
npm run package
“`
打包完成后，可在項(xiàng)目文件夾下的 “release” 文件夾中找到生成的 EXE 文件。
