node-webkit開發桌面應用

Node-Webkit可以作什麼呢?(打開連接看discuss)

github 項目源:https://github.com/rogerwang

node-webkit 是一個很神奇的桌面客戶端項目,正如這個項目的名字,這個項目是由node 和 webkit 構成,簡單來講,就是你能夠用HTML 5和 node 進行桌面客戶端開發,並且客戶端仍是同時支持在 WIN,MAC,LINUX運行. 下面,就用一個簡單的例子來展現一下node-webkit的魅力.css

若是,你用過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 就能夠運行起來了. nodewebkit1github

PS: 若是你不想接觸grunt,不過我建議仍是學一下grunt,你能夠到https://github.com/rogerwang/node-webkit#quick-start 學習如何啓動一個node-webkit應用.

oscdesk1

oscdesk2

這個就是所謂的 win 8 風格的客戶端了吧....界面用的框架是這貨:http://aozora.github.io/bootmetro/ 90% 的時間都是調整界面...蛋疼死了......連個 win8 風格的progress 都沒..讓我很是傷心..也多是alpha 的緣由吧. 不過最後的效果,仍是很難看,就湊合着過去吧....

基於node-webkit 開發pc 客戶端語言支持 c/c++,html5,css3js,node api.好了,如今咱們開始用html 5 + css3 寫一個pc 客戶端吧. node-webkit本質就是一個能夠跑node 的瀏覽器,因此,咱們用web 開發的技巧來開發pc 客戶端毫無問題.

首先,打開toolbar,在package.json文件裏面有個toolbar的參數,設置爲true便可,就會見到以下圖所示:

toolbar

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

console

開發的時候,咱們修改完文件,並不須要從新運行程序來看結果,咱們,能夠直接點擊左邊的刷新按鈕便可看到咱們修改的運行結果.用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

  以前有一篇博文提到過node-webkit和有道的hex,今天就node-webkit開發作一個詳細介紹吧。 顧名思義,node-webkit就是nodejs+webkit。這樣作的好處顯而易見,核心奧義在於,用nodejs來進行本地化調用,用webkit來解析和執行HTML+JS。       

快速上手

下載node-webkit

        點擊這裏:        https://github.com/rogerwang/node-webkit

        找到Downloads這一小節,而後下載對應平臺的node-webkit預編譯包。(爲了介紹起來方便,本文後續內容所有針對windows平臺,OSX和linux平臺上的操做相似,就不作特地說明了。)

        下載完以後解壓,能夠看到以下內容:

 


        雙擊nw.exe直接運行,看到以下界面說明一切都ok,在你的機器上能夠運行:

 


Hello nw

        老規矩,先來Hello World!

        建一個example1.html,內容以下:

  
  
  
  
