本文主要帶領大家了解 NW.js（前身是 node-webkit） 的基本知識，通過本入門指南的學習，可以讓你快速構建一個 NW.js 的桌面應用。
NW.js 簡介
NW.js 是一個基於 Chromium 和 node.js 的應用運行時，通過它可以用 HTML 和 JavaScript 編寫原生應用程序。它還允許您從 DOM 調用 Node.js 的模塊 ，實現了一個用所有 Web 技術來寫原生應用程序的新的開發模式。
這里是 使用 NW.js 的應用和公司列表 ，可以看到 NW.js 實際應用效果。
NW.js 的功能特性
- 用現代 HTML5,CSS3,JS 和 WebGL 來編寫應用程序
- 完全支持 Node.js APIs 和所有其 第三方模塊
- 良好的性能:Node 和 WebKit 運行在相同的線程:函數調用是更簡潔;對象在同一堆可以互相引用;
- 容易打包和分發應用程序。
- 支持 Linux、Mac OS X 和 Windows
NW.js 快速入門
我們新建一個目錄 quick-start ，來代表項目名稱。
客戶端代碼
在 quick-start 目錄下，創建 index.html :
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>NW.js 快速入門|www.waylau.com</title> </head> <body> <h1>NW.js 快速入門</h1> We are using node.js <script>document.write(process.version)</script>. <br/> More demos,see <a href="http://www.waylau.com" title="更多示例">www.waylau.com</a> </body> </html>
在 quick-start 目錄下，創建 package.json :
{"name": "nw-quick-start-demo",
"version": "0.0.1",
"main": "index.html"
}
運行:運行 quick-start 程序
bash $ /path/to/nw (假設當前目錄包含 ‘package.json’)
注意: 在 Windows 系統, 拖動包含 package.json 文件夾 quick-start ，到 nw.exe 來打開它。
這句話有很多問題。
1、拖動包含 package.json 文件夾 quick-start；這句話誤導性很多，就是文件夾 quick-start，畫蛇添足啊！
2、到 nw.exe 來打開它；這句話是啥意思，好誤導！這句話的意思就是；拖拽到到 nw.exe 來打開它；
最終的意思是：拖動文件夾 quick-start到nw.exe主程序上打開
注意：在 OSX 系統,可執行編譯文件是在隱藏目錄的 .app 文件內。為了在 OSX 運行 node-webkit , 輸入:
/path/to/nwjs.app/Contents/MacOS/nwjs (假設當前目錄包含 ‘package.json’)
效果如下：
關於 package.json 的更多設置
將 quick-start 復制為另外要給項目 quick-start-window
修改 package.json 來設置程序
{ "name": "nw-quick-start-window-demo", "version": "0.0.1", "main": "index.html", "window": { "title": "nw-quick-start-window-demo", "toolbar": false, "frame": true, "show_in_taskbar":true, "width": 800, "height": 500, "position": "mouse", "min_width": 400, "min_height": 200, "max_width": 800, "max_height": 600 } }
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，程序將無邊框顯示
發布
本節以 Windows 環境下為例
新建發布包
將下載的 NW.js 文件解壓，復制一份作為項目的發布包模板，本例名稱為 nwjs-v0.12.3-win-x64
壓縮
將 quick-start 內的文件壓縮成 .zip 文件 quick-start.zip ，修改文件后綴為 quick-start.nw
合成
將 quick-start.nw 放入發布包 nwjs-v0.12.3-win-x64 ，
在命令下，切換到 nwjs-v0.12.3-win-x64 目錄，並執行
copy /b nw.exe+quick-start.nw quick-start.exe
|
此時，生成了可執行文件 quick-start.exe ，雙擊即可運行程序
刪除冗余
最終的發布包，未減少體積，可以刪除項目用不到的冗余文件，由於 nw.exe 、 quick-start.nw 文件已經合成為了 quick-start.exe ,故刪之。又因為該項目簡單，沒有用到媒體庫，可以刪除 nwjc.exe 、 ffmpegsumo.dll 等