随着近两年来nodejs的迅速走红(这个npm的功不可灭),nodejs实际上成为js服务端和工具桌面端开发事实上的标准。似乎用javascript开发桌面应用时代正在来临。各种开发桌面应用的js框架工具陈出不穷,下面主要介绍的是一些开源项目js框架工具 for Desktop Application。
Electron
Github开源的,用JavaScript编写桌面应用的框架。Electron为用纯JavaScript创建桌面应用提供了运行时。原理是,Electron调用你在package.json
中定义的main文件并执行它。main文件(通常被命名为main.js)会创建一个内含渲染完的web页面的应用窗口,并添加与你操作系统的原生GUI(图形界面)交互的功能。
下载需要翻墙:
https://www.npmjs.com/package/electron-download
在环境变量中设置即可 npm install electron-prebuilt
。
## Electron Mirror of China
ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/"
CHROMEDRIVER_CDNURL=http://npm.taobao.org/mirrors/chromedriver
## or for a local mirror
ELECTRON_MIRROR="https://10.1.2.105/"
ELECTRON_CUSTOM_DIR="our/internal/filePath"
NW.js (以前叫 node-webkit)
与App.js类似,通过将node.js与Chromiuml联合在一起,实现本地桌面应用开发的,是App.js的后起之秀。实现原理是基于Chromium项目的Content Layer构建(Chromium Browser也同样基于Content Layer); 实现上的特点是把Node.js的消息循环(libuv)和Chromium Renderer进程的消息循环合并到一起,因为这样才能从DOM(HTML)中直接调用Node.js提供的函数;把Node.js使用的V8引擎和 Chromium的V8引擎合并,使得Node.js的Javascript和DOM里面的Javascript可以互相访问;另外因为是支持本地应用, 所以安全模型和Web程序有很大不同:node-webkit程序可以做web应用不允许做的很多事情,除了通过node.js访问本地OS以外,还可以进行跨域访问等操作。是英特尔开放源码技术中心(OTC)的软件架构师Rogerwang(王文睿)发起,在公司专职开发node-webkit(幸福啊)。
本质上它和PhoneGap一样都是属于胶水层,只不过PhoneGap是尽量以遵循W3C最新规范的形式来提供本地访问API,其它的不规范接口以各种插件形式提供;而node-webkit则是通过node.js提供本地访问的接口。与PhoneGap比较而言,如果PhoneGap要为某个平台提供新的本地API接口,必须通过开发插件的形式提供,而且各个平台的插件开发的开发语言都不一样。而node.js有node-gyp(native addon build tool) 工具统一build。而node.js的 node-ffi 附加插件更使得我们可以直接在js中调用动态链接库的API:
var ffi = require("node-ffi");
var libm = new ffi.Library("libm", { "ceil": [ "double", [ "double" ] ] });
libm.ceil(1.5); // 2
// You can also access just functions in the current process by passing a null
var current = new ffi.Library(null, { "atoi": [ "int32", [ "string" ] ] });
current.atoi("1234"); // 1234
地址: https://github.com/rogerwang/node-webkit
如何把你的javascript 应用打包成一个可执行文件,这里已经说得很详细了:https://github.com/rogerwang/node-webkit/wiki/How-to-package-and-distribute-your-apps
node-x11
这个是用纯js实现了X11 Client的核心协议,包括Xrender, Damage, Composite, Big-Requests, Dpms, Screensaver, XFixes, Shape, XTest, XC-Misc, GLX and Apple-WM extensions。用来开发X-Windows GUI程序。基于 node-x11 有人做了进一步的封装:ntk(desktop UI toolkit), 然后做出了一个纯js的 VNC Viewer: node-vnc.
Windows用户要先安装 XMing or Cygwin/X。
地址: https://github.com/sidorares/node-x11
X11窗口例子:
var x11 = require('../../lib');
var PointerMotion = x11.eventMask.PointerMotion;
x11.createClient(function(err, display) {
var X = display.client;
var root = display.screen[0].root;
var white = display.screen[0].white_pixel;
var black = display.screen[0].black_pixel;
var wid = X.AllocID();
X.CreateWindow(wid, root, 0, 0, 400, 300, 0, 0, 0, 0, { backgroundPixel: white, eventMask: PointerMotion });
var gc = X.AllocID();
X.CreateGC(gc, wid);
X.MapWindow(wid);
});
ntk 的例子:
var ntk = require('../lib');
ntk.createClient(main);
function main(err, app) {
var mainwnd = app.createWindow({title: "Close me!"})
.on('mouseout', function(ev) { console.log('Out'); })
.on('mouseover', function(ev) { console.log('In'); })
.on('mousedown', function(ev) {
ev.window.unmap();
setTimeout(function() { ev.window.map(); }, 1000);
})
.map();
}
node-qt
node-qt是基于QT的node.js封装,而node-five 则是基于node-qt的封装实现了HTML5 graphics and audio。
地址:
使用 node-qt 的代码写法如下:
var qt = require('node-qt'),
app = new qt.QApplication,
window = new qt.QWidget;
// Prevent objects from being GC'd
global.app = app;
global.window = window;
// Quirk: the virtual method paintEvent() is mapped into a callback setter
window.paintEvent(function() {
var p = new qt.QPainter();
p.begin(window);
p.drawText(20, 30, 'hello node, hello qt');
p.end();
});
window.resize(300, 150);
window.show();
// Join Node's event loop
setInterval(app.processEvents, 0);
Node-Five的写法:
var five = require('path-to-node-five-dir'),
window = new five.Window(300, 150),
canvas = new five.Canvas(window),
ctx = canvas.getContext('2d');
ctx.fillStyle = 'black';
ctx.fillText('hello node, hello qt', 20, 20);
wxNode
wxNode是基于跨平台的wxWidgets的node.js封装插件包。也就是能让你用wxWidgets GUI组件开发桌面应用。
地址: https://github.com/joeferner/wxNode
例子:
var wx = require("wxnode");
var MyApp = wx.App.extend({
onInit: function() {
var location = new wx.Point(50, 50);
var size = new wx.Size(450, 340);
var frame = new MyFrame("Hello World", location, size);
frame.show(true);
this.setTopWindow(frame);
return true;
}
});
var MyFrame = wx.Frame.extend({
init: function(title, pos, size) {
this._super(null, -1, title, pos, size);
this.EVT_CLOSE(this.onClose);
},
onClose: function(event) {
process.exit();
}
});
var app = new MyApp();
app.run();
运行:
node examples/helloWorld.js
TideSDK
最后提下TideSDK, 就是以前的Titanium Desktop SDK,以web技术(HTML5. CSS3, JS)创建桌面应用的开源框架工具。与前面的框架相比它的特色是:它不仅仅支持用js来开发桌面应用,它还支持用C/C++, Ruby, Python, PHP来开发和写模块。而且这些语言写的模块可以彼此调用。Tide拥有一个用C++写的微内核,该微内核是支持跨平台,跨语言的绑定和调用框架。TideSDK没有加入node.js的支持是为遗憾。
游戏应用
对于希望用js来开发游戏和动画交互强的应用,那么可能除了node-qt外,还可以考虑下下面的框架:
- Ejecta for iOS: A Fast, Open Source JavaScript, Canvas & Audio Implementation for iOS
- node-sdl: sdl的封装
- Fast Canvas
- node-canvas, node-skia: 分别是基于cairo 和 skia 的图形库的封装。
- node-openvg : 目前似乎只支持Raspbian(RasberryPi).
- CocoonJS:不错的非开源