文档章节

用node-webkit 创建 osChina PC 客户端

打杂程序猿
 打杂程序猿
发布于 2013/07/03 09:20
字数 959
阅读 7160
收藏 159

<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>

© 著作权归作者所有

打杂程序猿

打杂程序猿

粉丝 133
博文 41
码字总数 51561
作品 3
广州
程序员
私信 提问
加载中

评论(29)

红薯
红薯

引用来自“纵使有花兼明月何堪无酒亦无人”的评论

@红薯 这文章估计是升级后遗症吧。文章全部显示都是html

@翟志军
纵使有花兼明月何堪无酒亦无人
纵使有花兼明月何堪无酒亦无人
@红薯 这文章估计是升级后遗症吧。文章全部显示都是html
taodongl
taodongl

引用来自“netjune”的评论

firefox的xul推广不力啊

xul 如何调用WinApi?
arniu
arniu
您所提供的grunt-init模板下載不下來,不知是什麼原因?
红薯
红薯

引用来自“loyal”的评论

引用来自“红薯”的评论

有没有完整的界面截图啊:)

博客截图都没一个清晰的~不能设置上传支持大点?~

程序员,大家用工具优化一下图片,200k 可以做到很高清的图片:)
loyal
loyal

引用来自“红薯”的评论

有没有完整的界面截图啊:)

博客截图都没一个清晰的~不能设置上传支持大点?~
打杂程序猿
打杂程序猿 博主

引用来自“netjune”的评论

firefox的xul推广不力啊

个人感觉..xul 有点复杂了...
netjune
netjune
firefox的xul推广不力啊
Dray
Dray
看起来不错,很好玩的样子,等有空研究下
打杂程序猿
打杂程序猿 博主

引用来自“紫外线”的评论

这个去年我用过,是国人开发的,开发人在上海。我提的几个意见是中文。他们说中文的不搭理。也还有不少问题,后来就不用了。

去年。。。。不能用去年的眼光看现在。。光今年半年就更新了8次。。。。
Node-Webkit能够做什么呢?

我是一个新手(真的很新。。。),所以如果下面问到大神们不喜欢的千万别喷我!!! 这两天我看到了haXe这个项目,然后我就来了兴趣,我看了一些资料,接着我又了解到node-webkit和CEF这些软...

hangvo
2013/10/31
29.7K
10
node-webkit v0.7.2 发布

node-webkit 是一个基于 Chromium 和 Node.js 的 Web 运行环境,可让你直接在 DOM 中调用 Node.js 模块,并可使用任何现有的 Web 技术来编写本地应用。 下载地址: https://s3.amazonaws.com...

打杂程序猿
2013/08/27
2.6K
11
Oschat IM 开源即时通讯项目介绍

Oschat IM Oschat IM是一个开源的即时通信项目,包括基于websocket的服务器端和基于node-webkit的客户端。为什么我要做这个项目,一是先有的开源即时通讯项目很少,多数企业是选择Openfire+...

ForEleven
2013/08/28
30.3K
99
node-webkit v0.8.0 发布

node-webkit 是一个基于 Chromium 和 Node.js 的 Web 运行环境,可让你直接在 DOM 中调用 Node.js 模块,并可使用任何现有的 Web 技术来编写本地应用。 下载地址: https://s3.amazonaws.com...

打杂程序猿
2013/10/30
5.3K
16
开发桌面应用框架 - Atom Shell

Atom Shell 现已改名为 Electron atom-shell 是 GitHub 随 Atom 一起开源的跨操作系统(Windows,Linux,MacOS X)的利用 Web 技术(Node.js、JavaScript、HTML 5)开发桌面应用的框架。Ato...

匿名
2014/08/04
25.6K
16

没有更多内容

加载失败,请刷新页面

加载更多

PCB设计-Allegro软件入门系列-allegro环境变量和快捷键

Allegro作为一款高速PCB设计的EDA软件,有完善的约束规则设计和信号完整性电源完整性仿真等各种专业工具深受电子行业从业者喜爱。 对于该软件来说,电子从业者接触最多的就是Allegro的画板功...

demyar
22分钟前
4
0
腾讯云存储

1、进入腾讯云平台,创建 2、进入配置查看域名 3、查看KEY参数 4、将2、3中的参数录入到cms后台 然后点测试按钮查看情况

迅睿CMS-PHP开源CMS程序
24分钟前
4
0
ES 6.x 版本 待验证的CURL命令查询操作

1. 查询数据 curl -H "Content-Type: application/json" -XGET http://elastic:123456@127.0.0.1:9200/alias1/_search -d '{"query": {"match_all": {}}}' 2. 添加数据 如果有不指定ID可以自......

coord
31分钟前
3
0
如何写好论文摘要:研究人员不得不知的小秘诀

我们为何要写摘要? 它的目的为何? 简而言之,摘要的目的就是简单的讨论这篇文章让读者更容易的了解这篇文。 它能在读者与作者之间搭起一条桥梁。当您搜索信息时,您无法一下阅读整篇文章,...

论文辅导员
34分钟前
3
0
移动端、PC端(前后台)、小程序常用的UI框架

移动端、PC端(前后台)、小程序常用的UI框架 1.移动端UI库 ①.Vant UI 官方地址:https://youzan.github.io/vant/#/zh-CN/intro github地址:https://github.com/youzan/vant 优点:用来做移...

jason_kiss
34分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部