node-webkit是(shì)一(yī)個(gè)Chromium和(hé)n← ode.js上(shàng)的(de)結合體(tǐ)，通(tōng)過它我們可±€(kě)以把建立在chrome浏覽器(qì)和(hé)node.js∏ ✘上(shàng)的(de)web應用(yòng)打包成桌面應用(₽≠♥yòng)，而且還(hái)可(kě)以跨平台的(de)哦。很(hě®♣n)顯然比起傳統的(de)桌面應用(yòng)，在某些(xiē)特定領域用 ≥€(yòng)html5+css3+js開(kāi)發的(de)web應 §×用(yòng)更加簡單和(hé)高(gāo)效，而且還(h¶♥ái)可(kě)以使用(yòng)node.js的(de)功能(n↕∞éng)，所以node-webkit還(h↑ái)是(shì)很(hěn)有(yǒu)用(yòng)處的(de)。→∑↔↓
下(xià)面我通(tōng)過一(yī)個(gè♠±")簡單的(de)demo來(lái)介紹怎麽樣把一(yī)個(gè)β≈®∑web應用(yòng)打包成一(yī)個(g±λεè)可(kě)執行(xíng)文(wén)件(jiàn)（這(z≈β×hè)裡(lǐ)隻介紹windows環境）
首先新建一(yī)個(gè)index.htm©$l文(wén)件(jiàn)，作(zuò)為(wèi)我們這(€☆δzhè)個(gè)demo的(de)入口頁♦≤ 面，我們暫且就(jiù)把這(zhè)個(gè)頁面當成一(yī)個(g σè)完整的(de)web應用(yòng)吧(ba)。±≈內(nèi)容随便寫點什(shén)麽，比如(rú)：
然後創建配置文(wén)件(jiàn) package.json,內(nèi)♦™♦©容如(rú)下(xià)：
其中的(de)main屬性就(jiù)是(shì)用(yòng)來(lái)∏ε"€指定入口文(wén)件(jiàn)的(de)，這(zhè)個(gè)₹屬性的(de)值可(kě)以是(shì)本地(dì)文(wén≠ ↔)件(jiàn)，也(yě)可(kě)以是(s∞πhì)遠(yuǎn)程網址，這(zhè)樣就(jiù)✘™相(xiàng)當于可(kě)以把一(yī)β €γ個(gè)遠(yuǎn)程的(de)web應用(yòng)直接♠↔變為(wèi)一(yī)個(gè)桌面應用(yòng)了(le)。
除了(le)name與main這(zhèαγ)兩個(gè)屬性外(wài)，還(hái)有£®∞(yǒu)很(hěn)多(duō)其他(tā)有(yǒu)用(yòng)的('&↓de)屬性可(kě)以配置，比如(rú)指定應用(yβ∏•βòng)的(de)圖标，顯不(bù)顯示浏覽器(qì)的(de)工(gōng↕≠)具欄，指定浏覽器(qì)的(de)初始®₽₽大(dà)小(xiǎo)等等，具體(tǐ)的(de)配置參數(sh↓αù)文(wén)檔可(kě)看(kàn)這(zhè)裡(lǐ)≈×https://github.com/rogerwang/n$&¶ode-webkit/wiki/Manifest-f≈↓ormat
現(xiàn)在我們有(yǒu)了(le✔↑)兩個(gè)文(wén)件(jiàn)了(le)。
然後将index.html和(hé)pa≠ ασckage.json這(zhè)兩個(gè)文(wén↕Ωε♣)件(jiàn)壓縮到(dào)一(yī)個(gè)z×π ip壓縮包裡(lǐ)，命名為(wèi)app.✔αzip
現(xiàn)在app.zip這(zhè)個(gè)壓縮包₹↑≥₩裡(lǐ)的(de)內(nèi)容應該是(shì)這(≥✘δ≥zhè)樣的(de)：
然後把app.zip這(zhè)個(gè)文(w∞♠"÷én)件(jiàn)的(de)擴展名改為(wèi)nw,變∞ 為(wèi) app.nw
然後下(xià)載一(yī)個(gè)windows版本的(de)no±✘ de-webkit,解壓後得(de)到(dào)$一(yī)個(gè)文(wén)件(jiàn)∞$> 夾：
之後我們之前得(de)到(dào)的(de)app.nw這(zhè)個(gèλ<)文(wén)件(jiàn)就(jiù)可(kě)以用♠↑(yòng)nw.exe來(lái)執行(xín₽©g)了(le)，直接把app.nw拖到(dào)nw. ←§exe上(shàng)就(jiù)可(kě≈ )以了(le)。運行(xíng)結果如(♣≤rú)下(xià)：
跟在chrome中打開(kāi)index¶× .html這(zhè)個(gè)頁面的(de)效果差不(b€☆₽ù)多(duō)，當然你(nǐ)可(kě)以通(tōng)過配置pacπ♣kage.json這(zhè)個(gè)文(wén)件(jiàn<♠)，來(lái)隐藏浏覽器(qì)的(de)工(gōng)具欄或邊框，來λ×(lái)使它更像是(shì)一(yī)個(gè)桌面★§"™軟件(jiàn)。
因為(wèi)nw文(wén)件(jiàn)的(de)運行(xíng)φ需要(yào)node-webkit環境的(de)支持，所以我們還(hái™ε)需要(yào)把app.nw這(zhè)個(gè)文(wén)件(jià±'≠εn)跟node-webkit的(de)環境文(wén)件(jiàn)一(>✘ yī)起打包成一(yī)個(gè)可(kě)執行(xíng)文(wén)件(j™iàn)。
首先打開(kāi)windows的(de)cmd,然後輸入如(r×∞ú)下(xià)命令：
copy /b nw.exe+app↓β↑.nw app.exe
注意文(wén)件(jiàn)路(lù)徑要(yào)根據©≈✔你(nǐ)的(de)實際情況進行(xíng)變動，★λ這(zhè)裡(lǐ)假設app.nw放(fàng)在了(le)no∏Ω'Ωde-webkit的(de)主文(wén± )件(jiàn)夾裡(lǐ)，然後輸出的(de)app.exe也(y≥↔ ♣ě)會(huì)在這(zhè)個(gè)文(wén)件(jiàn)λ≈夾裡(lǐ)。
執行(xíng)命令後我們得(de)到(dào)了(le§§€δ) app.exe 這(zhè)個(gè)可(kě)執行(xíng)文(wén£β♥)件(jiàn)。
到(dào)了(le)這(zhè)步，我們已經得(de)到(dào)了(l∏∏÷e)app.exe這(zhè)個(gè)文(wé$ ≈n)件(jiàn)，但(dàn)如(rú)果隻有(yǒu)app.exe這(♣Ω✔≥zhè)個(gè)文(wén)件(jiàn)還(₽hái)是(shì)不(bù)夠的(de)，這(zhè)個(gè)可(kě) ±執行(xíng)文(wén)件(jiàn)的(de)運行(xíng)©"σ'還(hái)需要(yào)幾個(gè)dll文(wén)件α&λ∑(jiàn)的(de)支持。
其中 nw.pak 與 icudt.dll∏'∑ 這(zhè)個(gè)兩個(gè)文(wén)件₹₹(jiàn)是(shì)必須要(yào)的(de)。
ffmpegsumo.dll 文(wén)§↔↔π件(jiàn)是(shì)媒體(tǐ)支持文(wén)件(jià׶✔n)，如(rú)果你(nǐ)的(de)html頁面中用(yòng)到£≈(dào)了(le)<video>§";或<audio>或其它與媒體(tǐ)相(xiàng)關的(de¶)東(dōng)西(xī)，則必須帶上(shβ€àng)這(zhè)個(gè)文(wén)件(jià♠•n)。
libEGL.dll 和(hé) libGLESv2.♥♣dll 這(zhè)個(gè)兩個(gè)文(wén)件(jiàn)則是(s©✘₩ hì)使用(yòng)webGL或GPU必須 <要(yào)的(de)
最後我們得(de)到(dào)的(de)就 ©(jiù)是(shì)這(zhè)樣一(yī)個(gσλαè)文(wén)件(jiàn)夾：
執行(xíng)app.exe就(jiù)可(kě)以≠≥≈運行(xíng)我們的(de)demo了(le)。
但(dàn)我們大(dà)多(duō)數(shù)人(₩≥ •rén)想的(de)是(shì)給用(yò≥✔ng)戶一(yī)個(gè)exe文(wén)☆→件(jiàn)，用(yòng)戶就(jiù)可(kα©&★ě)以使用(yòng)了(le)，不(bù)用(yòn ★g)再附帶一(yī)些(xiē)其他(tā)文(wén)₽™件(jiàn)。
嗯，所以我們還(hái)可(kě)以把app.exe跟其他(tā↔↓)的(de)文(wén)件(jiàn)再打包一(yī)次，把≥Ω上(shàng)圖中的(de)所有(yǒu¶★)文(wén)件(jiàn)變成一(yī)個(gè)可(kě)執行(xíngδ©©)文(wén)件(jiàn)，用(yòng)戶隻要(yào)得(d&∞π✘e)到(dào)這(zhè)個(gè)文(wén)件(jià∞ n)，就(jiù)能(néng)運行(xíng)我們☆γ₽ 的(de)應用(yòng)了(le)。
做(zuò)這(zhè)步我們需要(yào)一(yī)個(gè)軟件↑α(jiàn)叫Enigma Virtual Box，首先下(xià)載和(hé)安裝這(zhè)個(gè)軟件(&±∑≠jiàn)，然後打開(kāi)它。
然後在Enter Input File Name那(n∞®©à)裡(lǐ)輸入我們的(de)app.exe的(de)路(lù)徑，§ ♦在Enter Output File Nam≥€e那(nà)裡(lǐ)填寫我們要(yào)把≈β<打包出來(lái)的(de)可(kě)執行÷♥∞(xíng)文(wén)件(jiàn)輸出到(dào)哪φ↔裡(lǐ)。最後是(shì)把除app.exe外(wài↑π)的(de)其它文(wén)件(jiàn)拖入到(dào)F≠ $iles那(nà)裡(lǐ)，遇到(dào)£®±β提示的(de)話(huà)默認就(jiù)可(k←♠ě)以了(le)。
最後點擊右下(xià)角的(de)Process按鈕，就(jiù)大±♦✘(dà)功告成了(le)。
最後我們得(de)到(dào)了(le)一(yī)個(gè) app_b→≈÷δoxed.exe 的(de)文(wén)件(jiàn)，隻要(yào)把這×<♠(zhè)個(gè)文(wén)件(jiàn)交給用(yòng) ∏戶，用(yòng)戶就(jiù)可(kě)以運行β<£(xíng)了(le)。
node-webkit雖然方便，但(dàn)有(yǒu)個(gè)很(h✘ ♠₩ěn)大(dà)的(de)缺點是(shì)≤≈&得(de)到(dào)的(de)可(kě)執行÷¶✔(xíng)文(wén)件(jiàn)有(yǒu)點大(dà)，φγ<∏大(dà)家(jiā)在可(kě)以在衡量利弊後決定使 $不(bù)使用(yòng)。
