Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

node-webkit入门介绍

Ethan Lai

April 27, 2013
Tweet

Other Decks in Technology

Transcript

  1. 现有的桌面开发技术 • C++ • VC / VB / C# •

    Delphi • Java • Python • Qt • Adobe AIR
  2. QML

  3. C++

  4. 开始 node-webkit 如何运行: 下载你所属系统对应的nw二进制文件; 执行命令: //指定app目录 $ nw path_to_app_dir 或者

    //把app目录压缩成zip文件并重命名为app.nw $ nw path_to_app.nw Tips:可以直接把nw文件放入项目根目录下,运行nw文件就能运行程序, 开发阶段推荐这种方式。
  5. 快速入门 – 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) ......
  6. 快速入门 – 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');
  7. 快速入门 – Native API 打开新窗口: var new_win = gui.Window.get( window.open('https://github.com')

    ); 关闭窗口: win.close(); 监听关闭窗口: win.on(‘close’, function () { //TODO })
  8. 快速入门 – 更多Nactiv API • Clipboard(剪切板) • File dialogs(文件对话框) •

    Shell – openExternal(URI) 在系统浏览器打开链接 – openItem(file_path) 使用默认文件编辑器打开 文件 – showItemInFolder(file_path) 在文件管理器中 显示文件
  9. Node.js API • HTTP • HTTPS • Net • TLS/SSL

    • UDP/Datagram • Stream • DNS • Domain
  10. Node.js API • Process • Child Processes • C/C++ Addons

    • OS • File System • Crypto (加密) • ……
  11. 编译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
  12. 在node.js中运行.NET 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
  13. 调查:大家都如何使用LESS & Sass • 命令行 lessc styles.less > styles.css sass

    --watch style.scss:style.css • GUI图形工具 WinLess、Simpless、Codekit、Scout
  14. 新工具推荐 - Koala • 多语言支持:Less、Sass、CoffeeScript、Compass。 • 实时编译:当文件改变时自动执行编译,无需人工操作。 • 编译选项:可以设置编译选项。 •

    代码压缩:Less & Sass支持编译后自动代码压缩. • 错误提示:右下角弹窗提示错误位置。 • 跨平台:windows、linux、mac完美运行。