我是又忙又懒。

跟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/就可以了。