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

本身参加的web项目,最后发现被公司封装成了桌面应用,因此一直好奇是怎么加壳的,在网上找资料后终于发现了一些方法,我找到了三种方法可实现:JWebBrowser(基于IE内核,使用时会发现不少html5不支持);JXBrowser(基于chrome内核,支持html5,但收费),node-webkit(基于chrome内核,惟一缺点是打包后exe程序过大),我用的是node-webkit,如下是本身抄袭并整理的一些内容:

node-webkit是一个Chromium和node.js上的结合体，经过它咱们能够把创建在chrome浏览器和node.js上的web应用打包成桌面应用，并且还能够跨平台的哦。很显然比起传统的桌面应用，在某些特定领域用html5+css3+js开发的web应用更加简单和高效，并且还可使用node.js的功能，因此node-webkit仍是颇有用处的。

下面我经过一个简单的demo来介绍怎么样把一个web应用打包成一个可执行文件（这里只介绍windows环境）

首先新建一个index.html文件，做为咱们这个demo的入口页面，咱们暂且就把这个页面当成一个完整的web应用吧。内容随便写点什么(可跳转已经发布的页面)，好比：

 

而后建立配置文件 package.json,内容以下：

 

如今咱们有了两个文件了。

 

而后将index.html和package.json,任务栏图标图片(png格式)这三个文件压缩到一个zip压缩包里，命名为app.zip

如今app.zip这个压缩包里的内容应该是这样的：

而后把app.zip这个文件的扩展名改成nw,变为 app.nw

而后下载一个windows版本的node-webkit,解压后获得一个文件夹：

 

以后咱们以前获得的app.nw这个文件就能够用nw.exe来执行了，直接把app.nw拖到nw.exe(没启动前)上就能够了

由于nw文件的运行须要node-webkit环境的支持，因此咱们还须要把app.nw这个文件跟node-webkit的环境文件一块儿打包成一个可执行文件。

首先打开windows的cmd(可shift+鼠标右键,选择在此处打开命令窗口),而后输入以下命令：

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

注意文件路径要根据你的实际状况进行变更，这里假设app.nw放在了node-webkit的主文件夹里，而后输出的app.exe也会在这个文件夹里。

执行命令后咱们获得了 app.exe 这个可执行文件。

 

到了这步，咱们已经获得了app.exe这个文件，但若是只有app.exe这个文件仍是不够的，这个可执行文件的运行还须要几个dll文件的支持。

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

ffmpegsumo.dll 文件是媒体支持文件，若是你的html页面中用到了<video>或<audio>或其它与媒体相关的东西，则必须带上这个文件。

libEGL.dll 和 libGLESv2.dll 这个两个文件则是使用webGL或GPU必需要的

 

最后咱们获得的就是这样一个文件夹：

 

 

执行app.exe就能够运行咱们的demo了。

 

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

嗯，因此咱们还能够把app.exe跟其余的文件再打包一次，把上图中的全部文件变成一个可执行文件，用户只要获得这个文件，就能运行咱们的应用了。

作这步咱们须要一个软件叫Enigma Virtual Box，首先下载和安装这个软件，而后打开它。

而后在Enter Input File Name那里输入咱们的app.exe的路径，在Enter Output File Name那里填写咱们要把打包出来的可执行文件输出到哪里。最后是把除app.exe外的其它文件拖入到Files那里，遇到提示的话默认就能够了。

 

最后点击右下角的Process按钮，就大功告成了。

 

 

最后咱们获得了一个 app_boxed.exe 的文件，只要把这个文件交给用户，用户就能够运行了。

node-webkit虽然方便，但有个很大的缺点是获得的可执行文件有点大，你们在能够在衡量利弊后决定使不使用

 

修改node-webkit的默认图标

(注意:在用enigmavb.exe加壳前替换图标,不然会出现”不是有效的32位系统”)

使用node-webkit开发应用程序的时候，最终生成的exe文件，使用的默认的图标，没法在代码中修改。此次就说说这图标的事，要用到两款软件（固然你能够用别的，我只提供一下个人方案）：Resource Hacker 和 Axialis IconWorkshop。

制做图标

第一步要作的是制做ico图标，在windows系统中，能够设置“大图标”，‘中等图标’和“小图标”等不一样尺寸，因此，一个ico文件实际上包含多个不一样尺寸的图标。

 

使用Axialis IconWorkshop打开你的图片，点击左上角的图标，而后就能够选择你要生成的尺寸了：

 

我作的时候选择了RGBA的各类尺寸图标，而后点击肯定，就生成ico文件了。

替换exe文件的图标

下一步就是替换图标，使用Resource Hacker打开exe文件：

能够看到node-webkit的默认图标只有一个48 x 48的。右键点击1033，选择替换资源，替换为刚才制做的ico文件：

 

ok，打完收工。另外发现貌似windows自己会缓存图标，就是说替换完后，在当前文件夹切换大图标之类的，仍是看不到效果，而且windows 7 左下角的信息也没变：

把exe复制到别的目录就能看到效果

----------------------------------------------------------------

抄袭路径:http://www.javashuo.com/article/p-zrjtemmh-cr.html

https://blog.csdn.net/w20101114/article/details/47129163