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
権威ドキュメントで振り返る2024 #年忘れセキュリティ2024
hirotomotaguchi
2
740
re:Invent をおうちで楽しんでみた ~CloudWatch のオブザーバビリティ機能がスゴい!/ Enjoyed AWS re:Invent from Home and CloudWatch Observability Feature is Amazing!
yuj1osm
0
120
5分でわかるDuckDB
chanyou0311
10
3.2k
生成AIのガバナンスの全体像と現実解
fnifni
1
190
複雑性の高いオブジェクト編集に向き合う: プラガブルなReactフォーム設計
righttouch
PRO
0
110
あの日俺達が夢見たサーバレスアーキテクチャ/the-serverless-architecture-we-dreamed-of
tomoki10
0
450
フロントエンド設計にモブ設計を導入してみた / 20241212_cloudsign_TechFrontMeetup
bengo4com
0
1.9k
LINEスキマニにおけるフロントエンド開発
lycorptech_jp
PRO
0
330
OpenAIの蒸留機能(Model Distillation)を使用して運用中のLLMのコストを削減する取り組み
pharma_x_tech
4
560
組織に自動テストを書く文化を根付かせる戦略(2024冬版) / Building Automated Test Culture 2024 Winter Edition
twada
PRO
13
3.7k
re:Invent 2024 Innovation Talks(NET201)で語られた大切なこと
shotashiratori
0
310
Amazon SageMaker Unified Studio(Preview)、Lakehouse と Amazon S3 Tables
ishikawa_satoru
0
150
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
32
6.3k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
520
Rails Girls Zürich Keynote
gr2m
94
13k
Gamification - CAS2011
davidbonilla
80
5.1k
How to Ace a Technical Interview
jacobian
276
23k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
111
49k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
Imperfection Machines: The Place of Print at Facebook
scottboms
266
13k
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