概述
什么是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>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!-- OR -->
<script src="http://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>
</head>
<body>
<input style="display:none;" id="fileDialog" type="file" />
<script>
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代码。
Node.js API
• HTTP
• HTTPS
• Net
• TLS/SSL
• UDP/Datagram
• Stream
• DNS
• Domain
• Process
• Child Processes
• C/C++ Addons
• OS
• File System
• Crypto (加密)
• ……
Node.js – 第三方组件
详见：https://npmjs.org/
https://github.com/rogerwang/node-webkit/wiki/Using-Node-modules
安装：npm install <name>
node-webkit中如何使用Node.js
最后
以上就是贪玩雪糕为你收集整理的深入浅出node-webkit什么是node-webkit？node-webkit特点简单实例“Hello World”本地操作什么是Node.js？Node.js APINode.js – 第三方组件node-webkit中如何使用Node.js的全部内容，希望文章能够帮你解决深入浅出node-webkit什么是node-webkit？node-webkit特点简单实例“Hello World”本地操作什么是Node.js？Node.js APINode.js – 第三方组件node-webkit中如何使用Node.js所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
![嵌入式linux webkit,[Webkit分析]Webkit的资源加载流程](/uploads/reation/bcimg8.png)
发表评论 取消回复