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


    顾名思义,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: ode-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

          安装完成之后启动,看到如下界面:

         

          打包过程截图(请按照图中的配置操作):

         

          点击右下角的Process按钮开始打包,最终获得了一个名为example1_boxed.exe的文件。把这个文件拷贝到其它任意目录中双击,如果能顺利运行,说明打包成功!你可以把它分发给你的用户了!

          官方的文档上还介绍了其它几种打包分发方式,有兴趣的参见这里:

          https://github.com/rogerwang/node-webkit/wiki/How-to-package-and-distribute-your-apps

          以上就是关于node-webkit用法的一些简单示例,你可以沿着这个方向自己去探索了。

    如何利用nodejs调用本地接口?

           很显然,既然nodejs都被打包进来了,网上众多的npm模块都是可以拿过来使用的,具体做法官方主页上都有比较详细的介绍。

           参见这里:https://github.com/rogerwang/node-webkit

           官方的主页上还展示了众多使用node-webkit制作的应用,各位自行点击查看即可。

    参考资料

            关于node-webkit作者的介绍参见这里:

            http://www.csdn.net/article/2014-01-08/2818066-Node-Webkit

            node-webkit在github上的地址:

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

            由于node-webkit的作者提供的文档都是E文的,有热心网友对文档做了一些翻译,参见这里:

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

            其他参考:

            http://www.open-open.com/lib/view/open1383143218062.html

         

  • 相关阅读:
    电梯设计需求调研报告
    返回一个整数数组中最大子数组的和。
    返回一个整数数组中最大子数组的和
    四则运算2程序及运行结果
    四则运算2
    上半学期读软件工程方面著作的读书计划
    写输出30道小学生四则运算程序的解题思路及未在规定时间内完成程序的原因
    《人月神话》读后感
    阅读《软件工程—理论方法与实践》第十一章心得体会
    java常见排序方法
  • 原文地址:https://www.cnblogs.com/ronle/p/3555348.html
Copyright © 2020-2023  润新知