web前端:使用nw.js 做桌面程序（web桌面程序开发）

1. 同类型产品 electron

nw.js 原名为node-webkit, 后更名为nw.js, 基于node.js & Chromium, 以浏览器为核心，

入口为一个index.htm;

electron， 后更名为atom-shell, 由github支持， 面向node.js，入口为js文件，通过

js来操作打开或者关闭一个或多个窗口。

可以分别尝试一下做桌面程序，本文首发node-wbkit。

2. nw.js 环境部署

2.1 在node环境下安装 nw.js

npm install nw.js

2.2 添加配置文件, 常用的参数

//package.json 配置文件

{

"name" : "test",

"version" : "0.0.1",

"main" : "index.html",

"window" : {

"title" : "nw-test", //窗口名称

"icon" : "",

"position": "mouse", //null 无定位，不展示;center 显示器中间;mouse 鼠标位置

"min_width": 400, //最小的宽度值

"min_height": 300, //最小的高度值

"resizable": true, //是否可以调整窗口大小

"always-on-top" : true, //是否置顶

"fullscreen" : false, //是否全屏

"width": 700, //宽度

"height": 600//高度

}

}

//index.html

入口html文件

//目录结构

test

-index.html

-package.json

-static//静态资源

2.3 常规html 、 js 、 css 前端开发

2.4 关于调试

官网的normal版本适合生产环境，默认没有toolbar, devtools等；

sdk版本适合测试环境开发，内置devtools 和 Native Client 插件。

3. nw.js文件打包为 exe可执行文件

3.1 下载对应平台下需要的可执行nw.exe

http://nwjs.io/downloads/

3.2 以windows为例

将package.json以及静态资源文件打包为 压缩文件

将压缩文件更改为扩展后缀为.nw

将nw文件放到nw.exe同级文件夹目录下

cd \b nw.exe+test.nw test.exe

//可以生成可执行文件，但是注意此文件是不能分发的，

//因为test.exe的执行必须依赖nw.exe以及多个dll文件

4. windows下图标制作

4.1 下载安装iconWorkshop，试用版即可；

http://www.iconworkshop.cn/

4.2 生成图标文件

打开要做成图标文件的图片素材，选择编辑以及需要的规格生成.ico格式的图标文件

4.3 保存

另存为即可，最初笔者尝试使用ps来生成图标最后发现reshacker不认单纯更改扩展类型的图片，所以只能重新下载另外做一个了，但是整个过程也比较简单。

5. exe更改图标

5.1 下载安装reshacker

http://www.angusj.com/resourcehacker/

5.2 替换图标

打开需要替换图标的exe文件，在icon group右键选择替换第四步保存的图标

5.3 保存

保存后exe的图标成功替换

6. 分发可执行文件

当前得到的exe文件只能在nw.exe环境存在的前提下才可以正确执行，所以如果用户想不预装nw.exe便可以执行文件，就是将test.exe和其依赖的dll文件直接压缩成一个安装文件，就可以达到分发的效果。

6.1 nw.exe和安装程序一起打包

官网推荐打包方式，基本size是nw.exe的大小

6.2 使用Inno Setup打包成安装程序

http://www.jrsoftware.org/isdl.php#stable 下载安装程序

file -> new 按照参考文章3生成可执行文件

笔者尝试了一下，nwjs-v0.16.0-win-x64版本， 在编译生成安装包之后总会提示缺失locale文件，其实是nw程序包下的locale文件夹下的语言包没有带过去，总的来说还是官网推荐的打包程序比较可靠。

7. 总结

使用node-webkit，从部署环境到分发，整体过程还是比较流畅，大家可以试下。

参考文章

1.http://tangiblejs.com/posts/nw-js-and-electron-compared-2016-edition

2.http://keenwon.com/1311.html 修改默认图标

3.http://www.cnblogs.com/soaringEveryday/p/4950088.html 使用innoSetup封装