Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

这年头,你只需要懂Node webkit

5,687 views

Published on

Published in: Technology
  • Be the first to comment

这年头,你只需要懂Node webkit

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

×