NW.js （原名 node-webkit）是一個結合了 Chromium 和 node.js 的應用執行時，通過它可以用 HTML 和 JavaScript 編寫原生應用程式。它還允許開發者從 DOM 呼叫 Node.js 的模組 ，實現了一個用所有 Web 技術來寫原生應用程式的新的開發模式，而且,開發者可以很容易的將一個web應用打包成原生應用（Further, you can easily package a web application to a native application.）

簡介

NW.js （原名 node-webkit）是一個結合了 Chromium 和 node.js 的應用執行時，通過它可以用 HTML 和 JavaScript 編寫原生應用程式。它還允許開發者從 DOM 呼叫 Node.js 的模組 ，實現了一個用所有 Web 技術來寫原生應用程式的新的開發模式，而且,開發者可以很容易的將一個web應用打包成原生應用（Further, you can easily package a web application to a native application.）。

（1）以網路最流行的技術編寫原生應用程式的新方法

（2）基於HTML5, CSS3, JS and WebGL而編寫

（3）完全支援nodejs所有api及第三方模組

（4）可以使用DOM直接呼叫nodejs模組

（5）容易打包和分發

（6）支援執行環境包括32位和64位的Window、Linux和Mac OS

使用方法如下：

一、下載nw

1.下載 NW.js（官網：http://nwjs.io/）

這裡面normal這個算是執行版，sdk那個是一些工具箱，一般建議開發者選擇SDK開發套件去開發自己的應用，這樣的話就可以對開發過程中產生的錯誤進行除錯debug

2.下載完成後解壓檔案到你的開發目錄下，然後進入解壓檔案的開發目錄，一般目錄結構如下（app為自開發專案，不屬於固有部分）：

3. app(名字可以隨便起)為專案目錄,其內部結構類似以下（除簡單配置檔案外結構就跟開發一個網頁時類似，有js\html\css等）

vue簡易打包如圖：

或是下圖這樣的複雜專案如圖：

4. Package.json可以理解為應用的配置檔案，為必須；index.html作為應用的入口檔案，內容和一般網頁類似，名字可以按自己喜好起，但是一定要和配置中的“main”引數設定一致；如果要引用node模組，可以在目錄結構中增加一個node_modules的目錄，以存放APP所需的node模組。

• title : 字串，設定預設 title。
• width/height : 主視窗的大小。
• toolbar : bool 值。是否顯示導航欄。
• icon : 視窗的 icon。
• position :字串。視窗開啟時的位置，可以設定為“null”、“center”或者“mouse”。
• min_width/min_height : 視窗的最小值。
• max_width/max_height : 視窗顯示的最大值。
• resizable : bool 值。是否允許調整視窗大小。
• always-on-top : bool 值。視窗置頂。
• fullscreen : bool 值。是否全屏顯示。
• show_in_taskbar : 是否在工作列顯示圖示。
• frame : bool 值。如果設定為 false，程式將無邊框顯示。
• "chromium-args" :"-allow-file-access-from-files" 相當於給谷歌瀏覽器新增啟動引數一樣，這行程式碼允許angularjs直接訪問本地json檔案。

5. 執行應用：將應用程式目錄拖放到nw.exe即可執行。 或者在該下載包的根目錄下，按著 shift+右鍵 選擇 “在此處開啟命令視窗” 開啟cmd命令，輸入nw app （app為自建的專案名稱），就可以檢視頁面。

二、打包exe

1.將專案相關新增到壓縮資料夾，注意：要zip格式！！！

將壓縮包更名為 app.nw，將app.nw放在nw.exe同級目錄下，跟nw一起打包成一個可執行檔案，執行以下命令，然後就出現了這個app.exe可執行檔案：(最後的app.exe是打包後的命名檔案，也可寫成專案名.exe)

copy /b nw.exe+app.nw app.exe

2.可以新建一個資料夾，把必須的檔案放裡面，如下為app.exe執行必須的檔案：

雙擊app.exe開啟即可

修改圖示

1.在app資料夾下（即web專案根目錄下）的assets資料夾用來存放所要更換的icon圖示

2.配置nw.exe所在目錄的package.json檔案，在icon配置項寫上icon的檔案路徑：

這樣就將開啟軟體的圖示修改了

將開啟的頁面圖示也修改一下

坑！！！

坑1、vue專案正常打包，而複雜專案打包後雙擊執行不了的情況

解決方案：

①node版本更新到指定版本，還需要下載node版本管理工具 n ,麻煩

②選擇將其專案放在nw固有部分，命名為package.nw的資料夾，而不是打壓縮包，然後cmd執行命令copy /b nw.exe+package.nw app.exe就可以了

坑2、更改圖示改不了

解決方案：強制更改！

下載安裝ResourceHacker後開啟軟體,依次執行 file-> open -> 選擇對應app.exe存放目錄並選中生成的exe檔案,右擊Icon Group IDR_MAINFRAME,在彈出的選單中選擇replace icon -> open file… -> 選擇自定義的ico格式的圖示

再次開啟,可以檢視圖示已經修改成功了;需要注意的是,在資料夾中exe的標註有時候沒有改變,這個主要是因為快取的問題;個人重新整理了幾次,還是沒有變化,這個以RH為準就可以(不影響後續Inno Setup編譯,RH檢視exe圖示改變了即可)多等一下