1. 程式人生 > >node-webkit開發桌面應用

node-webkit開發桌面應用

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

快速上手

下載node-webkit

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

        下載完之後解壓,可以看到如下內容:

        雙擊nw.exe直接執行,看到如下介面說明一切都ok,在你的機器上可以執行:

Hello nw

        老規矩,先來Hello World!

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

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello node-webkit!</h1>
    We are using node.js <script>document.write(process.version)</script>.
  </body>
</html>
 
        在同一級目錄下再建一個package.json,內容如下:
 
{
  "name": "nw-demo",
  "main": "example1.html"
}
 

 好了,用你機器上的壓縮工具,rar或者7z或者神馬神馬的,把這兩個檔案壓縮成exampl1.zip,如下圖所示:

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

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

        然後用滑鼠把example1.zip拖動到nw.exe上執行(用命令列也可以,不過在windows下還是直接拖比較爽一點),效果如下圖:

        這樣,第一個例子就完成了,然後你自己可以去玩兒了。

        按照官方的搞法,example1.zip可改名成example1.nw,這樣顯得更加高大上一些。不過由於小僧的BIG一向比較低,私認為用.zip作為字尾也沒啥不可以。

來點兒JS

        第一個例子程式碼非常簡單,你可以自己加點兒你最熟悉的JS程式碼,比如這樣:

<!DOCTYPE html>
<html>
  <head>
    <title>Example2</title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  </head>
  <body>
    <h1>Example2</h1>
    <script>
        alert("This is example2!");
    </script>
  </body>
</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命令可以實現:

copy /b nw.exe+example1.zip example1.exe

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

       這樣就生成了一個名為example1.exe的檔案,雙擊這個檔案,看到的效果和第一個例子相同。很顯然,這個example1.exe還是要依 賴那些dll檔案才能執行,所以,這時候我們需要一款打包工具來幫助我們把這些example1.exe和dll檔案都打包到一起,它就是Enigma Virtual Box ,大家可以點選這裡下載安裝:

        安裝完成之後啟動,看到如下介面:


 

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



        點選右下角的Process按鈕開始打包,最終獲得了一個名為example1_boxed.exe的檔案。把這個檔案拷貝到其它任意目錄中雙擊,如果能順利執行,說明打包成功!你可以把它分發給你的使用者了!

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

未竟的主題

        以上就是關於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作者的介紹參見這裡:

        node-webkit在github上的地址:

        由於node-webkit的作者提供的文件都是E文的,為了方便大中華區域網內的一眾屌絲,我的好基友@老男孩對文件做了一些翻譯,參見這裡: