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封装