[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head>  
  4.     <title>Hello World!</title>  
  5.   </head>  
  6.   <body>  
  7.     <h1>Hello node-webkit!</h1>  
  8.     We are using node.js <script>document.write(process.version)</script>.  
  9.   </body>  
  10. </html>  
  11.    
  12.         在同一級目錄下再建一個package.json,內容以下:  
  13.    
  14. {  
  15.   "name": "nw-demo",  
  16.   "main": "example1.html"  
  17. }  
  18.    
 好了,用你機器上的壓縮工具,rar或者7z或者神馬神馬的,把這兩個文件壓縮成exampl1.zip,以下圖所示:



        注意,用什麼工具壓縮無所謂,可是必定要壓縮成ZIP格式。

        把example1.zip拷貝到與nw.exe同級的目錄下,以下圖:

 



        而後用鼠標把example1.zip拖動到nw.exe上運行(用命令行也能夠,不過在windows下仍是直接拖比較爽一點),效果以下圖:


        這樣,第一個例子就完成了,而後你本身能夠去玩兒了。

        按照官方的搞法,example1.zip可更名成example1.nw,這樣顯得更加高大上一些。不過因爲小僧的BIG一貫比較低,私認爲用.zip做爲後綴也沒啥不能夠。

 

來點兒JS

        第一個例子代碼很是簡單,你能夠本身加點兒你最熟悉的JS代碼,好比這樣:

  
  
  
  
[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head>  
  4.     <title>Example2</title>  
  5.     <meta http-equiv="content-type" content="text/html;charset=UTF-8" />  
  6.   </head>  
  7.   <body>  
  8.     <h1>Example2</h1>  
  9.     <script>  
  10.         alert("This is example2!");  
  11.     </script>  
  12.   </body>  
  13. </html>  

        顯然,這裏有不少HTML5的習慣寫法,那固然是必須的對吧?由於webkit在google的調教之下早已成了HTML5的開路先鋒了!

打包和分發


        如上圖,很顯然,要想讓咱們的應用跑起來,以上這些dll和pak文件是少不了的(至於每一個文件是用來幹嗎的,請參見官方的描述文檔)。

        那麼,對於咱們作的example1這個簡單的應用,怎麼讓咱們的用戶能運行它呢?固然,讓咱們的用戶本身去下載node-webkit而後解壓運行,這也算一種辦法,這樣的話咱們只要把example1.zip文件扔給他就能夠了。

        不過這樣總以爲有點兒奇怪,要是能把全部相關的內容都打包成一個獨立的exe文件就行了,好比打包成example1.exe,這樣用戶拿到以後直接雙擊就能夠運行,這樣顯然是極好的。

        OK,let's go!

        首先,咱們要合併example1.zip和nw.exe,造成一個新文件,名爲example1.exe,這一點咱們經過windows的命令行下的copy命令能夠實現:

  
  
  
  
[html] view plain copy
  1. copy /b nw.exe+example1.zip example1.exe  

        注意,nw.exe必須放在+號前面。


       這樣就生成了一個名爲example1.exe的文件,雙擊這個文件,看到的效果和第一個例子相同。很顯然,這個example1.exe仍是要依 賴那些dll文件才能運行,因此,這時候咱們須要一款打包工具來幫助咱們把這些example1.exe和dll文件都打包到一塊兒,它就是Enigma Virtual Box ,你們能夠點擊這裏下載安裝:

 

http://enigmaprotector.com/assets/files/enigmavb.exe

        安裝完成以後啓動,看到以下界面:

 


 

        打包過程截圖(請按照圖中的配置操做):

 



        點擊右下角的Process按鈕開始打包,最終得到了一個名爲example1_boxed.exe的文件。把這個文件拷貝到其它任意目錄中雙擊,若是能順利運行,說明打包成功!你能夠把它分發給你的用戶了!

        官方的文檔上還介紹了其它幾種打包分發方式,不過看起來都不是很實用,有興趣的參見這裏:

https://github.com/rogerwang/node-webkit/wiki/How-to-package-and-distribute-your-apps

 

 未竟的主題

        以上就是關於node-webkit用法的一些簡單示例,你能夠沿着這個方向本身去探索了。有熱心的網友把咱們的Ext4.1中文文檔打了一個包出來,能夠到腳本娃娃的羣共享(號83163037)去下載(比較大,很差放上來),入羣口令nw


如何最小化發佈?

        在官方發佈的內容裏面,icudt.dll這個文件有9724k,nw.exe有38396k,很顯然,這個體積略顯龐大了一些,若是咱們的應用自己很小,只有幾百K,而打包出來的東西有幾十M顯然是不合適的,這樣很是不方便拷貝和網絡傳播。

        很顯然,咱們還須要一款工具,可以根據須要進行最小化的打包發佈。

        不過目前我還沒找到這樣的好東東,各路大神若有知道的,求指教。


如何利用nodejs調用本地接口?

        很顯然,既然nodejs都被打包進來了,網上衆多的npm模塊都是能夠拿過來使用的,具體作法官方主頁上都有比較詳細的介紹,參見這裏https://github.com/rogerwang/node-webkit

其它案例

        官方的主頁上還展現了衆多使用node-webkit製做的應用,各位自行點擊查看便可。

展望將來 

其實這條路老早就有人在走

        網上有不少人在爭論,將來到底是原生的應用會勝出,仍是WEB APP會勝出,實際上這二者並非你死我活的關係,而是會互相融合,走向【混合型應用】這樣一種形態。

先看幾個界面:



 

 

 

 

 

        你們能夠把本身的網絡斷掉測試以上界面,QQ有時候甚至能爆出JS錯誤,哈哈。

        2011年的時候,我發過一篇文章,《將來五年,桌面應用和WEB走向融合》,當時只是由於看到諸如酷我音樂、騰訊QQ這些桌面應用的開發方式而有 所感悟,對於桌面應用會以什麼樣的形式和B/S開發模式融合在一塊兒並無確切的想法。而最近因爲打包Ext4.1中文文檔的緣故知道了node- webkit,忽然有一種恍然大悟的趕腳!

        固然,酷我音樂盒和疼訊目前是用什麼樣的技術實現的小僧不知道其中的細節(人家也不想讓外人知道對吧?)。不過,小僧相信,對於屌絲單兵做戰來講,疼訊的實現方式確定會比node-webkit更加複雜,目測我的沒法模仿。

 

跨平臺+多終端的神器

 

        毫無疑問,這貨會成爲2014年的一款神器。由於它具有了如下這些無可比擬的優點:


  1. 人力成本最低:招一個會C++的碼農要花多少錢?招一個牛逼哄哄的既會C++還對QT、MFC等了如指掌的碼 農又要花多少錢?對比一下,招一個會JS+CSS的呢?若是你是老闆,你怎麼想?再說了,市面上會C++的碼農更多,仍是會JS+CSS的碼農更多?無需 小僧多言,其中的奧妙您自個兒體會。
  2. APP的體積更小:列位必定還記得當年大明湖畔的疼訊QQ只有十幾M的體積,俗話說,歲月是把殺豬刀,在集成了疼訊的各類應用以後,現在的QQ身材早已發福走形。能夠想象,若是QQ不使用嵌入瀏覽器內核的方式,恐怕體積早就超過100M了吧!
  3. 不須要總體更新APP:若是是按照傳統的方式開發桌面應用,每次升級的時候都須要用戶從新下載整個應用,好比疼訊QQ。可是用node-webkit的這種方式,能夠很好地避免這個問題,就像網站同樣,網站內容能夠不斷更新,可是瀏覽器自己的更新不須要那麼頻繁。
  4. 跨平臺:這一點是由NodeJS來保證的。
  5. 多終端:因爲nodejs和chromium自己都是能夠在桌面平臺和移動平臺上運行的,所以用這貨來支持多終端開發,保持技術棧的一致性是很是合適的。
  6. 完善的工具鏈:因爲nodejs的興起,它下面的npm模塊數量已經有幾十萬個;而各類基於chrome內核的定製版瀏覽器就不用再介紹了。加上傳統B/S開發模式下已經具有的完整開發和設計工具,用node-webkit來開發桌面應用已經具有了完善的工具鏈。


參考資料

        關於node-webkit做者的介紹參見這裏:

        http://www.csdn.net/article/2014-01-08/2818066-Node-Webkit

        node-webkit在github上的地址:

        https://github.com/rogerwang/node-webkit

        因爲node-webkit的做者提供的文檔都是E文的,爲了方便大中華局域網內的一衆屌絲,個人好基友@老男孩對文檔作了一些翻譯,參見這裏:

        https://github.com/liu78778/node-webkit

相關文章
相關標籤/搜索