<div class="span9"> <div class="content"><header class="page-header"> <div class="icon"></div>
<div class="span9"> <div class="content"><header class="page-header"> <div class="icon"></div> <time datetime="2013-07-03T00:00:00.000Z"><a href="/2013/07/03/nodeWebkitApp/">7月 3 2013</a></time> </header> <div id="post" class="entry"> <h2 id="menuIndex0">导言</h2> <p>node-webkit 是一个很神奇的桌面客户端项目,正如这个项目的名字,这个项目是由node 和 webkit 构成,简单来说,就是你可以用HTML 5和 node 进行桌面客户端开发,而且客户端还是同时支持在 WIN,MAC,LINUX运行. 下面,就用一个简单的例子来展示一下node-webkit的魅力. <a name="more"></a></p> <h2 id="menuIndex1">创建项目</h2> <h3 id="menuIndex2">本例子基于Grunt构建</h3> <p>如果,你用过grunt,要创建一个node-webkit 非常简单,我已经写好了一个node-webkit的<code>grunt-init</code>的项目模板. 至于怎么安装这个模板,跟官方的教程一样. 如果你是windows 用户</p> <blockquote> <p>md %USERPROFILE%.grunt-init/node-webkit <br />git clone [email protected]:youxiachai/grunt-init-node-webkit.git %USERPROFILE%//.grunt-init/node-webkit</p> </blockquote> <p>linux or mac</p> <blockquote> <p>git clone [email protected]:youxiachai/grunt-init-node-webkit.git ~/.grunt-init/node-webkit</p> </blockquote> <p>你只需要用</p> <blockquote> <p><code>grunt-init node-webit</code></p> </blockquote> <p>就可以创建完毕.</p> <figure class="highlight lang-shell"> <table><tbody> <tr> <td class="gutter"> <pre>12</pre> </td>
<td class="code"> <pre>├─<span class="filename">app.nw└─test</span></pre></td></tr></tbody></table>
</figure>
<p>app.nw 这个目录就是我们准备要开始写的pc 客户端的项目文件夹,运行node-webkit项目很简单,只需要把node-webkit 的运行环境配置到环境变量,然后运行</p> <blockquote> <p><code>nw app.nw</code> 就可以运行起来了. <a href="http://static.oschina.net/uploads/img/201307/03092032_irXU.jpg"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="nodewebkit1" border="0" alt="nodewebkit1" src="http://static.oschina.net/uploads/img/201307/03092033_HJHn.jpg" width="244" height="168" /></a> </p> </blockquote> <p>PS: 如果你不想接触grunt,不过我建议还是学一下grunt,你可以到<a href="https://github.com/rogerwang/node-webkit#quick-start"></a><a href="https://github.com/rogerwang/node-webkit#quick-start">https://github.com/rogerwang/node-webkit#quick-start</a> 学习如何启动一个node-webkit应用.</p> <h2 id="menuIndex3">效果图</h2> <p><a href="http://static.oschina.net/uploads/img/201307/03092033_vgtL.jpg"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="oscdesk1" border="0" alt="oscdesk1" src="http://static.oschina.net/uploads/img/201307/03092034_2mdF.jpg" width="244" height="210" /></a> </p> <p><a href="http://static.oschina.net/uploads/img/201307/03092034_L3xC.jpg"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="oscdesk2" border="0" alt="oscdesk2" src="http://static.oschina.net/uploads/img/201307/03092035_wtzH.jpg" width="244" height="204" /></a> </p> <p>这个就是所谓的 win 8 风格的客户端了吧....界面用的框架是这货:<a href="http://aozora.github.io/bootmetro/"></a><a href="http://aozora.github.io/bootmetro/">http://aozora.github.io/bootmetro/</a> 90% 的时间都是调整界面...蛋疼死了......连个 win8 风格的progress 都没..让我非常伤心..也可能是alpha 的原因吧. 不过最后的效果,还是很难看,就凑合着过去吧....</p> <h3 id="menuIndex4">开发</h3> <p>基于node-webkit 开发pc 客户端语言支持 <code>c/c++</code>,<code>html5</code>,<code>css3</code>, <code>js</code>,<code>node api</code>.好了,现在我们开始用html 5 + css3 写一个pc 客户端吧. <code>node-webkit</code>本质就是一个可以跑node 的浏览器,所以,我们用web 开发的技巧来开发pc 客户端毫无问题.</p> <p>首先,打开<code>toolbar</code>,在<code>package.json</code>文件里面有个<code>toolbar</code>的参数,设置为<code>true</code>即可,就会见到如下图所示:</p> <blockquote> <p><a href="http://static.oschina.net/uploads/img/201307/03092035_LW0O.jpg"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="toolbar" border="0" alt="toolbar" src="http://static.oschina.net/uploads/img/201307/03092035_PcCJ.jpg" width="244" height="18" /></a> </p> </blockquote> <p>点击那个三横线的按钮,一个chrome 风的调试窗口就出来了.</p> <blockquote> <p><a href="http://static.oschina.net/uploads/img/201307/03092036_704S.jpg"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="console" border="0" alt="console" src="http://static.oschina.net/uploads/img/201307/03092036_DBgF.jpg" width="244" height="183" /></a> </p> </blockquote> <p>开发的时候,我们修改完文件,并不需要重新运行程序来看结果,我们,可以直接点击左边的刷新按钮即可看到我们修改的运行结果.用<code>node-webkit</code>开发客户端是不是很方便了!</p> <p>那么接下来,要开发一个oschina pc 客户端,我们只需要知道,相关api 就行了,从android 客户端源码里面可以得到相关api...具体代码在<code>app/model/oschinaApi.js</code> 文件里面.</p> <p>node-webkit,已经吧相关的安全限制已经去掉,所以说,用node-webkit开发pc客户端,用webkit 发的请求不受同源限制. 用node-webkit 开发一些restful 应用是非常舒服的事情,只要有个不错的界面.关于<code>node-webkit</code>的东西也就这么些了,剩下的就是web 开发,不在本文<code>node-webkit</code>范围内,所以就不再啰嗦..</p> <p> </p> <p>PS: 由于界面的问题,实在不想折腾界面…….所以只实现了3个api 一个是动弹的api, 一个是获取综合资讯的api,还有一个是资讯详情的api..如果有人能够提供一套完整的pc客户端ui交互.我倒是可以尽可能的api 实现出来….</p> <h2 id="menuIndex5">使用的开源项目</h2> <p>界面: </p> <p><a href="http://aozora.github.io/bootmetro/"></a><a href="http://aozora.github.io/bootmetro/">http://aozora.github.io/bootmetro/</a> </p> <p><a href="https://github.com/cubiq/iscroll"></a><a href="https://github.com/cubiq/iscroll">https://github.com/cubiq/iscroll</a></p> <p>模板引擎: </p> <p><a href="https://github.com/visionmedia/ejs"></a><a href="https://github.com/visionmedia/ejs">https://github.com/visionmedia/ejs</a></p> <h2 id="menuIndex6">项目地址</h2> <p>Github: </p> <blockquote> <p><a href="https://github.com/youxiachai/osChinaDesktopClient"></a><a href="https://github.com/youxiachai/osChinaDesktopClient">https://github.com/youxiachai/osChinaDesktopClient</a></p> </blockquote> <p>git@osc:</p> <blockquote> <p><a href="http://git.oschina.net/youxiachai/oschinadesktopclient"></a><a href="http://git.oschina.net/youxiachai/oschinadesktopclient">http://git.oschina.net/youxiachai/oschinadesktopclient</a></p> </blockquote> <p>程序运行: windows用户之间去到<code>app.nw</code> 目录下运行 nw.exe 即可.</p> <blockquote> <p>cd app.nw <br />nw.exe</p> </blockquote> <p>linux 或者mac 用户 把除 index.html,package.json,app 以外的文件删除,然后将<code>node-webkit</code> 运行环境配到环境变量中运行</p> <blockquote> <p>nw app.nw</p> </blockquote></div></div></div>
