我是又忙又懒。
跟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/就可以了。
