260 京東網上商城

node-webkit開發桌麵應用

之前有一篇博文提到過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，內容如下：

<!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 ，大家可以點擊這裏下載安裝：

https://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年的一款神器。因為它具備了以下這些無可比擬的優勢：

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

參考資料

關於node-webkit作者的介紹參見這裏：

https://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

最後更新：2017-04-03 05:40:17