H5Bootstrap 打包 EXE – 将 HTML5 项目打包成桌面应用
概念：
通过将 HTML5、CSS3 和 JavaScript
技术开发的 Web 项目（如 H5Bootstrap）打包成 Windows 可执行文件 (.exe)，可以让用户在不需要浏览器的情况下直接运行桌面上的应用程序。本教程将介绍将 HTML5 项目打包成桌面应用程序的原理及详细操作。
原理：
HTML5项目打包成可执行文件，通常使用一种叫做 “Web容器(Web Container)” 的软件技术。它基本上是一个最小化、可嵌入的浏览器引擎，它会为你创建一个窗口并加载你的 HTML5网站。程序本身采用它运行你的应用程序，并打包到一个可执行文件。这样，用户在运行EXE文件时，实际上是在本地浏览器运行您的HTML5应用程序。
一种知名的Web容器技术是 NW.js（原名称为Node-Webkit）。NW.js 是一个将 Chromium 和 Node.js 结合在一起的应用程序运行时，使您可以直接使用 JavaScript 操作低级操作系统(Native APIs)，并在一个窗口中展示原生桌面程序与互联网技术。
详细介绍（以NW.js为例）：
1. 准备开发环境
首先你需要安装 Node.js 的环境，通过访问官网 (https://nodejs.org/) 下载软件市场exe对应linux库文件版本并安装。
2. 下载 NW.js
访问 NW.js 官网 (https://nwjs.io/)，下载对应平台的版本，并解压到一个文件夹。
3. 创建一个 HTML5 项目
在本地新建一个文件夹，用以存放你的 HTML5 项目，包含HTML文件、CSS文件、JavaScript文件。例如，你的目录结构可以是：
“`
– myApp
– html
– index.html
– css
– style.css
– js
– app.js
– package.json （见下文）
“`
4. 编写 package.json 文件
在项目根目录创建一个名为 “package.json” 的文件，用于保存应用程序的元数据和配置信息。这里是一个基本示例：
“`json
{
“name”: “myAppName”,
“main”: “html/index.html”,
“version”: “1.0.0”,
“description”: “A sample HTML5 project”,
“author”: “Your Name”,
“window”: {
“title”: “My App”,
“width”: 800,
“height”: 600,
“resizable”: true
}
}
“`
“main” 属性指定了应用程序加载的 HTML 文件，window 对象定义了窗口的尺寸，标题等。
5. 运行项目
进入项目文件夹目录，然后从nw.js解压之后的文件夹，拖拽 “nw.exe” 文件到项目根目录。可以看到一个新的窗口中显示了你的 HTML5 项目。
6. 打包
打包需要您将 nw.js 文件夹中的所有内容（除了无关的文档内容）拷贝到您的项目主文件夹中。然后将整个项目根目录压缩为一个ZIP文件，更改扩展名从.zip到.exe。（确保入口文件 package.json 与 nw.exe 处于同一层级）
例如，把 “myApp.zip” 重命名为 “myApp.exe”。
现在，当用户双击 “myApp.exe” 时，您的 HTML5应用程序便会在窗口中运行。
编辑：波老板，如若转载，请注明出处：https://www.yimenapp.com/kb-yimen/26073/
部分内容来自网络投稿，如有侵权联系立删
