node-webkit：开发桌面+WEB混合型应用的神器
原文地址：node-webkit：開發桌面+WEB混合型應用的神器
原作者：大漠窮秋
轉載以備份~如有侵權，請聯系馬仔君進行刪除
注： 如果你的機器上安裝了NPM，那么使用Electron應該是更好的選擇。畢竟nw.js部分功能還需要使用C++進行編譯，而Electron確可以直接通過前端代碼實現 。業界普遍評價，它比nw.js的可維護性和擴展性要高很多，而且國外的論壇更活躍一些，如果有疑問還可以得到解答。
具體安裝流程，請參照這兩篇文章中的相關部分。鏈接如下：
Electron系列之安裝和hello world
npm_express安裝
安裝ionic全流程-node.js的安裝
如果你僅需要一個瀏覽器殼，對其他功能沒什么需求，更簡單的做法是使用網易的hex。具體流程參照下面的文章鏈接。
hex使用指南–參照最后一部分即可
注2：請忽略文章中關于吐槽的部分吧，作為一個程序員，實在是控制不住。
==============以下為正文================
bla…bla…
顧名思義，node-webkit就是nodejs+webkit。這樣做的好處顯而易見，核心奧義在于，用nodejs來進行本地化調用，用webkit來解析和執行HTML+JS。快速上手
下載node-webkit
點擊這里：https://github.com/rogerwang/node-webkit找到Downloads這一小節，然后下載對應平臺的node-webkit預編譯包。（為了介紹起來方便，本文后續內容全部針對windows平臺，OSX和linux平臺上的操作類似，就不做特意說明了。）馬仔君注： 下載一定要下圖中的這個版本，其他版本中沒有nw.exe，沒法測試。
下載完之后解壓，可以看到如下內容： 雙擊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 ，大家可以點擊這里下載安裝：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年的一款神器。因為它具備了以下這些無可比擬的優勢：人力成本最低：招一個會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作者的介紹參見這里：http://www.csdn.net/article/2014-01-08/2818066-Node-Webkitnode-webkit在github上的地址：https://github.com/rogerwang/node-webkit由于node-webkit的作者提供的文檔都是E文的，為了方便大中華局域網內的一眾屌絲，我的好基友@老男孩對文檔做了一些翻譯，參見這里：https://github.com/liu78778/node-webkit總結
以上是生活随笔為你收集整理的node-webkit：开发桌面+WEB混合型应用的神器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 学HTML5要英语数学吗,数学和英语不好
- 下一篇： thinkpad x200 bios 超