导言
node-webkit 是一个很神奇的桌面客户端项目,正如这个项目的名字,这个项目是由node 和 webkit 构成,简单来讲,就是你能够用HTML 5和 node 进行桌面客户端开发,并且客户端仍是同时支持在 WIN,MAC,LINUX运行. 下面,就用一个简单的例子来展现一下node-webkit的魅力. css
建立项目
本例子基于Grunt构建
若是,你用过grunt,要建立一个node-webkit 很是简单,我已经写好了一个node-webkit的grunt-init的项目模板. 至于怎么安装这个模板,跟官方的教程同样. 若是你是windows 用户html
md %USERPROFILE%.grunt-init\node-webkit
git clone git@github.com:youxiachai/grunt-init-node-webkit.git %USERPROFILE%.grunt-init\node-webkithtml5
linux or macnode
git clone git@github.com:youxiachai/grunt-init-node-webkit.git ~/.grunt-init/node-webkitlinux
你只须要用android
grunt-init node-webkitcss3
就能够建立完毕.c++
1 2 |
├─app.nw
└─test
|
app.nw 这个目录就是咱们准备要开始写的pc 客户端的项目文件夹,运行node-webkit项目很简单,只须要把node-webkit 的运行环境配置到环境变量,而后运行git
nw app.nw就能够运行起来了.github
PS: 若是你不想接触grunt,不过我建议仍是学一下grunt,你能够到https://github.com/rogerwang/node-webkit#quick-start 学习如何启动一个node-webkit应用.
效果图
这个就是所谓的 win 8 风格的客户端了吧....界面用的框架是这货:http://aozora.github.io/bootmetro/ 90% 的时间都是调整界面...蛋疼死了......连个 win8 风格的progress 都没..让我很是伤心..也多是alpha 的缘由吧. 不过最后的效果,仍是很难看,就凑合着过去吧....
开发
基于node-webkit 开发pc 客户端语言支持 c/c++,html5,css3, js,node api.好了,如今咱们开始用html 5 + css3 写一个pc 客户端吧. node-webkit本质就是一个能够跑node 的浏览器,因此,咱们用web 开发的技巧来开发pc 客户端毫无问题.
首先,打开toolbar,在package.json文件里面有个toolbar的参数,设置为true便可,就会见到以下图所示:
点击那个三横线的按钮,一个chrome 风的调试窗口就出来了.
开发的时候,咱们修改完文件,并不须要从新运行程序来看结果,咱们,能够直接点击左边的刷新按钮便可看到咱们修改的运行结果.用node-webkit开发客户端是否是很方便了!
那么接下来,要开发一个oschina pc 客户端,咱们只须要知道,相关api 就好了,从android 客户端源码里面能够获得相关api...具体代码在app/model/oschinaApi.js 文件里面.
node-webkit,已经吧相关的安全限制已经去掉,因此说,用node-webkit开发pc客户端,用webkit 发的请求不受同源限制. 用node-webkit 开发一些restful 应用是很是舒服的事情,只要有个不错的界面.关于node-webkit的东西也就这么些了,剩下的就是web 开发,不在本文node-webkit范围内,因此就再也不啰嗦..
使用的开源项目
界面:
http://aozora.github.io/bootmetro/
https://github.com/cubiq/iscroll
模板引擎:
https://github.com/visionmedia/ejs
项目地址
Github:
git@osc:
程序运行: windows用户之间去到app.nw 目录下运行 nw.exe 便可.
cd app.nw
nw.exe
linux 或者mac 用户 把除 index.html,package.json,app 之外的文件删除,而后将node-webkit 运行环境配到环境变量中运行
nw app.nw