node-webkit：開發(fā)桌面+WEB混合型應(yīng)用的神器

大漠窮秋 2014-01-31

bla...bla...

顧名思義，node-webkit就是nodejs+webkit。

這樣做的好處顯而易見，核心奧義在于，用nodejs來(lái)進(jìn)行本地化調(diào)用，用webkit來(lái)解析和執(zhí)行HTML+JS。

快速上手

下載node-webkit

點(diǎn)擊這里：

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

找到Downloads這一小節(jié)，然后下載對(duì)應(yīng)平臺(tái)的node-webkit預(yù)編譯包。（為了介紹起來(lái)方便，本文后續(xù)內(nèi)容全部針對(duì)windows平臺(tái)，OSX和linux平臺(tái)上的操作類似，就不做特意說(shuō)明了。）

下載完之后解壓，可以看到如下內(nèi)容：

雙擊nw.exe直接運(yùn)行，看到如下界面說(shuō)明一切都o(jì)k，在你的機(jī)器上可以運(yùn)行：

Hello nw

老規(guī)矩，先來(lái)Hello World!

建一個(gè)example1.html，內(nèi)容如下：

<!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>

在同一級(jí)目錄下再建一個(gè)package.json，內(nèi)容如下：

{  "name": "nw-demo",  "main": "example1.html"}

好了，用你機(jī)器上的壓縮工具，rar或者7z或者神馬神馬的，把這兩個(gè)文件壓縮成exampl1.zip，如下圖所示：

注意，用什么工具壓縮無(wú)所謂，但是一定要壓縮成ZIP格式。

把example1.zip拷貝到與nw.exe同級(jí)的目錄下，如下圖：

然后用鼠標(biāo)把example1.zip拖動(dòng)到nw.exe上運(yùn)行（用命令行也可以，不過(guò)在windows下還是直接拖比較爽一點(diǎn)），效果如下圖：

這樣，第一個(gè)例子就完成了，然后你自己可以去玩兒了。

按照官方的搞法，example1.zip可改名成example1.nw，這樣顯得更加高大上一些。不過(guò)由于小僧的BIG一向比較低，私認(rèn)為用.zip作為后綴也沒啥不可以。

來(lái)點(diǎn)兒JS

第一個(gè)例子代碼非常簡(jiǎn)單，你可以自己加點(diǎn)兒你最熟悉的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的習(xí)慣寫法，那當(dāng)然是必須的對(duì)吧？因?yàn)閣ebkit在google的調(diào)教之下早已成了HTML5的開路先鋒了！

打包和分發(fā)

如上圖，很顯然，要想讓我們的應(yīng)用跑起來(lái)，以上這些dll和pak文件是少不了的（至于每個(gè)文件是用來(lái)干嘛的，請(qǐng)參見官方的描述文檔）。

那么，對(duì)于我們做的example1這個(gè)簡(jiǎn)單的應(yīng)用，怎么讓我們的用戶能運(yùn)行它呢？當(dāng)然，讓我們的用戶自己去下載node-webkit然后解壓運(yùn)行，這也算一種辦法，這樣的話我們只要把example1.zip文件扔給他就可以了。

不過(guò)這樣總覺得有點(diǎn)兒奇怪，要是能把所有相關(guān)的內(nèi)容都打包成一個(gè)獨(dú)立的exe文件就好了，比如打包成example1.exe，這樣用戶拿到之后直接雙擊就可以運(yùn)行，這樣顯然是極好的。

OK,let's go!

首先，我們要合并example1.zip和nw.exe，形成一個(gè)新文件，名為example1.exe，這一點(diǎn)我們通過(guò)windows的命令行下的copy命令可以實(shí)現(xiàn)：

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

注意，nw.exe必須放在+號(hào)前面。

這樣就生成了一個(gè)名為example1.exe的文件，雙擊這個(gè)文件，看到的效果和第一個(gè)例子相同。很顯然，這個(gè)example1.exe還是要依賴那些dll文件才能運(yùn)行，所以，這時(shí)候我們需要一款打包工具來(lái)幫助我們把這些example1.exe和dll文件都打包到一起，它就是Enigma Virtual Box ，大家可以點(diǎn)擊這里下載安裝：

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

安裝完成之后啟動(dòng)，看到如下界面：

打包過(guò)程截圖（請(qǐng)按照?qǐng)D中的配置操作）：

點(diǎn)擊右下角的Process按鈕開始打包，最終獲得了一個(gè)名為example1_boxed.exe的文件。把這個(gè)文件拷貝到其它任意目錄中雙擊，如果能順利運(yùn)行，說(shuō)明打包成功！你可以把它分發(fā)給你的用戶了！

官方的文檔上還介紹了其它幾種打包分發(fā)方式，不過(guò)看起來(lái)都不是很實(shí)用，有興趣的參見這里：

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

未竟的主題

以上就是關(guān)于node-webkit用法的一些簡(jiǎn)單示例，你可以沿著這個(gè)方向自己去探索了。有熱心的網(wǎng)友把我們的Ext4.1中文文檔打了一個(gè)包出來(lái)，可以到腳本娃娃的群共享（號(hào)83163037）去下載（比較大，不好放上來(lái)），入群口令nw

如何最小化發(fā)布？

