用node-webkit 開發 PC 用戶端

7月 3 2013 導言

node-webkit 是一個很神奇的案頭用戶端項目,正如這個項目的名字,這個項目是由node 和 webkit 構成,簡單來說,就是你可以用HTML 5和 node 進行案頭用戶端開發,而且用戶端還是同時支援在 WIN,MAC,LINUX運行. 下面,就用一個簡單的例子來展示一下node-webkit的魅力.

建立項目 本例子基於Grunt構建

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

md %USERPROFILE%.grunt-init\node-webkit
git clone git@github.com:youxiachai/grunt-init-node-webkit.git %USERPROFILE%.grunt-init\node-webkit

linux or mac

git clone git@github.com:youxiachai/grunt-init-node-webkit.git ~/.grunt-init/node-webkit

你只需要用

grunt-init node-webit

就可以建立完畢.

12	├─app.nw└─test

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

nw app.nw 就可以運行起來了. 650) this.width=650;" style="border-right- 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="nodewebkit1" border="0" alt="nodewebkit1" src="http://www.bkjia.com/uploads/allimg/131228/1136041T4-0.jpg" width="244" height="168" />

PS: 如果你不想接觸grunt,不過我建議還是學一下grunt,你可以到https://github.com/rogerwang/node-webkit#quick-start 學習如何啟動一個node-webkit應用.

650) this.width=650;" style="border-right- 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="oscdesk1" border="0" alt="oscdesk1" src="http://www.bkjia.com/uploads/allimg/131228/1136043V0-1.jpg" width="244" height="210" />

650) this.width=650;" style="border-right- 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="oscdesk2" border="0" alt="oscdesk2" src="http://www.bkjia.com/uploads/allimg/131228/113604L46-2.jpg" width="244" height="204" />

這個就是所謂的 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即可,就會見到如所示:

650) this.width=650;" style="border-right- 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="toolbar" border="0" alt="toolbar" src="http://www.bkjia.com/uploads/allimg/131228/11360411R-3.jpg" width="244" height="18" />

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

650) this.width=650;" style="border-right- 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="console" border="0" alt="console" src="http://www.bkjia.com/uploads/allimg/131228/113604L16-4.jpg" width="244" height="183" />

開發的時候,我們修改完檔案,並不需要重新運行程式來看結果,我們,可以直接點擊左邊的重新整理按鈕即可看到我們修改的運行結果.用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:

https://github.com/youxiachai/osChinaDesktopClient

git@osc:

http://git.oschina.net/youxiachai/oschinadesktopclient

程式運行: windows使用者之間去到app.nw 目錄下運行 nw.exe 即可.

cd app.nw
nw.exe

linux 或者mac 使用者 把除 index.html,package.json,app 以外的檔案刪除,然後將node-webkit 運行環境配到環境變數中運行

nw app.nw