这年头·你只需要懂node-webkit

2014-08-21 13:15

这年头·你只需要懂node-webkit

node-webkit 这个项目开始于 2011 年,是一个让开发者可以用 Web 技术,也就是 HTML5、CSS 和 JavaScript 来编写桌面程序的应用框架。作为开发者,我们只需要写一份代码,就能编译成跑在 Windows、Mac 和 Linux 下的应用程序。

动画、图形、音频、视频、2D、3D、WebGL,webrtc 等等,都让基于 HTML5 的应用开发充满了想象力,基本上可以开始任何桌面应用.

node-webkit由nodewebkit合二而成,Node 支持系统级的 API,但是缺乏对于渲染的支持。而Webkit并不能访问到系统调用,却能渲染内容。这样既可以把一切呈现给用户,还能很好的与用户的IO互动。

Node 是一个基于 Google Chrome V8 引擎的轻量级 Javascript 运行平台。Node 采用 C++ 编写,直接在操作系统的应用层上,支持很多系统级的 API,如文件操作、网络编程等,所以可以用来编写系统级应用或者服务端应用等。

Webkit(Chromium) 是 Web 内容的渲染引擎。举个例子,一个网页由 HTML、CSS 和 JavaScript 组成,页面加载后会被语法分析器解析成树,然后交由 Webkit 做渲染,这样才得到一个我们看到的页面。在 node-webkit 里,选择了是基于 Webkit 二次开发的 Blink 引擎,正好其 JavaScript 解析引擎也是 node 所采用的 V8 引擎。

node-webkit两者都是基于事件驱动,基于V8引擎,通过context互通,访问对方的对象

在 node-webkit 中,相对于原生webkit,增加了一个frame,在node frame 中,将不再有AJAX 不能跨域请求这个限制,所有的 node frame 中共享同一个 security token,包括 node context 和 webkit context,跨域访问被允许,也就能访问到 node context 中的对象。

node-webkit只完全融合了Chromium内核,但浏览器层是自己实现的,比如绘制窗口,UI控件等,而像chrome在浏览层实现的Web Notification,node-webkit就不具备。

开始 node-webkit

如何运行:

下载你所属系统对应的nw二进制文件;

执行命令:

//指定app目录

$ nw path_to_app_dir

或者

//把app目录压缩成zip文件并重命名为app.nw

$ nw path_to_app.nw

Tips:可以直接把nw文件放入项目根目录下,运行nw文件就能运行程序, 开发阶段推荐这种方式。

快速入门 – Native API

获取当前窗口对象:

// Load native UI library

var gui = require('nw.gui');

var win = gui.Window.get();

最小化窗口:

win.minimize();

// 监听最小化事件

win.on('minimize', function() {

console.log('Window is minimized'); });

// 取消监听 win.removeAllListeners('minimize');

打开新窗口:

var new_win = gui.Window.get( window.open('https://github.com')

);

关闭窗口:

win.close();

监听关闭窗口:

win.on(‘close’, function () {

//TODO

})

快速入门 – 右键菜单

var gui = require('nw.gui');

var menu = new gui.Menu();

menu.append(new gui.MeniItem({Label:'查看'}));

。。。。
document.body.addEventListener('contextmenu',function(ev)){

ev.preventDefault();

menu.popup(ev.x,ev.y);

return false;

});

快速入门 – 系统托盤

var gui = require('nw.gui');

var win = gui.Window.get();

var traymenu = new gui.Menu();

var tray;

traymenu.append(new gui.MeniItem({Label:'最大化'}));

。。。。

win.on('minimize',fuction(){

this.hide;
tray=new gui.Tray({title:'托盘',icon:'icon.png'});

tray.menu=traymenu;

tray.on('click',function(){

this.remove;
tray=null;
win.show();
});
});

快速入门 – 更多Nactiv API

  • Clipboard(剪切板)
  • File dialogs(文件对话框)
  • Shell
  • openExternal(URI) 在系统浏览器打开链接
  • openItem(file_path) 使用默认文件编辑器打开 文件
  • showItemInFolder(file_path) 在文件管理器中 显示文件

直接使用 — 打包你的应用

第一步:打包项目文件

把项目文件打包成一个zip文件,并把后缀重命名为nw,如 app.zip -> app.nw。

注意:package.json文件必须在根目录下。

目录结构参照:

app.nw

|-- package.json

-- index.html

-- js

-- css

-- img

...

第二步:创建可执行文件

Windows:

$ copy /b nw.exe+app.nw app.exe

Linux:

$ cat /usr/bin/nw app.nw > app && chmod +x app

第三步:创建安装包

Windows:

Inno Setup http://www.jrsoftware.org/isinfo.php

Ubuntu/Debian:

Debreate http://debreate.sourceforge.net

Mac:

重命名node-webkit.app即可。

别忘了nw.pak文件。 Windows下还需要icudt.dll

想学习node,请使用七天学会nodejs,如果要想学习webkit,请使用开发者需要了解的WebKit