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" }

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