hello node-webkit

什么是node-webkit？

node-webkit是一个基于Chromium与Node.js的应用程序运行器，允许开发者使用web技术编写桌面应用程序。它是在英特尔的开源技术中心创建和发展起来的。

node-webkit有什么特点？

可以用HTML5、CSS3、JS和WebGL写应用
完全支持Node.js的API以及它的所有第三方模块
性能好：Node和WebKit运行在同一个线程内，函数调用简单，对象也在同一个堆上，可以与相引用
容易打包和发布应用
跨平台运行，兼容Linux、Mac OSX和Windows

以上是官方的介绍，接下来开始动手吧！

准备环境（我的是win7）

去 https://github.com/rogerwang/node-webkit 下载对应系统的node-webkit，然后找个地方解压放好，最后再配置下环境变量就可以了。

首先创建一个文件夹做为应用的根路径，如：hello
接着在hello文件夹下，创建一个html的文件：index.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <title>Hello World!</title>
 5 </head>
 6 <body>
 7 <h1>Hello World!</h1>
 8 We are using node.js <script>document.write(process.version)</script>
 9 </body>
10 </html>

然后创建配置文件：package.json

1 {
2   "name": "nw-demo",
3   "main": "index.html"
4 }

最后在hello所在的目录，执行 nw hello 就可以看到以下的界面了

接下来，再试下怎么调用本地的API

index.html 主页HTML代码，主要是添加了一些测试API的按钮

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4 <title>Hello World!</title>
 5 <meta charset="UTF-8" />
 6 <script type="text/javascript" src="js/native-api.js"></script>
 7 </head>
 8 <body>
 9 <h1>Hello World!</h1>
10         We are using node.js <script>document.write(process.version)</script>
11 <section>
12         <h2>Native api</h2>
13         <p>
14                 <button type="button" value="" onclick="navite.minimize()">
15                         最小化窗口
16                 </button>
17         </p>
18         <p>
19                 <button type="button" value="" onclick="navite.listenMinimize()">
20                         监听最小化窗口事件
21                 </button>
22                 <button type="button" value="" onclick="navite.cancelMinimize()">
23                         取消最小化窗口事件的监听
24                 </button>
25         </p>
26         <p>
27                 <button type="button" value="" onclick="navite.listenClose()">
28                         监听关闭窗口事件
29                 </button>
30                 <button type="button" value="" onclick="navite.cancelClose()">
31                         取消关闭窗口事件的监听
32                 </button>
33         </p>
34         <p>
35                 <button type="button" value="" onclick="navite.newWin()">
36                         打开新窗口
37                 </button>
38                 <button type="button" value="" onclick="navite.closeWin()">
39                         关闭当前窗口
40                 </button>
41         </p>
42         <p>
43                 <button type="button" value="" onclick="navite.createContextMenu()">
44                         创建右键菜单
45                 </button>
46                 <button type="button" value="" onclick="navite.createTrayMenu()">
47                         创建系统托盘
48                 </button>
49         </p>
50         <p>
51                 <input type="text" id="copyText" value="修改这里的文本"/>
52                 <button type="button" value="" onclick="navite.copyText()">复制</button>
53         </p>
54 </section>
55 </body>
56 </html>

package.json 配置文件，主要增加了详细配置窗口的一些属性

 1 {
 2   "name": "nw-demo",
 3   "main": "index.html",
 4   "description":"demo app of node-webkit",
 5   "version":"0.1.0",
 6   "keywords":["demo","node-webkit"],
 7   "window":{
 8                 "icon":"16x16.png",
 9                 "toolbar":true,
10                 "width":800,
11                 "height":500,
12                 "position":"mouse",
13                 "min_width":400,
14                 "min_height":200,
15                 "max_width":800,
16                 "max_height":600,
17                 "resizable":false,
18                 "always-on-top":false,
19                 "fullscreen":false,
20                 "show":true,
21                 "frame":true//true表示有框窗口
22         },
23   "webkit":{
24                 "plugin":true
25   }
26 }

native-api.js 主要是利用本地API定义了一些函数，给页面调用

 1 var gui = require('nw.gui');
 2 var win = gui.Window.get();
 3 var tray;
 4 var navite={
 5         //窗口最小化
 6         minimize:function(){
 7                 win.minimize();
 8         },
 9         //监听窗口最小化事件
10         listenMinimize:function(){
11                 win.on('minimize',function(){
12                         alert('窗口被最小化');
13                 });
14         },
15         //监听窗口关闭事件
16         listenClose:function(){
17                 win.on('close',function(){
18                         alert('窗口被关闭');
19                 });
20         },
21         //取消窗口关闭事件的监听
22         cancelClose:function(){
23                 win.removeAllListeners('close');
24         },
25         //取消窗口最小化事件的监听
26         cancelMinimize:function(){
27                 win.removeAllListeners('minimize');
28         },
29         //创建新的窗口
30         newWin:function(){
31                 gui.Window.get(window.open('http://chensy0203.github.com'));
32         },
33         //关闭当前窗口
34         closeWin:function(){
35                 win.close();
36         },
37         //创建右键菜单
38         createContextMenu:function(){
39                 var menu = new gui.Menu();
40                 menu.append(new gui.MenuItem({label:'Item A'}));
41                 menu.append(new gui.MenuItem({label:'Item B'}));
42                 menu.append(new gui.MenuItem({type:'separator'}));
43                 menu.append(new gui.MenuItem({label:'Item C'}));
44                 document.body.addEventListener('contextmenu',function(ev){
45                         ev.preventDefault();
46                         menu.popup(ev.x,ev.y);
47                         return false;
48                 });
49         },
50         //创建系统托盘
51         createTrayMenu:function(){
52                 var trayMenu = new gui.Menu();
53                 trayMenu.append(new gui.MenuItem({label:'test1'}));
54                 trayMenu.append(new gui.MenuItem({label:'test2'}));
55                 trayMenu.append(new gui.MenuItem({label:'test3'}));
56                 win.on('minimize',function(){
57                         this.hide();//隐藏窗口
58                         tray=new gui.Tray({title:'系统托盘',icon:'16x16.png'});
59                         tray.menu=trayMenu;
60                         tray.on('click',function(){
61                                 this.remove();//删除系统托盘
62                                 tray=null;
63                                 win.show();//显示窗口
64                         });
65                 });
66         },
67         copyText:function(){
68 
69         }
70 }