用node-webkit 创建 osChina PC 客户端

原创
2013/07/03 09:20
阅读数 7.4K

<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 git@github.com:youxiachai/grunt-init-node-webkit.git %USERPROFILE%\\.grunt-init\node-webkit</p> </blockquote> <p>linux or mac</p> <blockquote> <p>git clone git@github.com: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>1 2</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>&#160;</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>

展开阅读全文
打赏
2
159 收藏
分享
加载中
打赏
29 评论
159 收藏
2
分享
返回顶部
顶部