这年头，你只需要懂node webkit

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

@ethanlaihttp://oklai.name

About MeISUX QQ 会员设计中心

Koala 作者Blog: http://oklai.nameGithub: https://github.com/oklai

Node-webkit 是啥 ?

现有的桌面开发技术• C++

• VC / VB / C#

• Delphi

• Java

• Python

• Qt

• Adobe AIR

Hello World

Windows Forms

QML

Java GUI

Delphi

C++

node-webkit

node-webkit 是什么？项目地址： https://github.com/rogerwang/node-webkit

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

node-webkit 是什么？

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

特点：• 使用最新技术开发应用， HTML5 、 CSS3 、

JS 、 WebGL 。• 完整支持 Node.js APIs 与其他第三方模块。• 高性能： Node 与 Webkit 运行在同一个进

程中，函数调用简单，可以互相引用。• 轻松打包和分发应用程序。• 跨平台运行，兼容 Linux ， Mac OSX 和

Windows 。

开始 node-webkit

创建 index.html:

创建 package.json:

开始 node-webkit如何运行：

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

执行命令：// 指定 app 目录$ nw path_to_app_dir

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

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

开始 node-webkit

Quick Start – package.json

Quick Start – package.jsontitle(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)......

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');

Quick Start – Native API打开新窗口：var new_win = gui.Window.get( window.open('https://github.com'));

关闭窗口：win.close();

监听关闭窗口：win.on(‘close’, function () { //TODO})

Quick Start – 无框窗口package.json

Index.html

Quick Start – 无框窗口

Quick Start – Menus( 菜单 )

Quick Start – Tray( 系统托盘 )

Quick Start — 设置 Logo 图标

Package.json ：

Inno Setup ：勾选创建桌面图标，修改 iss 文件

Mac ：修改： Contents/Resources/app.icns

Quick Start – More Native UI API

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

开文件– showItemInFolder(file_path) 在文件管理器中

显示文件

Quick Start – 打包你的应用• 第一步：打包项目文件把项目文件打包成一个 zip 文件，并把后缀重命名为 nw ，如app.zip app.nw 。注意： package.json 文件必须在根目录下。

目录结构参照：app.nw

|-- package.json`-- index.html`-- js`-- css`-- img...

Quick Start – 打包你的应用• 第二步：创建可执行文件

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

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

Quick Start – 打包你的应用• 第二步：创建可执行文件

Mac OS X:下载 node-webkit.app 文件，使用包管理方式打开，把项目目录整个到 Contents/Resources 目录下，并重命名为app.nw （如果想要更快地启动速度，可以使用 zip 打包后的 app.nw 文件）。

需要修改的文件：– Contents/Resources/app.icns app 图标– Contents/Info.plist 苹果软件包说明文件

Quick Start – 打包你的应用

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

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

Quick Start – 打包你的应用• 第三步：创建安装包Windows ： Inno Setuphttp://www.jrsoftware.org/isinfo.php

Ubuntu/Debian ： Debreatehttp://debreate.sourceforge.net

Mac ：重命名 node-webkit.app 即可。

Quick Start – 打包你的应用Inno Setup

Quick Start – 打包你的应用Debreate

The End!?

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

Node 入门： http://www.nodebeginner.org/index-zh-cn.html

Node.js API

• HTTP• HTTPS• Net• TLS/SSL• UDP/Datagram• Stream• DNS• Domain

Node.js API

• Process• Child Processes• C/C++ Addons• OS• File System• Crypto ( 加密 )• ……

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

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

NW 中如何使用 Node.js

NW 中如何使用 Node.js

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

编译 C/C++ 原生组件node-gyp: Node.js native addon build toolhttps://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

run .NET and node.js code in-process

Edge.jshttps://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

run .NET and node.js code in-process

sample.js:

Run:

run .NET and node.js code in-process

// 引入文件var add7 = edge.func(__dirname + '/add7.csx');

// 引入 dllvar clrMethod = edge.func('My.Edge.Samples.dll');

node-webkit 可以做什么？

Apps Gallery

• Fawave Desktop

Apps Gallery

• Reditr - reddit client.

Apps Gallery

• Docular - an open-source and cross-platform editor for markdown documents!

Apps Gallery

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

Apps Gallery

• CATS - an IDE for TypeScript developers.

Apps Gallery

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

调查：大家都如何使用 LESS & Sass

• 命令行lessc styles.less > styles.csssass --watch style.scss:style.css

• GUI 图形工具WinLess 、 Simpless 、 Codekit 、 Scout

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

功能特性

• 多语言支持：支持 Less 、 Sass 、 CoffeeScript 和 Compass Framework 。

• 实时编译：监听文件，当文件改变时自动执行编译，这一切都在后台运行，无需人工操作。

• 编译选项：可以设置各个语言的编译选项。

• 代码压缩： Less & Sass 支持编译后自动代码压缩 .

• 错误提示：在编译时如果遇到语法的错误， koala将在右下角弹出错误信息，方便开发者定位代码错误位置。

• 跨平台： windows 、 linux 、 mac都能完美运行。

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

Screenshot - 全局设置

Screenshot – 文件批量设置

Screenshot – 编译错误提示

Screenshot – 编译日志

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

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

The End & Thanks