在官方發(fā)布的內(nèi)容里面，icudt.dll這個(gè)文件有9724k，nw.exe有38396k，很顯然，這個(gè)體積略顯龐大了一些，如果我們的應(yīng)用本身很小，只有幾百K，而打包出來(lái)的東西有幾十M顯然是不合適的，這樣非常不方便拷貝和網(wǎng)絡(luò)傳播。

很顯然，我們還需要一款工具，能夠根據(jù)需要進(jìn)行最小化的打包發(fā)布。

不過(guò)目前我還沒找到這樣的好東東，各路大神如有知道的，求指教。

如何利用nodejs調(diào)用本地接口？

很顯然，既然nodejs都被打包進(jìn)來(lái)了，網(wǎng)上眾多的npm模塊都是可以拿過(guò)來(lái)使用的，具體做法官方主頁(yè)上都有比較詳細(xì)的介紹，參見這里https://github.com/rogerwang/node-webkit

其它案例

官方的主頁(yè)上還展示了眾多使用node-webkit制作的應(yīng)用，各位自行點(diǎn)擊查看即可。

展望未來(lái)

其實(shí)這條路老早就有人在走

網(wǎng)上有很多人在爭(zhēng)論，未來(lái)究竟是原生的應(yīng)用會(huì)勝出，還是WEB APP會(huì)勝出，實(shí)際上這兩者并不是你死我活的關(guān)系，而是會(huì)互相融合，走向【混合型應(yīng)用】這樣一種形態(tài)。

先看幾個(gè)界面：

大家可以把自己的網(wǎng)絡(luò)斷掉測(cè)試以上界面，QQ有時(shí)候甚至能爆出JS錯(cuò)誤，哈哈。

2011年的時(shí)候，我發(fā)過(guò)一篇文章，《未來(lái)五年，桌面應(yīng)用和WEB走向融合》，當(dāng)時(shí)只是因?yàn)榭吹街T如酷我音樂(lè)、騰訊QQ這些桌面應(yīng)用的開發(fā)方式而有所感悟，對(duì)于桌面應(yīng)用會(huì)以什么樣的形式和B/S開發(fā)模式融合在一起并沒有確切的想法。而最近由于打包Ext4.1中文文檔的緣故知道了node- webkit，突然有一種恍然大悟的趕腳！

當(dāng)然，酷我音樂(lè)盒和疼訊目前是用什么樣的技術(shù)實(shí)現(xiàn)的小僧不知道其中的細(xì)節(jié)（人家也不想讓外人知道對(duì)吧？）。不過(guò)，小僧相信，對(duì)于屌絲單兵作戰(zhàn)來(lái)說(shuō)，疼訊的實(shí)現(xiàn)方式肯定會(huì)比node-webkit更加復(fù)雜，目測(cè)個(gè)人無(wú)法模仿。

跨平臺(tái)+多終端的神器

毫無(wú)疑問(wèn)，這貨會(huì)成為2014年的一款神器。因?yàn)樗邆淞艘韵逻@些無(wú)可比擬的優(yōu)勢(shì)：

人力成本最低：招一個(gè)會(huì)C++的碼農(nóng)要花多少錢？招一個(gè)牛逼哄哄的既會(huì)C++還對(duì)QT、MFC等了如指掌的碼農(nóng)又要花多少錢？對(duì)比一下，招一個(gè)會(huì)JS+CSS的呢？如果你是老板，你怎么想？再說(shuō)了，市面上會(huì)C++的碼農(nóng)更多，還是會(huì)JS+CSS的碼農(nóng)更多？無(wú)需小僧多言，其中的奧妙您自個(gè)兒體會(huì)。
APP的體積更小：列位一定還記得當(dāng)年大明湖畔的疼訊QQ只有十幾M的體積，俗話說(shuō)，歲月是把殺豬刀，在集成了疼訊的各種應(yīng)用之后，如今的QQ身材早已發(fā)福走形。可以想象，如果QQ不使用嵌入瀏覽器內(nèi)核的方式，恐怕體積早就超過(guò)100M了吧！
不需要整體更新APP：如果是按照傳統(tǒng)的方式開發(fā)桌面應(yīng)用，每次升級(jí)的時(shí)候都需要用戶重新下載整個(gè)應(yīng)用，比如疼訊QQ。但是用node-webkit的這種方式，可以很好地避免這個(gè)問(wèn)題，就像網(wǎng)站一樣，網(wǎng)站內(nèi)容可以不斷更新，但是瀏覽器本身的更新不需要那么頻繁。
跨平臺(tái)：這一點(diǎn)是由NodeJS來(lái)保證的。
多終端：由于nodejs和chromium本身都是可以在桌面平臺(tái)和移動(dòng)平臺(tái)上運(yùn)行的，因此用這貨來(lái)支持多終端開發(fā)，保持技術(shù)棧的一致性是非常合適的。
完善的工具鏈：由于nodejs的興起，它下面的npm模塊數(shù)量已經(jīng)有幾十萬(wàn)個(gè)；而各種基于chrome內(nèi)核的定制版瀏覽器就不用再介紹了。加上傳統(tǒng)B/S開發(fā)模式下已經(jīng)具備的完整開發(fā)和設(shè)計(jì)工具，用node-webkit來(lái)開發(fā)桌面應(yīng)用已經(jīng)具備了完善的工具鏈。

參考資料

關(guān)于node-webkit作者的介紹參見這里：

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

node-webkit在github上的地址：