nw.js html5,用nw.js构建项目

我是又忙又懒。

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