通過node-webkit實現用用HTML5+JS開發跨平臺的桌面應用
一、node-webkit是什么？
二、node-webkit有些什么干貨？
三、node-webkit的基本工作原理是怎樣的？
四、怎樣用node-webkit進行客戶端開發？
五、如何做到開發一份代碼，生成多平臺APP？
六、使用node-webkit開發桌面客戶端的優缺點？
七、Q & A!
一、node-webkit是什么？
1、概念
基于node.js和chromium的應用程序實時運行環境，可運行通過HTML(5)、CSS(3)、Javascript來編寫的本地應用程序。 node.js和webkit的結合體，webkit提供DOM操作，node.js提供本地化操作；且將二者的context完全整合，可在HTML代 碼中直接使用node.js的API。
2、獲取node-webkit
官網：https://github.com/rogerwang/node-webkit
支持的平臺：Windows 32bit，Linux 32/64bit，Mac 32bit(OS X 10.7+)
選擇與平臺相對應的版本，下載并安裝即可。
二、node-webkit有些什么干貨？
官方提供的一些成品：https://github.com/rogerwang/node-webkit/wiki/List-of-apps-and-companies-using-node-webkit
三、node-webkit的基本工作原理是怎樣的？
webkit提供DOM操作，包括HTML解析、CSS渲染、Javascript解釋執行、DOM事件處理等。而node.js則提供一些本地化的操作、服務器端的處理等。二者的上下文完全融合，實現一個較為完美的本地應用環境。
四、怎樣用node-webkit進行客戶端開發？
1、一個node-webkit項目的基本目錄結構
上面這是一個簡單nw應用的目錄結構，如果nw應用中需要用到額外的node_module，可以在目錄結構中增加一個node_modules的目錄，以存放APP所需的node插件。
其實，一個最最簡單的nw應用，只需要有mail.html和package.json文件即可，如下：
2、認識package.json
“Every app package should contain a manifest file named package.json, it will tell node-webkit how to open the app and control how the browser behaves. ”
package.json格式如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
</td>
|
{ "main" : "main.html" , /* APP的主入口，文件名任意；必選 */ "name" : "nw-demo" , /* APP的名稱，必須具備唯一性，且符合正常變量命名；必選 */ "description" : "demo app of node-webkit" , /* APP的簡單描述 */ "version" : "0.1.0" , /* APP的版本號 */ "keywords" : [ "demo" , "node-webkit" ], /* APP的關鍵字，搜索APP時用到 */ "window" : { /* APP的窗口屬性 */ "icon" : "link.png" , /* APP圖標（windows下，狀態欄上可見） */ "toolbar" : true , /* 是否顯示工具欄 */ "width" : 800, /* 窗口初始化大小 */ "height" : 500, "frame" : true /* 是否顯示外窗體，如最大化、最小化、關閉按鈕 */ }, "user-agent" : "%name %ver %nwver %webkit_ver %osinfo" /* 可自定義APP的UA */ } 其中，main和name是必選字段，更多配置字段，可參考官方地址：https://github.com/rogerwang/node-webkit/wiki/Manifest-Format 3、主窗口mail.html的寫法 隨意寫，和普通的前端頁面開發方式一樣！ 4、最簡單的HelloWorld a）、目錄結構 b）、package.json文件代碼 c）、main.html文件代碼 d）、執行命令，運行 e）、最終效果 也許你會覺得這個界面特別熟悉，沒錯，它就是chromium！只是在node-webkit中，我們可以通過修改package.json配置，把工具欄和外框去掉，修改后的配置為： 去掉外框后的運行效果： 你一定會發現去掉toolbar和frame以后，窗口沒法被拖動了，其實，可以通過下面這句css來實現窗口可拖動： 五、如何做到開發一份代碼，生成多平臺APP？ 1、nw包制作 完成上面的操作，已經生成了一個名為hello-world.nw的文件，如果本機已經安裝過node-webkit，雙擊該文件即可運行。但是，針對未安裝過node-webkit的用戶，還需要將此nw的運行環境也打包在一起，并生成通用可執行文件，Mac上*.app，Windows上*.exe。 2、針對Mac OS X，*.app文件制作 a）、app.icns文件制作 為你的App制作特定圖標，可準備一張1024*1024的png圖片，利用icns-Tool工具生成app.icns圖標文件。 b）、修改Info.plist文件 為你的App制作或修改特定的描述文件。 c）、打包*.app 從官網再次下載node-webkit的Mac版，命令行執行：
|
