我是又忙又懶。

跟electron一樣，nw.js也是一個使用前端技術（html、css、JavaScript）來構建pc端程序的一個框架。不過相比于electron，nw.js熱度可能沒有這么高漲，社區的維護人員人數上也不及electron（誰讓electron是github團隊在維護呢...）。逼乎上邊也有對這兩個框架之間的差別有過評價——用Nodejs開發桌面應用。NW.js 和 Electron 各有什么優缺點，你選擇哪個？。大家的答案幾乎是一邊倒的傾向于electron。那么nw.js就沒有什么比electron要優越的地方了嗎？對于我來說，那就是可以兼容windows xp系統......(痛苦狀臉)

初始化項目

首先，確保你已經安裝好了node.js的環境。

npm init

接下來就是常規的一些常規的填寫：

package name: (nw-demo)
version: (1.0.0) 0.1.0
description: a nw.js demo
entry point: (index.js) index.html
test command:
git repository:
keywords: nw.js demo
author: classLfz
license: (ISC)
About to write to C:\classlfz\github\nw-demo\package.json:

{
  "name": "nw-demo",
  "version": "0.1.0",
  "description": "a nw.js demo",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "nw.js",
    "demo"
  ],
  "author": "classLfz",
  "license": "ISC"
}


Is this ok? (yes) yes

這里注意到main的值不是main.js之類的js執行文件，而是index.html這類的html文件。其實，nw.js是支持main.js之類的js執行文件作為入口的，而且還提供了桌面應用啟動前需要執行的一些操作的條件。但是，因為我們這里僅僅只是一個demo，所以就不折騰了。詳細的內容可以查看nw.js的官方文檔的Getting Started章節。

這時候，我們就得到了一個package.json文件。

完善package.json

為了讓nw.js能夠完整的了解我們需要的桌面應用的一些常規的設置，我們需要對package.json補充一些內容：

{
  "name": "nw-demo",
  "version": "0.1.0",
  "description": "nw.js demo",
  "main": "index.html",
  "window": {
    "title": "nw-demo", // 應用標題
    "width": 840, // 應用初始化寬度
    "height": 600, // 應用初始化高度
    "toolbar": true, // 是否開啟調試工具
    "resizable": false, // 應用是否可以調整高度以及寬度
    "icon": "images/icon.png" // 應用圖標路徑（相對路徑）
  },
  "build": {
    "nwVersion": "0.14.7"
  },
  "directories": {
    "test": "test"
  },
  "devDependencies": {
    "nwjs-builder-phoenix": "^1.14.3"
  },
  "scripts": {
    "start": "run -x86 --mirror https://npm.taobao.org/mirrors/nwjs/ .",
    "dist": "build --tasks win-x86 --mirror https://npm.taobao.org/mirrors/nwjs/ ."
  },
  "repository": {
  },
  "keywords": [
    "nw.js",
    "demo"
  ],
  "author": "classLfz",
  "license": "ISC",
  "dependencies": {
  }
}

從上邊可以看到，我們添加了一個window的字段，這里是告訴nw.js初始化這個桌面應用的一些參數。

編寫index.html

然后，很簡單的我們編寫一個index.html作為應用主頁。如果你的應用添加了前端路由的話，只要在main字段添加初始化的url路徑即可，像這樣：index.html/login。

運行與打包應用

細心的你或許已經發現了，上邊的package.json還添加了幾個script腳本，這個依賴于nwjs-builder-phoenix這個node.js模塊，我們可以輕松的實現在命令行里運行/打包nw.js的桌面應用。

# 安裝nwjs-builder-phoenix
npm install --save-dev nwjs-builder-phoenix
# 運行
npm run start
# 打包
npm run dist

不過還有一個nw.js的鏡像的問題需要注意的，因為墻的原因，我們需要修改一下nw.js的鏡像的。就像package.json里邊一樣，將mirror的值改為https://npm.taobao.org/mirrors/nwjs/就可以了。