技術(shù)開(kāi)發(fā)的 Web 項(xiàng)目（如 H5Bootstrap）打包成 Windows 可執(zhí)行文件 (.exe)，可以讓用戶在不需要瀏覽器的情況下直接運(yùn)行桌面上的應(yīng)用程序。本教程將介紹將 HTML5 項(xiàng)目打包成桌面應(yīng)用程序的原理及詳細(xì)操作。
原理：
HTML5項(xiàng)目打包成可執(zhí)行文件，通常使用一種叫做 “Web容器(Web Container)” 的軟件技術(shù)。它基本上是一個(gè)最小化、可嵌入的瀏覽器引擎，它會(huì)為你創(chuàng)建一個(gè)窗口并加載你的 HTML5網(wǎng)站。程序本身采用它運(yùn)行你的應(yīng)用程序，并打包到一個(gè)可執(zhí)行文件。這樣，用戶在運(yùn)行EXE文件時(shí)，實(shí)際上是在本地瀏覽器運(yùn)行您的HTML5應(yīng)用程序。
一種知名的Web容器技術(shù)是 NW.js（原名稱為Node-Webkit）。NW.js 是一個(gè)將 Chromium 和 Node.js 結(jié)合在一起的應(yīng)用程序運(yùn)行時(shí)，使您可以直接使用 JavaScript 操作低級(jí)操作系統(tǒng)(Native APIs)，并在一個(gè)窗口中展示原生桌面程序與互聯(lián)網(wǎng)技術(shù)。
詳細(xì)介紹（以NW.js為例）：
1. 準(zhǔn)備開(kāi)發(fā)環(huán)境
首先你需要安裝 Node.js 的環(huán)境，通過(guò)訪問(wèn)官網(wǎng) (https://nodejs.org/) 下載軟件市場(chǎng)exe對(duì)應(yīng)linux庫(kù)文件版本并安裝。
2. 下載 NW.js
訪問(wèn) NW.js 官網(wǎng) (https://nwjs.io/)，下載對(duì)應(yīng)平臺(tái)的版本，并解壓到一個(gè)文件夾。
3. 創(chuàng)建一個(gè) HTML5 項(xiàng)目
在本地新建一個(gè)文件夾，用以存放你的 HTML5 項(xiàng)目，包含HTML文件、CSS文件、JavaScript文件。例如，你的目錄結(jié)構(gòu)可以是：
“`
– myApp
– html
– index.html
– css
– style.css
– js
– app.js
– package.json （見(jiàn)下文）
“`
4. 編寫 package.json 文件
在項(xiàng)目根目錄創(chuàng)建一個(gè)名為 “package.json” 的文件，用于保存應(yīng)用程序的元數(shù)據(jù)和配置信息。這里是一個(gè)基本示例：
“`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” 屬性指定了應(yīng)用程序加載的 HTML 文件，window 對(duì)象定義了窗口的尺寸，標(biāo)題等。
5. 運(yùn)行項(xiàng)目
進(jìn)入項(xiàng)目文件夾目錄，然后從nw.js解壓之后的文件夾，拖拽 “nw.exe” 文件到項(xiàng)目根目錄。可以看到一個(gè)新的窗口中顯示了你的 HTML5 項(xiàng)目。
6. 打包
打包需要您將 nw.js 文件夾中的所有內(nèi)容（除了無(wú)關(guān)的文檔內(nèi)容）拷貝到您的項(xiàng)目主文件夾中。然后將整個(gè)項(xiàng)目根目錄壓縮為一個(gè)ZIP文件，更改擴(kuò)展名從.zip到.exe。（確保入口文件 package.json 與 nw.exe 處于同一層級(jí)）
例如，把 “myApp.zip” 重命名為 “myApp.exe”。
現(xiàn)在，當(dāng)用戶雙擊 “myApp.exe” 時(shí)，您的 HTML5應(yīng)用程序便會(huì)在窗口中運(yùn)行。
