Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
这年头,你只需要懂node-webkit
Search
Ethan Lai
April 27, 2013
Technology
27
17k
这年头,你只需要懂node-webkit
node-webkit入门介绍
Ethan Lai
April 27, 2013
Tweet
Share
Other Decks in Technology
See All in Technology
100 名超が参加した日経グループ横断の競技型 AWS 学習イベント「Nikkei Group AWS GameDay」の紹介/mediajaws202411
nikkei_engineer_recruiting
1
170
Making your applications cross-environment - OSCG 2024 NA
salaboy
0
190
Engineer Career Talk
lycorp_recruit_jp
0
170
SREが投資するAIOps ~ペアーズにおけるLLM for Developerへの取り組み~
takumiogawa
1
270
インフラとバックエンドとフロントエンドをくまなく調べて遅いアプリを早くした件
tubone24
1
430
rootlessコンテナのすゝめ - 研究室サーバーでもできる安全なコンテナ管理
kitsuya0828
3
380
VideoMamba: State Space Model for Efficient Video Understanding
chou500
0
190
Why App Signing Matters for Your Android Apps - Android Bangkok Conference 2024
akexorcist
0
130
組織成長を加速させるオンボーディングの取り組み
sudoakiy
2
150
The Role of Developer Relations in AI Product Success.
giftojabu1
0
120
ISUCONに強くなるかもしれない日々の過ごしかた/Findy ISUCON 2024-11-14
fujiwara3
8
870
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
3.8k
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Happy Clients
brianwarren
98
6.7k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Unsuck your backbone
ammeep
668
57k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Facilitating Awesome Meetings
lara
50
6.1k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
Embracing the Ebb and Flow
colly
84
4.5k
Transcript
这年头,你只需要懂node-webkit @ethanlai http://oklai.name
About Me Ethanlai ISUX QQ会员设计中心 Koala 作者 Blog: http://oklai.name Github:
https://github.com/oklai
node-webkit是什么? 项目地址: https://github.com/rogerwang/node-webkit node-webkit是一个基于Chromium与node.js的 应用程序运行器,允许开发者使用web技术编 写桌面应用。
现有的桌面开发技术 • C++ • VC / VB / C# •
Delphi • Java • Python • Qt • Adobe AIR
Hello World Windows Forms
QML
Java GUI
Delphi
C++
None
node-webkit
node-webkit特点: • 使用web技术开发,HTML5、CSS3、JS、 WebGL。 • 在网页中使用Node.js。 • 跨平台运行,兼容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
快速入门 – package.json
快速入门 – 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) ......
快速入门 – 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');
快速入门 – Native API 打开新窗口: var new_win = gui.Window.get( window.open('https://github.com')
); 关闭窗口: win.close(); 监听关闭窗口: win.on(‘close’, function () { //TODO })
快速入门 – 无框窗口 package.json Index.html
原生UI – 无框窗口
快速入门 – 右键菜单
快速入门 – 系统托盘
快速入门 — 设置logo图标 Package.json: Inno Setup: 勾选创建桌面图标,修改iss文件 Mac: 修改:Contents/Resources/app.icns
快速入门 – 更多Nactiv API • Clipboard(剪切板) • File dialogs(文件对话框) •
Shell – openExternal(URI) 在系统浏览器打开链接 – openItem(file_path) 使用默认文件编辑器打开 文件 – showItemInFolder(file_path) 在文件管理器中 显示文件
打包你的应用 • 第一步:打包项目文件 把项目文件打包成一个zip文件,并把后缀重命名为nw,如 app.zip app.nw。注意:package.json文件必须在根目录下。 目录结构参照: app.nw |--
package.json `-- index.html `-- js `-- css `-- img ...
打包你的应用 • 第二步:创建可执行文件 Windows: $ copy /b nw.exe+app.nw app.exe Linux:
$ cat /usr/bin/nw app.nw > app && chmod +x app
打包你的应用 • 第二步:创建可执行文件 Mac OS X: 下载node-webkit.app文件,使用包管理方式打开,把 项目目录整个到Contents/Resources目录下,并重命名 为app.nw(如果想要更快地启动速度,可以使用zip打 包后的app.nw文件)。
需要修改的文件: – Contents/Resources/app.icns app 图标 – Contents/Info.plist 苹果软件包说明文件
打包你的应用 别忘了nw.pak文件。 Windows下还需要icudt.dll。
打包你的应用 • 第三步:创建软件安装包
打包你的应用 • 第三步:创建安装包 Windows:Inno Setup http://www.jrsoftware.org/isinfo.php Ubuntu/Debian:Debreate http://debreate.sourceforge.net Mac:重命名node-webkit.app即可。
打包你的应用 Inno Setup
打包你的应用 Debreate
The End!?
None
什么是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-webkit中如何使用Node.js
node-webkit中如何使用Node.js
在项目中使用第三方组件 $ cd /path/to/your/app $ mkdir node_modules $ npm install
jade
编译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
在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
在node.js中运行.NET sample.js: Run:
在node.js中运行.NET //引入文件 var add7 = edge.func(__dirname + '/add7.csx'); //引入dll var
clrMethod = edge.func('My.Edge.Samples.dll');
node-webkit 可以做什么?
案例展示 • Fawave Desktop
案例展示 • Reditr - reddit client.
案例展示 • Docular - an open-source and cross-platform editor for
markdown documents!
案例展示 • CSS Shack - create Layers, and export them
into a single CSS file.
案例展示 • CATS - an IDE for TypeScript developers.
案例展示 Koala – 前端图形编译工具,支持Less、Sass、CoffeeScript。 项目主页:http://koala-app.com/
None
调查:大家都如何使用LESS & Sass • 命令行 lessc styles.less > styles.css sass
--watch style.scss:style.css • GUI图形工具 WinLess、Simpless、Codekit、Scout
新工具推荐 - Koala • 多语言支持:Less、Sass、CoffeeScript、Compass。 • 实时编译:当文件改变时自动执行编译,无需人工操作。 • 编译选项:可以设置编译选项。 •
代码压缩:Less & Sass支持编译后自动代码压缩. • 错误提示:右下角弹窗提示错误位置。 • 跨平台:windows、linux、mac完美运行。
如何使用? • 添加项目 • 编写代码 • Done
功能对比: 多语言支持 编译选项 错误提示 系统支持 价格 Winless LESS Windows Free
Simpless LESS Free Scout Sass Free Codekit Mac $25 Koala Free
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