深入浅出node-webkit

一、什么是node-webkit？ node-webkit是一个基于Chromium和Node.js的Web运行环境，可让你直接在DOM中调用Node.js模块，并可使用任何现有的Web技术来编写本地应用。你可以用HTML5和Node.js进行桌面客户端开发,而且客户端还是同时支持在WIN，MAC，LINUX运行。项目详细信息：https://github.com

文章共3,289字 · 阅读需要大约11分钟

一键AI生成摘要，助你高效阅读

问答

glt3953

16301人浏览 · 2013-10-17 15:44:50

glt3953 · 2013-10-17 15:44:50 发布

什么是node-webkit？

node-webkit是一个基于Chromium和Node.js的Web运行环境，可让你直接在DOM中调用Node.js模块，并可使用任何现有的Web技术来编写本地应用。

你可以用HTML5和Node.js进行桌面客户端开发,而且客户端还是同时支持在WIN，MAC，LINUX运行。

项目详细信息：https://github.com/rogerwang/node-webkit

node-webkit特点

• Cross-platform, compatible with Linux, Mac OSX and Windows

• Complete support of running node.js in browser

• Easy to use

• Native UI library

• Frameless window

• Packaging and distribution

• Compatible with npm

• Debugger support

• Rich documentation

• Kiosk mode

• File dialogs

• Media

• Very good HTML5 support

• Drag & Drop

• Data persistent

• WebGL

• WebRTC

• datalist

• CSS3

简单实例“Hello World”

创建 index.html:

<html>

<head>

<title>Hello World!</title>

</head>

<body>

<h1>Hello World!</h1>

</body>

</html>

创建 package.json:

{

"name": "nw-demo",

"main": "index.html"

}

如何运行：

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

执行命令：

//指定app目录

$ nw path_to_app_dir

或者

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

$ nw path_to_app.nw

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

运行效果：

本地操作

以下代码可直接包含到<script></script>标签中

1.窗口（Window）

详见：https://github.com/rogerwang/node-webkit/wiki/Window

获取当前窗口对象：

// 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

})

2.菜单（Menu）

详见：https://github.com/rogerwang/node-webkit/wiki/Menu

// Load native UI library

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

// Create an empty menu

var menu = new gui.Menu();

// Add some items

menu.append(new gui.MenuItem({ label: 'Item A' }));

menu.append(new gui.MenuItem({ label: 'Item B' }));

menu.append(new gui.MenuItem({ type: 'separator' }));

menu.append(new gui.MenuItem({ label: 'Item C' }));

// Remove one item

menu.removeAt(1);

// Popup as context menu

menu.popup(10, 10);

// Iterate menu's items

for (var i = 0; i < menu.items.length; ++i) {

console.log(menu.items[i]);

}

3.菜单项（MenuItem）

详见：https://github.com/rogerwang/node-webkit/wiki/MenuItem

// Load native UI library

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

var item;

// Create a separator

item = new gui.MenuItem({ type: 'separator' });

// Create a normal item with label and icon

item = new gui.MenuItem({

type: "normal",

label: "I'm a menu item",

icon: "img/icon.png"

});

// Or you can omit the 'type' field for normal items

item = new gui.MenuItem({ label: 'Simple item' });

// Bind a callback to item

item = new gui.MenuItem({

label: "Click me",

click: function() {

console.log("I'm clicked");

}

});

// You can have submenu!

var submenu = new gui.Menu();

submenu.append(new gui.MenuItem({ label: 'Item 1' }));

submenu.append(new gui.MenuItem({ label: 'Item 2' }));

submenu.append(new gui.MenuItem({ label: 'Item 3' }));

item.submenu = submenu;

// And everything can be changed at runtime

item.label = 'New label';

item.click = function() { console.log('New click callback'); };

4.系统托盘（Tray）

详见：https://github.com/rogerwang/node-webkit/wiki/Tray

// Load native UI library

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

// Create a tray icon

var tray = new gui.Tray({ title: 'Tray', icon: 'img/icon.png' });

// Give it a menu

var menu = new gui.Menu();

menu.append(new gui.MenuItem({ type: 'checkbox', label: 'box1' }));

tray.menu = menu;

// Remove the tray

tray.remove();

tray = null;

5.剪贴板（Clipboard），仅支持纯文本的读写

详见：https://github.com/rogerwang/node-webkit/wiki/Clipboard

// Load native UI library

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

// We can not create a clipboard, we have to receive the system clipboard

var clipboard = gui.Clipboard.get();

// Read from clipboard

var text = clipboard.get('text');

console.log(text);

// Or write something

clipboard.set('I love node-webkit :)', 'text');

// And clear it!

clipboard.clear();

6.文件对话框（File dialogs）

详见：https://github.com/rogerwang/node-webkit/wiki/File-dialogs

<html>

<head>

</head>

<body>

function chooseFile(name) {

var chooser = $(name);

chooser.change(function(evt) {

console.log($(this).val());

});

chooser.trigger('click');

}

chooseFile('#fileDialog');

</script>

</body>

</html>

7.Shell（is a collection of APIs that do desktop related jobs）

详见：https://github.com/rogerwang/node-webkit/wiki/Shell

// Load native UI library.

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

// Open URL with default browser.

gui.Shell.openExternal('https://github.com/rogerwang/node-webkit');

// Open a text file with default text editor.

gui.Shell.openItem('test.txt');

// Open a file in file explorer.

gui.Shell.showItemInFolder('test.txt');

什么是Node.js？

Node.js是一个可以快速构建网络服务及应用的平台，Node.js不是JS应用、而是JS运行平台。该平台的构建是基于Chrome's JavaScript runtime，也就是说，实际上它是对Google V8引擎（应用于Google Chrome浏览器)进行了封装。简单的说，Node.js是服务器端的JavaScript，它允许在后端（脱离浏览器环境）运行JavaScript代码。