1. 这年头，你只需要懂node-webkit
@ethanlai
http://oklai.name

2. About Me
ISUX QQ会员设计中心
Koala 作者
Blog: http://oklai.name
Github: https://github.com/oklai

3. Node-webkit是啥?

4. 现有的桌面开发技术
• C++
• VC / VB / C#
• Delphi
• Java
• Python
• Qt
• Adobe AIR

5. Hello World
Windows Forms

6. QML

7. Java GUI

8. Delphi

9. C++

11. node-webkit

12. node-webkit是什么？
项目地址：
https://github.com/rogerwang/node-webkit
node-webkit是一个基于Chromium与node.js的
应用程序运行器，你可以使HTML+JavaScript
编写原生应用。在node-webkit内部，不紧可
以使用浏览器本身的DOM对象，还允许你直
接调用Node.js模块。这是一种新的开发方式，
使用web技术开发原生应用。

13. node-webkit是什么？

14. node-webkit是什么？
node.js对象与DOM对象共存

15. 特点：
• 使用最新技术开发应用，HTML5、CSS3、JS、
WebGL。
• 完整支持Node.js APIs 与其他第三方模块。
• 高性能：Node与Webkit运行在同一个进程
中，函数调用简单，可以互相引用。
• 轻松打包和分发应用程序。
• 跨平台运行，兼容Linux，Mac OSX和
Windows。

16. 开始 node-webkit
创建 index.html:
创建 package.json:

17. 开始 node-webkit
如何运行：
下载你所属系统对应的nw二进制文件；
执行命令：
//指定app目录
$ nw path_to_app_dir
或者
//把app目录压缩成zip文件并重命名为app.nw
$ nw path_to_app.nw
Tips：可以直接把nw文件放入项目根目录下，运行nw文件就能运行程序，
开发阶段推荐这种方式。

18. 开始 node-webkit

19. Quick Start – package.json

20. Quick Start – package.json
title(string)
width/height(int)
toolbar(boolean)
icon(string)
position(string)
min_width/min_height(int)
max_width/max_height(int)
as_desktop(boolean)
resizable(boolean)
always-on-top(boolean)
fullscreen(boolean)
frame(boolean)
show (boolean)
......

21. Quick Start – 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');

22. Quick Start – Native API
打开新窗口：
var new_win = gui.Window.get(
window.open('https://github.com')
);
关闭窗口：
win.close();
监听关闭窗口：
win.on(‘close’, function () {
//TODO
})

23. Quick Start – 无框窗口
package.json
Index.html

24. Quick Start – 无框窗口

25. Quick Start – Menus(菜单)

26. Quick Start – Tray(系统托盘)

27. Quick Start — 设置Logo图标
Package.json：
Inno Setup：
勾选创建桌面图标，修改iss文件
Mac：
修改：Contents/Resources/app.icns

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

29. Quick Start – 打包你的应用
• 第一步：打包项目文件
把项目文件打包成一个zip文件，并把后缀重命名为nw，如
app.zip  app.nw。注意：package.json文件必须在根目录下。
目录结构参照：
app.nw
|-- package.json
`-- index.html
`-- js
`-- css
`-- img
...

30. Quick Start – 打包你的应用
• 第二步：创建可执行文件
Windows:
$ copy /b nw.exe+app.nw app.exe
Linux:
$ cat /usr/bin/nw app.nw > app && chmod +x
app

31. Quick Start – 打包你的应用
• 第二步：创建可执行文件
Mac OS X:
下载node-webkit.app文件，使用包管理方式打开，把
项目目录整个到Contents/Resources目录下，并重命名
为app.nw（如果想要更快地启动速度，可以使用zip打
包后的app.nw文件）。
需要修改的文件：
– Contents/Resources/app.icns app 图标
– Contents/Info.plist 苹果软件包说明文件

32. Quick Start – 打包你的应用
别忘了nw.pak文件。
Windows下还需要icudt.dll。

33. Quick Start – 打包你的应用
• 第三步：创建软件安装包

34. Quick Start – 打包你的应用
• 第三步：创建安装包
Windows：Inno Setup
http://www.jrsoftware.org/isinfo.php
Ubuntu/Debian：Debreate
http://debreate.sourceforge.net
Mac：重命名node-webkit.app即可。

