快捷導(dǎo)航

用node-webkit把web應(yīng)用打包成桌面應(yīng)用(windows環(huán)境)

更新時(shí)間：2018年02月01日 09:30:11 作者：無(wú)雙

這篇文章主要介紹了windows環(huán)境下用node-webkit把web應(yīng)用打包成桌面應(yīng)用的教程,需要的朋友可以參考下

node-webkit是一個(gè)Chromium和node.js上的結(jié)合體，通過(guò)它我們可以把建立在chrome瀏覽器和node.js上的web應(yīng)用打包成桌面應(yīng)用，而且還可以跨平臺(tái)的哦。很顯然比起傳統(tǒng)的桌面應(yīng)用，在某些特定領(lǐng)域用html5+css3+js開(kāi)發(fā)的web應(yīng)用更加簡(jiǎn)單和高效，而且還可以使用node.js的功能，所以node-webkit還是很有用處的。

下面我通過(guò)一個(gè)簡(jiǎn)單的demo來(lái)介紹怎么樣把一個(gè)web應(yīng)用打包成一個(gè)可執(zhí)行文件（這里只介紹windows環(huán)境）

首先新建一個(gè)index.html文件，作為我們這個(gè)demo的入口頁(yè)面，我們暫且就把這個(gè)頁(yè)面當(dāng)成一個(gè)完整的web應(yīng)用吧。內(nèi)容隨便寫(xiě)點(diǎn)什么，比如：

然后創(chuàng)建配置文件 package.json,內(nèi)容如下：

其中的main屬性就是用來(lái)指定入口文件的，這個(gè)屬性的值可以是本地文件，也可以是遠(yuǎn)程網(wǎng)址，這樣就相當(dāng)于可以把一個(gè)遠(yuǎn)程的web應(yīng)用直接變?yōu)橐粋€(gè)桌面應(yīng)用了。

除了name與main這兩個(gè)屬性外，還有很多其他有用的屬性可以配置，比如指定應(yīng)用的圖標(biāo)，顯不顯示瀏覽器的工具欄，指定瀏覽器的初始大小等等，具體的配置參數(shù)文檔可看這里https://github.com/rogerwang/node-webkit/wiki/Manifest-format

現(xiàn)在我們有了兩個(gè)文件了。

然后將index.html和package.json這兩個(gè)文件壓縮到一個(gè)zip壓縮包里，命名為app.zip

現(xiàn)在app.zip這個(gè)壓縮包里的內(nèi)容應(yīng)該是這樣的：

然后把a(bǔ)pp.zip這個(gè)文件的擴(kuò)展名改為nw,變?yōu)?app.nw

然后下載一個(gè)windows版本的node-webkit,解壓后得到一個(gè)文件夾：

之后我們之前得到的app.nw這個(gè)文件就可以用nw.exe來(lái)執(zhí)行了，直接把a(bǔ)pp.nw拖到nw.exe上就可以了。運(yùn)行結(jié)果如下：

跟在chrome中打開(kāi)index.html這個(gè)頁(yè)面的效果差不多，當(dāng)然你可以通過(guò)配置package.json這個(gè)文件，來(lái)隱藏瀏覽器的工具欄或邊框，來(lái)使它更像是一個(gè)桌面軟件。

因?yàn)閚w文件的運(yùn)行需要node-webkit環(huán)境的支持，所以我們還需要把a(bǔ)pp.nw這個(gè)文件跟node-webkit的環(huán)境文件一起打包成一個(gè)可執(zhí)行文件。

首先打開(kāi)windows的cmd,然后輸入如下命令：

copy /b nw.exe+app.nw app.exe

注意文件路徑要根據(jù)你的實(shí)際情況進(jìn)行變動(dòng)，這里假設(shè)app.nw放在了node-webkit的主文件夾里，然后輸出的app.exe也會(huì)在這個(gè)文件夾里。

執(zhí)行命令后我們得到了 app.exe 這個(gè)可執(zhí)行文件。

到了這步，我們已經(jīng)得到了app.exe這個(gè)文件，但如果只有app.exe這個(gè)文件還是不夠的，這個(gè)可執(zhí)行文件的運(yùn)行還需要幾個(gè)dll文件的支持。

其中 nw.pak 與 icudt.dll 這個(gè)兩個(gè)文件是必須要的。

ffmpegsumo.dll 文件是媒體支持文件，如果你的html頁(yè)面中用到了<video>或<audio>或其它與媒體相關(guān)的東西，則必須帶上這個(gè)文件。

libEGL.dll 和 libGLESv2.dll 這個(gè)兩個(gè)文件則是使用webGL或GPU必須要的

最后我們得到的就是這樣一個(gè)文件夾：

執(zhí)行app.exe就可以運(yùn)行我們的demo了。

但我們大多數(shù)人想的是給用戶一個(gè)exe文件，用戶就可以使用了，不用再附帶一些其他文件。

嗯，所以我們還可以把a(bǔ)pp.exe跟其他的文件再打包一次，把上圖中的所有文件變成一個(gè)可執(zhí)行文件，用戶只要得到這個(gè)文件，就能運(yùn)行我們的應(yīng)用了。

做這步我們需要一個(gè)軟件叫Enigma Virtual Box，首先下載和安裝這個(gè)軟件，然后打開(kāi)它。

然后在Enter Input File Name那里輸入我們的app.exe的路徑，在Enter Output File Name那里填寫(xiě)我們要把打包出來(lái)的可執(zhí)行文件輸出到哪里。最后是把除app.exe外的其它文件拖入到Files那里，遇到提示的話默認(rèn)就可以了。