天天看點

用node-webkit 開發 PC 用戶端

<a href="http://blog.51cto.com/2013/07/03/nodeWebkitApp/">7月 3 2013</a>

如果,你用過grunt,要建立一個node-webkit 非常簡單,我已經寫好了一個node-webkit的<code>grunt-init</code>的項目模闆. 至于怎麼安裝這個模闆,跟官方的教程一樣. 如果你是windows 使用者

md %USERPROFILE%.grunt-init\node-webkit  git clone [email protected]:youxiachai/grunt-init-node-webkit.git %USERPROFILE%.grunt-init\node-webkit

linux or mac

git clone [email protected]:youxiachai/grunt-init-node-webkit.git ~/.grunt-init/node-webkit

你隻需要用

<code>grunt-init node-webit</code>

就可以建立完畢.

app.nw 這個目錄就是我們準備要開始寫的pc 用戶端的項目檔案夾,運作node-webkit項目很簡單,隻需要把node-webkit 的運作環境配置到環境變量,然後運作

<a href="http://youxilua.blog.51cto.com//attachment/201307/3/3357586_1372814640mXxr.jpg"></a>

<a href="http://youxilua.blog.51cto.com//attachment/201307/3/3357586_1372814641lFGA.jpg"></a>

基于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 用戶端毫無問題.

首先,打開<code>toolbar</code>,在<code>package.json</code>檔案裡面有個<code>toolbar</code>的參數,設定為<code>true</code>即可,就會見到如下圖所示:

<a href="http://youxilua.blog.51cto.com//attachment/201307/3/3357586_1372814641iEGS.jpg"></a>

點選那個三橫線的按鈕,一個chrome 風的調試視窗就出來了.

<a href="http://youxilua.blog.51cto.com//attachment/201307/3/3357586_1372814642proC.jpg"></a>

開發的時候,我們修改完檔案,并不需要重新運作程式來看結果,我們,可以直接點選左邊的重新整理按鈕即可看到我們修改的運作結果.用<code>node-webkit</code>開發用戶端是不是很友善了!

那麼接下來,要開發一個oschina pc 用戶端,我們隻需要知道,相關api 就行了,從android 用戶端源碼裡面可以得到相關api...具體代碼在<code>app/model/oschinaApi.js</code> 檔案裡面.

node-webkit,已經吧相關的安全限制已經去掉,是以說,用node-webkit開發pc用戶端,用webkit 發的請求不受同源限制. 用node-webkit 開發一些restful 應用是非常舒服的事情,隻要有個不錯的界面.關于<code>node-webkit</code>的東西也就這麼些了,剩下的就是web 開發,不在本文<code>node-webkit</code>範圍内,是以就不再啰嗦..

界面:

模闆引擎:

Github:

git@osc:

程式運作: windows使用者之間去到<code>app.nw</code> 目錄下運作 nw.exe 即可.

cd app.nw  nw.exe

linux 或者mac 使用者 把除 index.html,package.json,app 以外的檔案删除,然後将<code>node-webkit</code> 運作環境配到環境變量中運作

nw app.nw 本文轉自youxiachai 部落格,原文連結: http://blog.51cto.com/youxilua/1240516    如需轉載請自行聯系原作者

繼續閱讀