node-webkit入门:用JS开发跨平台的桌面应用

node-webkit入门:用JS开发跨平台的桌面应用

 

转载▼

标签：  node-webkit   桌面应用   it

分类： nodewebkit

     先来说下我这里的场景，公司目前在给客户那边做一个数据仓库的项目，用EXTJS做完了B/S结构的，但是发现当初答应客户要有个C/S结构的，现在来说的话，如果在重头搞C/S结构时间 人力都木有的。  然后部门老大说你可以看看 node-webkit，咱们只要用一下最基本的包装就行，就是把一个网址直接包入到客户端中，是个伪C/S结构。 

以下是从网络上搞的各种文章。 ，在自己稍加修改后，写出来。  目前自己在 MAC和WIN8上亲测成功！！



==================================我是分割线===================================


node-webkit是一个基于chromium和node.js实现的应用程序运行时环境，开发人员可运行通过HTML(5)、CSS(3)、Javascript来编写的本地应用程序。
项目地址：  https://github.com/rogerwang/node-webkit
文档：  https://github.com/rogerwang/node-webkit/wiki
开源协议：MIT

特点：
使用web技术开发，html5、css3、js、webGL。
在网页中使用node.js。
跨平台运行，兼容linux、mac、windows。

安装node-webkit(这里以mac os为例)
1.去github下载mac版的node-webkit   https://github.com/rogerwang/node-webkit      

下载之后解压：如下图






2.解压之后修改 ~/.bash_profile ，设置node-webkit执行程序的别名为nw(本人解压在/Applications目录)。
alias nw=" /Applications/node-webkit-v0.9.2-osx-ia32/node-webkit.app /Contents/MacOS/node-webkit”
这里如何查看Contents/MacOS/  这个目录呢？ 其实mac会把应用程序打成一个包，你要右击应用程序，然后显示包内容如下图




3.使别名立即生效
source ~/.bash_profile 
4. 在控制台输入nw测试是否安装成功。
PS：Windows安装很方便，直接解压缩就好。


使用node-webkit进行开发
 一个基本的node-webkit项目一般由3部分组成：主窗口文件index.html、配置文件package.json、其他一些资源及类库。




接下来，搞个helloworld。

Mac版本：
1. 新建一个项目文件夹test1/
2. 创建主窗口文件test1/index.html

3. 创建test1/package.json
 {      "main" : "index.html",    
        "name" : "test",     
        "window" : {            "toolbar" : false       }
}
这里的main也可以直接写一个网址： 比如把一个B/S结果的网站，给搞成一个伪状态的C/S结构，这其实就是我们搞的关键

4.  在控制台执行 nw test1 就能运行该应用程序。


打包应用程序
目前我们运行一个应用程序需要通过命令行来执行。
但在实际环境中我们需要将应用打包成.app(mac)或.exe(windows)文件以方便用户的使用。
mac电脑上打包很简单，只需要将我们的项目压缩成xx.nw 。在将xx.nw复制到node-webkit.app/Contents/Resources目录下。node-webkit.app就是你的应用程序了，然后改名字如 hello.app 。 
压缩： zip app.nw package.json
拷贝：cp app.nw /Applications/node-webkit-v0.9.2-osx-ia32/node-webkit.app/Contents/Resources/
最后完事删除掉：rm -rf app.nw




windows下：
下载完之后解压，可以看到如下内容：
   
 
     双击nw.exe直接运行，看到如下界面说明一切都ok，在你的机器上可以运行：




    老规矩，先来Hello World!
 
        建一个example1.html，内容如下：
 

 
        在同一级目录下再建一个package.json，内容如下：
 
{
  "name": "nw-demo",
  "main": "example1.html"
}
 
        好了，用你机器上的压缩工具，rar或者7z或者神马神马的，把这两个文件压缩成exampl1.zip，如下图所示：
 
  




        注意，用什么工具压缩无所谓，但是一定要压缩成ZIP格式。
 
        把example1.zip拷贝到与nw.exe同级的目录下，如下图：
   
 
 
        然后用鼠标把example1.zip拖动到nw.exe上运行（用命令行也可以，不过在windows下还是直接拖比较爽一点），效果如下图：
   
 
 
        这样，第一个例子就完成了，然后你自己可以去玩儿了。
 
        按照官方的搞法，example1.zip可改名成example1.nw，这样显得更加高大上一些。不过由于小僧的BIG一向比较低，私认为用.zip作为后缀也没啥不可以。
 
 
来点儿JS
 

        第一个例子代码非常简单，你可以自己加点儿你最熟悉的JS代码，比如这样：
        显然，这里有很多HTML5的习惯写法，那当然是必须的对吧？因为webkit在google的调教之下早已成了HTML5的开路先锋了！
  打包和分发
   
   
        如上图，很显然，要想让我们的应用跑起来，以上这些dll和pak文件是少不了的（至于每个文件是用来干嘛的，请参见官方的描述文档）。
 
        那么，对于我们做的example1这个简单的应用，怎么让我们的用户能运行它呢？当然，让我们的用户自己去下载node-webkit然后解压运行，这也算一种办法，这样的话我们只要把example1.zip文件扔给他就可以了。
 
        不过这样总觉得有点儿奇怪，要是能把所有相关的内容都打包成一个独立的exe文件就好了，比如打包成example1.exe，这样用户拿到之后直接双击就可以运行，这样显然是极好的。
 
        OK,let's go!
 
        首先，我们要合并example1.zip和nw.exe，形成一个新文件，名为example1.exe，这一点我们通过windows的命令行下的copy命令可以实现：
 
copy /b nw.exe+example1.zip example1.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的文件。把这个文件拷贝到其它任意目录中双击，如果能顺利运行，说明打包成功！你可以把它分发给你的用户了！
 


最后说下 package.json

{     "main": "main.html",                                   "name": "nw-demo",                                     "description": "demo app of node-webkit",              "version": "0.1.0",                                    "keywords": [ "demo", "node-webkit" ],                 "window": {                                                "icon": "link.png",                                    "toolbar": true,                                       "width": 800,                                          "height": 500,         "frame": true                                      },     "user-agent": "%name %ver %nwver %webkit_ver %osinfo"  }

  
整理完事，有问题请留言！