H5頁面打包成EXE可執(zhí)行文件的主要原理是將HTML、CSS、JavaScript等網(wǎng)頁資源嵌入到一個應用程序中，使其能夠獨立運行于操作系統(tǒng)。在這個過程中，通常會用到一些工具或框架。本文主要講解兩種常見的H5頁面打包成EXE的方法，分別是：NW.js和Electron。先給出簡述，再詳細介紹每個方案。
簡述：
1. NW.js：在對HTML、CSS、JavaScript等資源進行封裝時采用Chrome瀏覽器內(nèi)核來渲染和執(zhí)行這些網(wǎng)頁文件。
2. Electron：基于Node.js和Chromium的跨平臺框架，提供了豐富的原生系統(tǒng)API供開發(fā)者調(diào)用。
1. 使用NW.js打包H5頁面
怎么自己制作exe軟件NW.js（之前叫做Node-Webkit）是一個基于Chromium瀏覽器內(nèi)核和Node.js運行環(huán)境的開源框架，可用于開發(fā)跨平臺的桌面應用，將H5頁面打包成EXE文件。
詳細操作步驟如下：
1.1. 下載NW.js
訪問NW.js官方網(wǎng)站（https://nwjs.io/）下載適合的版本（Windows、Mac或Linux）。解壓縮后，保留文件夾。
1.2. 創(chuàng)建H5項目文件夾
創(chuàng)建一個新文件夾（例如：my-h5-app），將HTML、CSS、JavaScript等網(wǎng)頁資源文件添加到該文件夾中。
1.3. 創(chuàng)建package.json配置文件
在my-h5-app文件夾中創(chuàng)建名為package.json的文件，用于描述應用信息。例如：
“`json
{
“name”: “my-h5-app”,
“version”: “1.0.0”,
“main”: “index.html”, // 指定入口HTML文件
“scripts”: {
“start”: “nw .”
},
“dependencies”: {},
“window”: {
“title”: “My H5 App”,
“width”: 800,
“height”: 600
}
}
“`
1.4. 路徑調(diào)整
將解壓縮后的NW.js文件夾放到my-h5-app文件夾中。
1.5. 打包成EXE可執(zhí)行文件
打開NW.js文件夾，將my-h5-app文件夾拖放到nw.exe上，就可以生成一個獨立運行的桌面應用。將exe文件及相關(guān)文件打包到一起，即可作為可執(zhí)行程序。
2. 使用Electron打包H5頁面
Electron（https://www.electronjs.org/）是一個使用JavaScript、HTML和CSS構(gòu)建跨平臺桌面應用程序的開源框架。
詳細操作步驟如下：
2.1. 環(huán)境準備
確保安裝了Node.js、npm，并通過命令行全局安裝Electron：
“`cmd
npm install -g electron
“`
2.2. 創(chuàng)建新的H5項目文件夾
創(chuàng)建一個新文件夾（例如：my-electron-app），在該文件夾中初始化一個新的Node.js項目：
“`cmd
npm init -y
“`
2.3. 添加H5頁面資源
將HTML、CSS、JavaScript等文件放入my-electron-app文件夾。
2.4. 安裝Electron包
在my-electron-app文件夾中，通過命令行安裝Electron：
“`cmd
npm install electron –save
“`
2.5. 創(chuàng)建主進程文件
在my-electron-app文件夾中創(chuàng)建一個名為main.js的文件，用于編寫主進程代碼。
加入以下示例代碼：
“`javascript
const { app, BrowserWindow } = require(‘electron’);
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
},
});
win.loadFile(‘index.html’);
}
app.on(‘ready’, createWindow);
“`
2.6. 更新package.json
修改my-electron-app文件夾中的package.json文件：
“`json
{
“name”: “my-electron-app”,
“version”: “1.0.0”,
“description”: “”,
“main”: “main.js”,
“scripts”: {
/* 新增以下行 */
“start”: “electron .”
},
“dependencies”: {
“electron”: “^VERSION”
}
}
“`
2.7. 運行及打包
在如何將vue程序打包成exe命令行中運行 `npm start` 運行H5應用；
為生成EXE文件，將Electron打包成不同平臺的可執(zhí)行程序。推薦使用 elec
tron-packager（https://github.com/electron/electron-packager）。安裝并打包應用即可。
總結(jié)：上述兩種方法都能將H5頁面打包成EXE可執(zhí)行文件，開發(fā)者可根據(jù)需求自行選擇。
