導言
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-webkit
就可以創建完畢.
1 2 |
├─app.nw
└─test
|
app.nw 這個目錄就是我們准備要開始寫的pc 客戶端的項目文件夾,運行node-webkit項目很簡單,只需要把node-webkit 的運行環境配置到環境變量,然后運行
nw app.nw就可以運行起來了.
PS: 如果你不想接觸grunt,不過我建議還是學一下grunt,你可以到https://github.com/rogerwang/node-webkit#quick-start 學習如何啟動一個node-webkit應用.
效果圖
這個就是所謂的 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即可,就會見到如下圖所示:
點擊那個三橫線的按鈕,一個chrome 風的調試窗口就出來了.
開發的時候,我們修改完文件,並不需要重新運行程序來看結果,我們,可以直接點擊左邊的刷新按鈕即可看到我們修改的運行結果.用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:
git@osc:
程序運行: windows用戶之間去到app.nw 目錄下運行 nw.exe 即可.
cd app.nw
nw.exe
linux 或者mac 用戶 把除 index.html,package.json,app 以外的文件刪除,然后將node-webkit 運行環境配到環境變量中運行
nw app.nw