利用Node-webkit(NW.js)创建一个网站桌面程序

      最近遇到一个客户要求把网站打包成exe的桌面程序,前期我使用了C#为客户开发了一个网站独立程序,但是由于感觉太过单薄最后没有用成,所以为了满足客户需求就使用了Node-webkit(NW.js)为客户创建了一个桌面程序,灵活易用也方便客户自行更改。

      本文讲述了如何使用该工具打包成windows桌面程序的一个简单例子,同时给出了如何降低打包出来的程序的size的一个方式(用node-webkit打包出来的桌面程序size通常会比较大),更多的技术细节请参考https://github.com/nwjs/nw.js

需求

      首先我们的需求很简单,做一个windows桌面程序(exe),里面载入百度的首页,用户可以就像用浏览器一样使用。以此类推,由于是封装了webkit,当然你便可以使用web技术开发一个windows桌面软件。

下载并安装Node-webkit

进入官网后(http://nwjs.io/),点击下载,我这里使用的是Mac OS X64位计算机。

 
鉴于大家基本使用Windows系统,安装方法使用Windows系统的安装。
 
下载出来后解压,文件夹中即为Node-webkit的主文件夹:
 
 
这里的nw.exe即该框架原先提供的一个已经封装了webkit等的exe,这个是你构建自己的exe的基础,你自己创建的web程序其实都是需要这个东西来运行,因为它提供了runtime环境。

修改icon

这里有一点需要提的是,默认情况下你创建出来的你的应用程序(exe)会和nw.exe的图标一样,当然这个不是你所想要的。所以你可以通过resource hacker这个工具来修改nw.exe的图标成你所想要的,比如可以参考:

http://keenwon.com/1311.html

撰写WEB应用

到这里我们就可以开始撰写web应用了,因为本例子很简单就是打开一个网址,所以应用的目录大致如下:

 
我们主要来看package.json这个配置文件,这个是每个用node-webkit进行打包时候必须要的一个配置文件,内容大致如下:
  1.   // "main": "index.html", 
  2.   "main":"http://www.baidu.com/"
  3.   "name""baidu"
  4.   "window": { 
  5.     "title""baidu"
  6.     "icon""assest/img/logo.png"
  7.     "toolbar"true
  8.     "width": 1280, 
  9.     "height": 800, 
  10.     "min_width": 400, 
  11.     "min_height": 200 
  12.   }, 
  13.   "webkit": { 
  14.     "plugin"true
  15.     "java"false
  16.     "page-cache"false 
  17.   } 
由于我们仅仅是打开一个网页,所以main这个参数里面的值并不是index.html,而直接写上一个网址就好
 
window.icon这个参数可以配置这个exe在windows的底部任务栏上的图标
 
toolbar最好设置为true,这样子你的应用程序上面会有类似于浏览器的工具栏,如果你的程序类似于一个音乐播放器之类的东西,那么你可能需要设置为false
 
关键package.json的语法请参考:
https://github.com/nwjs/nw.js/wiki/Manifest-format#webkit-subfields
 

打包

首先将你的所有的应用程序全选,添加压缩文件后并改名为app.nw(名字无所谓,但是扩展名一定要修改为nw),要确保package.json在根目录。即你打开压缩后的zip应该是这样的

 
随后,将你的app.nw拷贝到node-webkit的和nw.exe同一目录,进入windows cmd后运行这个命令:
  1. copy /b nw.exe+app.nw app.exe 
这个时候你发现生成了app.exe,这个时候即成功将你的web应用打包成了一位windows桌面程序,直接双击它即可运行: