導言
node-webkit 是一個很神奇的桌面客戶端項目,正如這個項目的名字,這個項目是由node 和 webkit 構成,簡單來講,就是你能夠用HTML 5和 node 進行桌面客戶端開發,並且客戶端仍是同時支持在 WIN,MAC,LINUX運行. 下面,就用一個簡單的例子來展現一下node-webkit的魅力. css
建立項目
本例子基於Grunt構建
若是,你用過grunt,要建立一個node-webkit 很是簡單,我已經寫好了一個node-webkit的grunt-init的項目模板. 至於怎麼安裝這個模板,跟官方的教程同樣. 若是你是windows 用戶html
md %USERPROFILE%.grunt-init\node-webkit
git clone git@github.com:youxiachai/grunt-init-node-webkit.git %USERPROFILE%.grunt-init\node-webkithtml5
linux or macnode
git clone git@github.com:youxiachai/grunt-init-node-webkit.git ~/.grunt-init/node-webkitlinux
你只須要用android
grunt-init node-webkitcss3
就能夠建立完畢.c++
1 2 |
├─app.nw
└─test
|
app.nw 這個目錄就是咱們準備要開始寫的pc 客戶端的項目文件夾,運行node-webkit項目很簡單,只須要把node-webkit 的運行環境配置到環境變量,而後運行git
nw app.nw就能夠運行起來了.github
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