一、node-webkit是什么？
1、概念
基于node.js和chromium的應(yīng)用程序?qū)崟r(shí)運(yùn)行環(huán)境，可運(yùn)行通過HTML(5)、CSS(3)、Javascript來編寫的本地應(yīng)用程序。node.js和webkit的結(jié)合體，webkit提供DOM操作，node.js提供本地化操作；且將二者的context完全整合，可在HTML代碼中直接使用node.js的API。
2、獲取node-webkit
官網(wǎng)：https://github.com/rogerwang/node-webkit
支持的平臺(tái)：Windows 32bit，Linux 32/64bit，Mac 32bit(OS X 10.7+)
選擇與平臺(tái)相對(duì)應(yīng)的版本，下載并安裝即可。
二、node-webkit有些什么干貨？
官方提供的一些成品：https://github.com/rogerwang/node-webkit/wiki/List-of-apps-and-companies-using-node-webkit
三、node-webkit的基本工作原理是怎樣的？
webkit提供DOM操作，包括HTML解析、CSS渲染、Javascript解釋執(zhí)行、DOM事件處理等。而node.js則提供一些本地化的操作、服務(wù)器端的處理等。二者的上下文完全融合，實(shí)現(xiàn)一個(gè)較為完美的本地應(yīng)用環(huán)境。
四、怎樣用node-webkit進(jìn)行客戶端開發(fā)？
1、一個(gè)node-webkit項(xiàng)目的基本目錄結(jié)構(gòu)
上面這是一個(gè)簡(jiǎn)單nw應(yīng)用的目錄結(jié)構(gòu)，如果nw應(yīng)用中需要用到額外的node_module，可以在目錄結(jié)構(gòu)中增加一個(gè)node_modules的目錄，以存放APP所需的node插件。
其實(shí)，一個(gè)最最簡(jiǎn)單的nw應(yīng)用，只需要有mail.html和package.json文件即可，如下：
2、認(rèn)識(shí)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 | { "main": "main.html", /* APP的主入口，文件名任意；必選 */ "name": "nw-demo", /* APP的名稱，必須具備唯一性，且符合正常變量命名；必選 */ "description": "demo app of node-webkit", /* APP的簡(jiǎn)單描述 */ "version": "0.1.0", /* APP的版本號(hào) */ "keywords": [ "demo", "node-webkit" ], /* APP的關(guān)鍵字，搜索APP時(shí)用到 */ "window": { /* APP的窗口屬性 */ "icon": "link.png", /* APP圖標(biāo)（windows下，狀態(tài)欄上可見） */ "toolbar": true, /* 是否顯示工具欄 */ "width": 800, /* 窗口初始化大小 */ "height": 500, "frame": true /* 是否顯示外窗體，如最大化、最小化、關(guān)閉按鈕 */ }, "user-agent": "%name %ver %nwver %webkit_ver %osinfo" /* 可自定義APP的UA */} |
其中，main和name是必選字段，更多配置字段，可參考官方地址：https://github.com/rogerwang/node-webkit/wiki/Manifest-Format
3、主窗口mail.html的寫法
隨意寫，和普通的前端頁面開發(fā)方式一樣！
4、最簡(jiǎn)單的HelloWorld
a）、目錄結(jié)構(gòu)
b）、package.json文件代碼
c）、main.html文件代碼
d）、執(zhí)行命令，運(yùn)行
e）、最終效果
也許你會(huì)覺得這個(gè)界面特別熟悉，沒錯(cuò)，它就是chromium！只是在node-webkit中，我們可以通過修改package.json配置，把工具欄和外框去掉，修改后的配置為：
去掉外框后的運(yùn)行效果：
你一定會(huì)發(fā)現(xiàn)去掉toolbar和frame以后，窗口沒法被拖動(dòng)了，其實(shí)，可以通過下面這句css來實(shí)現(xiàn)窗口可拖動(dòng)：
五、如何做到開發(fā)一份代碼，生成多平臺(tái)APP？
1、nw包制作
完成上面的操作，已經(jīng)生成了一個(gè)名為hello-world.nw的文件，如果本機(jī)已經(jīng)安裝過node-webkit，雙擊該文件即可運(yùn)行。但是，針對(duì)未安裝過node-webkit的用戶，還需要將此nw的運(yùn)行環(huán)境也打包在一起，并生成通用可執(zhí)行文件，Mac上*.app，Windows上*.exe。
2、針對(duì)Mac OS X，*.app文件制作
a）、app.icns文件制作
為你的App制作特定圖標(biāo)，可準(zhǔn)備一張1024*1024的png圖片，利用icns-Tool工具生成app.icns圖標(biāo)文件。
b）、修改Info.plist文件
為你的App制作或修改特定的描述文件。
c）、打包*.app
從官網(wǎng)再次下載node-webkit的Mac版，命令行執(zhí)行：
1 2 3 4 5 | mv hello-world.nw app.nw cp app.nw node-webkit.app/Contents/Resources/cp app.icns node-webkit.app/Contents/Resources/cp Info.plist node-webkit.app/Contents/mv node-webkit.app hello-wrold.app |
至此，Mac OS X版本的可執(zhí)行程序hello-world.app制作完成。
一般情況下，都會(huì)將其壓縮后再進(jìn)行傳播。
3）、針對(duì)Windows，*.exe文件制作
windows版本的exe程序制作非常容易，從官網(wǎng)下載node-webkit.exe，cmd下執(zhí)行：
1 | copy /b node-webkit.exe+app.exe hello-world.exe |
在Linux環(huán)境下，可以使用如下命令：
1 | cat node-webkit.exe app.exe > hello-world.exe |
至此，Windows版本的hello-world.exe程序制作完成。
4）、將繁瑣重復(fù)的操作整合到一個(gè)build.sh腳本中
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | #! shapp_name="system-info" # 創(chuàng)建app.nw文件rm -rf outputcd ../ && rm -rf output && mkdir outputcp -r $app_name/* outputrm -rf output/Info.plist output/build.sh output/app.icnscd output/find . -type d -name ".svn" | xargs rm -rfzip -r ../app.nw * > /dev/null;rm -rf * && cd ../ && mv app.nw output/mv output $app_name/ && cd $app_nameecho "create nw file success!" #下載基礎(chǔ)包svn co svn://localhost/node-webkit-base output > /dev/null #創(chuàng)建mac版本appcd outputunzip mac-os-x.zip -d mac-os-x > /dev/nullrm -rf mac-os-x.zip mac-os-x/nwsnapshotif [ -f ../Info.plist ];then cp ../Info.plist mac-os-x/node-webkit.app/Contents/ficp app.nw mac-os-x/node-webkit.app/Contents/Resources/if [ -f ../app.icns ];then cp ../app.icns mac-os-x/node-webkit.app/Contents/Resources/fimv mac-os-x/node-webkit.app mac-os-x/$app_name.appecho "create mac os app success!" #創(chuàng)建windows版本appunzip win-32.zip -d win-32 > /dev/nullrm -rf win-32.zip win-32/nwsnapshotcp app.nw win-32/ && cd win-32cat nw.exe app.nw > $app_name.exerm -rf nw.exe nwsnapshot.execd ..echo "create windows app success!" #刪除app.nwrm -f app.nw |
六、使用node-webkit開發(fā)桌面客戶端的優(yōu)缺點(diǎn)？
1、優(yōu)點(diǎn)
提高UI開發(fā)效率，DOM中豐富的事件等可以涵蓋絕大多數(shù)桌面開發(fā)中的情況
HTML(5)與CSS(3)擁有豐富的展現(xiàn)效果，可以更容易地對(duì)界面進(jìn)行改版、換膚
容易實(shí)現(xiàn)跨平臺(tái):Mac OS X 、Windows、Linux
使用Web開發(fā)人員工具可以使 UI 調(diào)試變得很輕松
桌面程序UI與Web版UI可以共享代碼
2）、缺點(diǎn)
瀏覽器原生API幾乎僅僅局限在Web頁面上
若通過JavaScript引擎向Web前端暴露一些具有操作客戶端權(quán)限的API，如何保證代碼安全性
必須攜帶瀏覽器內(nèi)核運(yùn)行庫(kù)，無形增加程序體積，至少20MB以上（壓縮后）
能否滿足各種復(fù)雜怪異的需求，比如異型窗口