35. Quick Start – 打包你的应用
Inno Setup

36. Quick Start – 打包你的应用
Debreate

37. The End!?

39. 什么是Node.js？
Node.js是一个可以快速构建网络服务及应用的平
台。该平台的构建是基于Chrome's JavaScript
runtime，也就是说，实际上它是对GoogleV8引
擎（应用于Google Chrome浏览器)进行了封装。
简单的说，Node.js是服务器端的JavaScript，它允
许在后端（脱离浏览器环境）运行JavaScript代码。
Node入门：http://www.nodebeginner.org/index-
zh-cn.html

40. Node.js API
• HTTP
• HTTPS
• Net
• TLS/SSL
• UDP/Datagram
• Stream
• DNS
• Domain

41. Node.js API
• Process
• Child Processes
• C/C++ Addons
• OS
• File System
• Crypto (加密)
• ……

42. Node.js – 第三方组件
安装：npm install <name>
https://npmjs.org/

43. Node.js – 第三方组件
• 公司内网访问不了怎么办？
$ npm config set proxy http://proxy.tencent.com:8080
$ npm config set registry http://registry.npmjs.org
doc: https://npmjs.org/doc/config.html

44. NW中如何使用Node.js

45. NW中如何使用Node.js

46. 在项目中使用第三方组件
$ cd /path/to/your/app
$ mkdir node_modules
$ npm install jade

47. 编译C/C++原生组件
node-gyp: Node.js native addon build tool
https://github.com/TooTallNate/node-gyp
How to build:
$ npm install -g node-gyp
$ cd my_node_addon
$ node-gyp configure
$ node-gyp build
Use:
var addon = require('./build/Release/addon');
More: http://nodejs.org/api/addons.html

48. run .NET and node.js code in-process
Edge.js
https://github.com/tjanczuk/edge
An edge connects two nodes. This edge connects
node.js and .NET. V8 and CLR. Node.js, Python, and
C# - in process.
安装：
$ npm install edge

49. run .NET and node.js code in-process
sample.js:
Run:

50. run .NET and node.js code in-process
//引入文件
var add7 = edge.func(__dirname + '/add7.csx');
//引入dll
var clrMethod = edge.func('My.Edge.Samples.dll');

51. node-webkit 可以做什么？

52. Apps Gallery
• Fawave Desktop

53. Apps Gallery
• Reditr - reddit client.

54. Apps Gallery
• Docular - an open-source and cross-platform
editor for markdown documents!

55. Apps Gallery
• CSS Shack - create Layers, and export them
into a single CSS file.

56. Apps Gallery
• CATS - an IDE for TypeScript developers.

57. Apps Gallery
• Koala - a gui tool for less, sass and coffeescript
compilation.

59. 调查：大家都如何使用LESS & Sass
• 命令行
lessc styles.less > styles.css
sass --watch style.scss:style.css
• GUI图形工具
WinLess、Simpless、Codekit、Scout

60. Koala介绍
koala是一个图形编译工具，支持Less、Sass、CoffeeScript。
项目主页：http://koala-app.com/

61. 功能特性
• 多语言支持：支持Less、Sass、CoffeeScript 和 Compass Framework。
• 实时编译：监听文件，当文件改变时自动执行编译，这一切都在后台运
行，无需人工操作。
• 编译选项：可以设置各个语言的编译选项。
• 代码压缩：Less & Sass支持编译后自动代码压缩.
• 错误提示：在编译时如果遇到语法的错误，koala将在右下角弹出错误信
息，方便开发者定位代码错误位置。
• 跨平台：windows、linux、mac都能完美运行。

62. 如何使用？
• 添加项目
• 编写代码
• Done

63. Screenshot - 全局设置

64. Screenshot – 文件批量设置

65. Screenshot – 编译错误提示

66. Screenshot – 编译日志

67. Github：https://github.com/oklai/koala

68. Links
Node-webkit: https://github.com/rogerwang/node-webkit
Google Group:
https://groups.google.com/forum/#!forum/node-webkit
Node.js: http://nodejs.org
Node入门: http://www.nodebeginner.org/index-zh-cn.html
Npmjs: https://npmjs.org
Koala: http://koala-app.com

69. The End & Thanks