这货能干嘛?

node-webkit(现改名为NW.js)是基于 Chromiumnode.js 开发的应用。通过它,你可以使用HTML5、JavaScript、node.js模块来编写本地应用程序。

然它的好处还有这些:

  • 解除了浏览器 沙盒 限制
    跨域操作,本地文件写入操作,这些原本前端无法解决的问题。
  • 可使用node.js
    除了node.js本身的特性,意味着npm中那么多的扩展可以供你使用。
  • node-webkit还实现了本地化的API
    例如菜单栏,系统的托盘图标支持,系统剪贴板等。
  • 跨平台
    支持 Linux, Mac OS X 和 Windows

我们用它做了什么?

通过这个神器,我们把一些内部的繁琐的工作封装打包成可执行的桌面应用,一次打开即可使,无需安装。

如何用它来开发一个本地应用?

1.下载最新版本node-webkit,并解压,解开后目录如下:

2.在源码根目录下需要建立 package.json 进行配置,用于指定启动读取页面,窗体宽高等等,详细的参数和介绍可以看 官方文档

1
2
3
4
5
6
7
8
9
10
11
{
"main": "main.html", // 启动页面
"name": "项目名称",
"window": {
"toolbar": false, // 工具栏
"frame": false, // 框架
"width": 430, // 窗体宽度
"height": 450, // 窗体高度
"resizable": false // 窗体是否允许改变尺寸
}
}

3.在框架目录基础上进行开发

如何本地开发及调试?

本地开发时,可以把 package.json 里 “toolbar” 设置为 true ,这样就可以浏览器的开发者工具

如何封包成单一可执行文件?

有3个布骤:

1. 项目相关的所有文件打包成一个.zip文件

将项目的入口文件 main.html 配置文件 package.json 及所有页面的资源(images css js node_modules ) 打包成 src.zip

2. 项目文件压缩包与nw.exe合体

把刚才打包生成的src.zip放到 node-webkit 项目目录里,执行合并的命令,生成 app.exe(这个步骤是打包生成一个exe可执行文件,但执行这个exe文件还依赖目录里的.dll .dat .pak文件)

1
copy /b nw.exe+src.zip app.exe

3. 压缩并打包成单一可执行文件

把执行这个exe文件所依赖的 .dll等文件再次打包进exe文件里,这里需要使用一个工具:Enigma Virtual Box

使用方法:

  • 下载,安装并打开。
  • 对于中文用户可以在Language菜单中选择Chinese
  • 在请选择待封包的主程中浏览和选择主程序,如app.exe。
  • 拖拽(或者单击Add按钮)所有依赖项,包括.dll .dat 和nw.pak到File选项卡的空白处。
  • 选择选择文件选项,选择压缩文件来压缩。(压缩可以减少最终的exe文件大小,但程序的执行会相应变慢,是否压缩可按具体情况而定)
  • 点击执行封包。

如何修改可执行文件图标?

好不容易做完的工具封装打包完成,你发现图标还是nw.exe的默认图标,这就需要我们对图标进行自定义。这里又用一个工具 Resource Hacker

  • 安装Resouce Hacker并打开程序
  • 把要更新icon的应用程序拖放在左边区域,并在左边的面板中选择 Icon Group> IDR_MAINFRAME
  • 选择新的icon用于替换旧的icon 菜单 Action > Replace Icon
  • 保存修改 File > Save (由于旧Icon有缓存,需要过一会再刷新才能看到更换后的效果

以上就是通过 node-webkit 封装打包桌面工具的整个流程,布骤有点繁琐。

node.js 有个模块node-webkit-builder可以进行项目的构建,可以选择构建成win和osx 平台,并选择node-webkit的版本。(不足的是:不能完成单一执行文件封装和图标修改)

参考文献:

http://nwjs.io/
https://github.com/nwjs/nw.js/wiki/How-to-run-apps
https://github.com/nwjs/nw.js/wiki/How-to-package-and-distribute-your-apps
http://www.techtalkz.com/tips-n-tricks/3866-how-change-default-icon-exe-using-resource-editor-resource-hacker.html
https://github.com/mllrsohn/node-webkit-builder
http://blog.inching.org/2014/03/19/node-webkit-package/
https://cnodejs.org/topic/53233277bfb7097d7a00059e