一、概述
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 平台的可执行文件。
