node-webkit把web应用打包成桌面应用

NW.js允许您直接从DOM 调用所有Node.js 模块,并启用一种使用所有Web技术编写应用程序的新方法。
下面通过demo来展示,怎么用NW把web应用打包成一可执行文件(.exe)的。

  1. 创建一个package.json文件,基本内容如下:
    {
    "name": "HKtest",
    "main": "login.html"
    }
    main (string) : node-webkit启动的时候默认打开的页面
    nam(string):package文件的名称,唯一值,不允许有空格,允许’.’或者’-‘,’_’字符。
    除了name与main这两个属性外,还有很多其他有用的属性可以配置,比如指定应用的图标,显不显示浏览器的工具栏,指定浏览器的初始大小等等,具体的配置参数文档可看这里https://github.com/rogerwang/node-webkit/wiki/Manifest-format
  2. 创建login.html,
    <!DOCTYPE html>
    <html lang="zh">
    <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    </head>
    <body>
    <h1>你好,世界</h1>
    </body>
    </html>
  3. 然后将login.html和package.json这两个文件压缩到一个zip压缩包里,命名为app.zip,然后把app.zip这个文件的扩展名改为nw,变为 app.nw。

把 app.nw放在自己下载的windows版本node-webkit解压后得到的文件夹里面。之后我们之前得到的app.nw这个文件就可以用nw.exe来执行了,直接把app.nw拖到nw.exe上就可以了。运行结果如下:
node-webkit把web应用打包成桌面应用
跟在chrome中打开index.html这个页面的效果差不多,当然你可以通过配置package.json这个文件,来隐藏浏览器的工具栏或边框,来使它更像是一个桌面软件。
因为nw文件的运行需要node-webkit环境的支持,所以我们还需要把app.nw这个文件跟node-webkit的环境文件一起打包成一个可执行文件。

首先打开windows的cmd,然后输入如下命令:

copy /b nw.exe+app.nw app.exe

到了这步,我们已经得到了app.exe这个文件,但如果只有app.exe这个文件还是不够的,这个可执行文件的运行还需要几个dll文件的支持。

其中 nw.pak 与 icudt.dll 这个两个文件是必须要的。

ffmpegsumo.dll 文件是媒体支持文件,如果你的html页面中用到了或或其它与媒体相关的东西,则必须带上这个文件。

libEGL.dll 和 libGLESv2.dll 这个两个文件则是使用webGL或GPU必须要的。
(此时NW.js的文件夹)

node-webkit把web应用打包成桌面应用

但我们大多数人想的是给用户一个exe文件,用户就可以使用了,不用再附带一些其他文件。

嗯,所以我们还可以把app.exe跟其他的文件再打包一次,把上图中的所有文件变成一个可执行文件,用户只要得到这个文件,就能运行我们的应用了。

做这步我们需要一个软件叫Enigma Virtual Box,首先下载和安装这个软件,然后打开它。

然后在Enter Input File Name那里输入我们的app.exe的路径,在Enter Output File Name那里填写我们要把打包出来的可执行文件输出到哪里。最后是把除app.exe外的其它文件拖入到Files那里,遇到提示的话默认就可以了。
node-webkit把web应用打包成桌面应用
最后点击右下角的Process按钮,就ok了。