【转】node-webkit：开发桌面+WEB混合型应用的神器

2022-08-18 10:07:58

顾名思义，node-webkit就是nodejs+webkit。

这样做的好处显而易见，核心奥义在于，用nodejs来进行本地化调用，用webkit来解析和执行HTML+JS。

快速上手

下载node-webkit

点击这里：

https://github.com/rogerwang/node-webkit

找到Downloads这一小节，然后下载对应平台的node-webkit预编译包。（为了介绍起来方便，本文后续内容全部针对windows平台，OSX和linux平台上的操作类似，就不做特意说明了。）

下载完之后解压，可以看到如下内容：

双击nw.exe直接运行，看到如下界面说明一切都ok，在你的机器上可以运行：

Hello nw

老规矩，先来Hello World!

建一个example1.html，内容如下：

<!DOCTYPE html>

<html>

  <head>

    <title>Hello World!</title>

  </head>

  <body>

    <h1>Hello node-webkit!</h1>

    We are using node.js <script>document.write(process.version)</script>.

  </body>

</html>

在同一级目录下再建一个package.json，内容如下：

{
     "main" : "example1.htm" ,                                /* APP的主入口，文件名任意；必选 */
     "name" : "nw-demo" ,                                     /* APP的名称，必须具备唯一性，且符合正常变量命名；必选 */
     "description" : "demo app of node-webkit" ,              /* APP的简单描述 */
     "version" : "0.1.0" ,                                    /* APP的版本号 */
     "keywords" : [ "demo" , "node-webkit" ],                 /* APP的关键字，搜索APP时用到 */
     "window" : {                                             /* APP的窗口属性 */
         "icon" : "link.png" ,                                /* APP图标（windows下，状态栏上可见） */
         "toolbar" : true ,                                   /* 是否显示工具栏 */
         "width" : 800,                                       /* 窗口初始化大小 */
         "height" : 500,
         "frame" : true                                       /* 是否显示外窗体，如最大化、最小化、关闭按钮 */
     },
     "user-agent" : "%name %ver %nwver %webkit_ver %osinfo"   /* 可自定义APP的UA */
}

好了，用你机器上的压缩工具，rar或者7z或者神马神马的，把这两个文件压缩成exampl1.zip，如下图所示：

注意，用什么工具压缩无所谓，但是一定要压缩成ZIP格式。

把example1.zip拷贝到与nw.exe同级的目录下，如下图：

然后用鼠标把example1.zip拖动到nw.exe上运行（用命令行也可以，不过在windows下还是直接拖比较爽一点），效果如下图：

这样，第一个例子就完成了，然后你自己编写其他代码来运行了。

第一个例子代码非常简单，你可以自己加点儿你最熟悉的JS代码，比如这样：

<!DOCTYPE html>

<html>

  <head>

    <title>Example2</title>

    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />

  </head>

  <body>

    <h1>Example2</h1>

    <script>

        alert("This is example2!");

    </script>

  </body>

</html>

打包和分发

如上图，很显然，要想让我们的应用跑起来，以上这些dll和pak文件是少不了的（至于每个文件是用来干嘛的，请参见官方的描述文档）。

那么，对于我们做的example1这个简单的应用，怎么让我们的用户能运行它呢？当然，让我们的用户自己去下载node-webkit然后解压运行，这也算一种办法，这样的话我们只要把example1.zip文件扔给他就可以了。

不过这样总觉得有点儿奇怪，要是能把所有相关的内容都打包成一个独立的exe文件就好了，比如打包成example1.exe，这样用户拿到之后直接双击就可以运行就更好。

首先，我们要合并example1.zip和nw.exe，形成一个新文件，名为example1.exe，这一点我们通过windows的命令行下的copy命令可以实现：

example1.zip改后缀为example1.nw

copy /b nw.exe+example1.nw example1.exe

cd 路径（比如：cd D:\node-webkit）进入目录

//copy /b nw.exe+example1.nw example1.exe

copy /b nw.exe+(APP name).nw (生成的name).exe

注意，nw.exe必须放在+号前面。

这样就生成了一个名为example1.exe的文件，双击这个文件，看到的效果和第一个例子相同。很显然，这个example1.exe还是要依赖那些dll文件才能运行，所以，这时候我们需要一款打包工具来帮助我们把这些example1.exe和dll文件都打包到一起，它就是Enigma Virtual Box，大家可以点击这里下载安装（内含中文语言包）：

http://enigmaprotector.com/assets/files/enigmavb.exe

安装完成之后启动，看到如下界面：