Your SlideShare is downloading. ×
这年头,你只需要懂Node webkit
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

这年头,你只需要懂Node webkit

4,367
views

Published on

Published in: Technology

0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,367
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
63
Comments
0
Likes
10
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • 初步讲解node-webkit是什么
  • 先介绍node-webkit是做什么的:开发桌面应该的运行器。列出主流的开发方式
    Delphi[带尔菲],python[pai seng]
  • 先介绍node-webkit是做什么的:开发桌面应该的运行器。列出主流的开发方式
  • chromium['kroʊmiəm]
  • 如何调试运行程序
  • 讲解package.json字段
  • Package.json里面的icon并不是桌面图标,创建桌面快捷方式或锁定到任务显示的是默认的node-webkit图标。
  • 打包源码为可执行文件
    注意:package.json文件必须在根目录下。
  • 到这里差不多了,但是还没有结束。
  • 推荐一本电子书 – node入门
  • Modules['mɒdʒʊlz]
  • edge [‘ai g]
  • Reddit是个社交新闻站点。RSS规格合作者、Reddit联合创始人、著名计算机黑客Aaron Swartz于2013年1月11日在纽约市自杀
  • 吹捧一番
  • 叫大家发言
  • 有人说它长得像codekit,学习,比他简约、大气
  • Transcript

    • 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++
    • 10. node-webkit
    • 11. node-webkit是什么? 项目地址: https://github.com/rogerwang/node-webkit node-webkit是一个基于Chromium与node.js的 应用程序运行器,你可以使HTML+JavaScript 编写原生应用。在node-webkit内部,不紧可 以使用浏览器本身的DOM对象,还允许你直 接调用Node.js模块。这是一种新的开发方式, 使用web技术开发原生应用。
    • 12. node-webkit是什么?
    • 13. node-webkit是什么? node.js对象与DOM对象共存
    • 14. 特点: • 使用最新技术开发应用,HTML5、CSS3、JS、 WebGL。 • 完整支持Node.js APIs 与其他第三方模块。 • 高性能:Node与Webkit运行在同一个进程 中,函数调用简单,可以互相引用。 • 轻松打包和分发应用程序。 • 跨平台运行,兼容Linux,Mac OSX和 Windows。
    • 15. 开始 node-webkit 创建 index.html: 创建 package.json:
    • 16. 开始 node-webkit 如何运行: 下载你所属系统对应的nw二进制文件; 执行命令: //指定app目录 $ nw path_to_app_dir 或者 //把app目录压缩成zip文件并重命名为app.nw $ nw path_to_app.nw Tips:可以直接把nw文件放入项目根目录下,运行nw文件就能运行程序, 开发阶段推荐这种方式。
    • 17. 开始 node-webkit
    • 18. Quick Start – package.json
    • 19. 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) ......
    • 20. 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');
    • 21. Quick Start – Native API 打开新窗口: var new_win = gui.Window.get( window.open('https://github.com') ); 关闭窗口: win.close(); 监听关闭窗口: win.on(‘close’, function () { //TODO })
    • 22. Quick Start – 无框窗口 package.json Index.html
    • 23. Quick Start – 无框窗口
    • 24. Quick Start – Menus(菜单)
    • 25. Quick Start – Tray(系统托盘)
    • 26. Quick Start — 设置Logo图标 Package.json: Inno Setup: 勾选创建桌面图标,修改iss文件 Mac: 修改:Contents/Resources/app.icns
    • 27. Quick Start – More Native UI API • Clipboard(剪切板) • File dialogs(文件对话框) • Shell – openExternal(URI) 在系统浏览器打开链接 – openItem(file_path) 使用默认文件编辑器打开 文件 – showItemInFolder(file_path) 在文件管理器中 显示文件
    • 28. Quick Start – 打包你的应用 • 第一步:打包项目文件 把项目文件打包成一个zip文件,并把后缀重命名为nw,如 app.zip  app.nw。注意:package.json文件必须在根目录下。 目录结构参照: app.nw |-- package.json `-- index.html `-- js `-- css `-- img ...
    • 29. Quick Start – 打包你的应用 • 第二步:创建可执行文件 Windows: $ copy /b nw.exe+app.nw app.exe Linux: $ cat /usr/bin/nw app.nw > app && chmod +x app
    • 30. Quick Start – 打包你的应用 • 第二步:创建可执行文件 Mac OS X: 下载node-webkit.app文件,使用包管理方式打开,把 项目目录整个到Contents/Resources目录下,并重命名 为app.nw(如果想要更快地启动速度,可以使用zip打 包后的app.nw文件)。 需要修改的文件: – Contents/Resources/app.icns app 图标 – Contents/Info.plist 苹果软件包说明文件
    • 31. Quick Start – 打包你的应用 别忘了nw.pak文件。 Windows下还需要icudt.dll。
    • 32. Quick Start – 打包你的应用 • 第三步:创建软件安装包
    • 33. Quick Start – 打包你的应用 • 第三步:创建安装包 Windows:Inno Setup http://www.jrsoftware.org/isinfo.php Ubuntu/Debian:Debreate http://debreate.sourceforge.net Mac:重命名node-webkit.app即可。
    • 34. Quick Start – 打包你的应用 Inno Setup
    • 35. Quick Start – 打包你的应用 Debreate
    • 36. The End!?
    • 37. 什么是Node.js? Node.js是一个可以快速构建网络服务及应用的平 台。该平台的构建是基于Chrome's JavaScript runtime,也就是说,实际上它是对GoogleV8引 擎(应用于Google Chrome浏览器)进行了封装。 简单的说,Node.js是服务器端的JavaScript,它允 许在后端(脱离浏览器环境)运行JavaScript代码。 Node入门:http://www.nodebeginner.org/index- zh-cn.html
    • 38. Node.js API • HTTP • HTTPS • Net • TLS/SSL • UDP/Datagram • Stream • DNS • Domain
    • 39. Node.js API • Process • Child Processes • C/C++ Addons • OS • File System • Crypto (加密) • ……
    • 40. Node.js – 第三方组件 安装:npm install <name> https://npmjs.org/
    • 41. 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
    • 42. NW中如何使用Node.js
    • 43. NW中如何使用Node.js
    • 44. 在项目中使用第三方组件 $ cd /path/to/your/app $ mkdir node_modules $ npm install jade
    • 45. 编译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
    • 46. 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
    • 47. run .NET and node.js code in-process sample.js: Run:
    • 48. run .NET and node.js code in-process //引入文件 var add7 = edge.func(__dirname + '/add7.csx'); //引入dll var clrMethod = edge.func('My.Edge.Samples.dll');
    • 49. node-webkit 可以做什么?
    • 50. Apps Gallery • Fawave Desktop
    • 51. Apps Gallery • Reditr - reddit client.
    • 52. Apps Gallery • Docular - an open-source and cross-platform editor for markdown documents!
    • 53. Apps Gallery • CSS Shack - create Layers, and export them into a single CSS file.
    • 54. Apps Gallery • CATS - an IDE for TypeScript developers.
    • 55. Apps Gallery • Koala - a gui tool for less, sass and coffeescript compilation.
    • 56. 调查:大家都如何使用LESS & Sass • 命令行 lessc styles.less > styles.css sass --watch style.scss:style.css • GUI图形工具 WinLess、Simpless、Codekit、Scout
    • 57. Koala介绍 koala是一个图形编译工具,支持Less、Sass、CoffeeScript。 项目主页:http://koala-app.com/
    • 58. 功能特性 • 多语言支持:支持Less、Sass、CoffeeScript 和 Compass Framework。 • 实时编译:监听文件,当文件改变时自动执行编译,这一切都在后台运 行,无需人工操作。 • 编译选项:可以设置各个语言的编译选项。 • 代码压缩:Less & Sass支持编译后自动代码压缩. • 错误提示:在编译时如果遇到语法的错误,koala将在右下角弹出错误信 息,方便开发者定位代码错误位置。 • 跨平台:windows、linux、mac都能完美运行。
    • 59. 如何使用? • 添加项目 • 编写代码 • Done
    • 60. Screenshot - 全局设置
    • 61. Screenshot – 文件批量设置
    • 62. Screenshot – 编译错误提示
    • 63. Screenshot – 编译日志
    • 64. Github:https://github.com/oklai/koala
    • 65. 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
    • 66. The End & Thanks