一、概述
H5 是一種網頁設計的封裝網頁生成器電腦軟件語言，主要包括 HTML5、CSS3 和 JavaScript 等技術。在日常開發中，很多人希望能把 H5 作為桌面應用來使用。因此出現了一些可以將 H5 打包成 EXE 可執行文件的工具和方法。本文將介紹兩款常用的 H5 打包成 EXE 的工具：NW.js 和 Electron，以及他們的原理和詳細操作步驟。
二、NW.js
1. 原理
NW.
js（原名 Node-Webkit）是一個基于 Chromium 和 Node.js 的應用運行時環境，它允許你使用 HTML5、CSS、JavaScript、Node.js 和 WebGL 等 Web 技術開發本地應用。
利用 NW.js，可以將 H5 網頁打包成 Windows、Mac 或者 Linux 平臺上的獨立可執行文件（EXE、APP 或者 Elf 格式），讓用戶無需安裝任何瀏覽器或插件就可以直接運行應用。
2. 安裝及使用教程
（1）下載并安裝 Node.js，官網地址：https://nodejs.org/en/download/ 。
（2）打開命令提示符或終端，運行以下命令安裝 NW.js：
“`shell
npm install -g nw
“`
（3）準備你的 H5 項目，假設項目文件夾為 my_h5_project，需要在其中創建一個名為 package.json 的文件，內容如下：
“`json
{
“name”: “my_h5_project”,
“version”: “1.0.0”,
“main”: “index.html”,
“window”: {
“title”: “My H5 EXE App”
}
}
“`
（4）打開命令提示符或終端，進入項目文件夾 my_h5_project，運行以下命令啟動應用：
“`shell
nw .
“`
（5）將 H5 網頁打包成 EXE，可以使用如下命令（需在項目根目錄下運行，會在 dist 文件夾下生成 EXE 文件）：
“`Shell
npm install -g nw-builder
nwbuild -v 0.49.0-sdk -p win64 . –output-dist ./dist
“`
三、Electron
1. 原理
Electron 是一個基于 Chromium 和 Node.js 的跨平臺桌面應用開發框架。它使得開發者可以使用 Web 技術來構建桌面應用。通過 Electron，你可以將 H5 網頁打包成 Windows、Mac 或者 Linux 平臺上的可執行文件（EXE、APP 或者 Elf 格式）。
2. 安裝及使用教程
（1）下載并安裝 Node.js，官網地址：https://nodejs.org/en/download/ 。
（2）打開命令提示符或終端，運行以下命令安裝 Electron：
“`shell
npm install -g electron
“`
（3）準備你的 H5 項目，假設項目文件夾為 my_h5_project，需要在其中創建一個名為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.whenReady().then(createWindow);
app.on(“window-all-closed”, () => {
if (process.platform !== “darwin”) {
app.quit();
}
});
app.on(“activate”, () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
“`
（4）在項目根目錄下創建一個 package.json 文件，內容如下：
“`json
{
“name”: “my_h5_project”,
“version”: “1.0.0”,
“main”: “main.js”,
“scripts”: {
“start”: “electron .”
}
}
“`
（5）打開命令提示符或終端，進入項目文件夾 my_h5_project，輸入以下命令啟動應用：
“`shell
npm start
“`
（6）將 H5 網頁打包成 EXE，可以使用如下命令（需在項目根目錄下運行，會在 dist 文件夾下生成 EXE 文件）：
“`Shell
npm install –save-dev electron-packager
npx electron-packager . my-h5-exe –platform=win32 –arch=x64 –overwrite
“`
這樣，你就可以使用 NW.js 或 Electron 將 H5 網頁打包成 Windows 平臺上的可執行文件（EXE）了。同樣的方法可以將其打包成 Mac 和 Linux 平臺的可執行文件。
