用node-webkit把web應用打包成桌面應用

本身參加的web項目,最後發現被公司封裝成了桌面應用,因此一直好奇是怎麼加殼的,在網上找資料後終於發現了一些方法,我找到了三種方法可實現:JWebBrowser(基於IE內核,使用時會發現不少html5不支持);JXBrowser(基於chrome內核,支持html5,但收費),node-webkit(基於chrome內核,惟一缺點是打包後exe程序過大),我用的是node-webkit,如下是本身抄襲並整理的一些內容:

node-webkit是一個Chromium和node.js上的結合體，經過它咱們能夠把創建在chrome瀏覽器和node.js上的web應用打包成桌面應用，並且還能夠跨平臺的哦。很顯然比起傳統的桌面應用，在某些特定領域用html5+css3+js開發的web應用更加簡單和高效，並且還可使用node.js的功能，因此node-webkit仍是頗有用處的。

下面我經過一個簡單的demo來介紹怎麼樣把一個web應用打包成一個可執行文件（這裏只介紹windows環境）

首先新建一個index.html文件，做爲咱們這個demo的入口頁面，咱們暫且就把這個頁面當成一個完整的web應用吧。內容隨便寫點什麼(可跳轉已經發布的頁面)，好比：

 

而後建立配置文件 package.json,內容以下：

 

如今咱們有了兩個文件了。

 

而後將index.html和package.json,任務欄圖標圖片(png格式)這三個文件壓縮到一個zip壓縮包裏，命名爲app.zip

如今app.zip這個壓縮包裏的內容應該是這樣的：

而後把app.zip這個文件的擴展名改成nw,變爲 app.nw

而後下載一個windows版本的node-webkit,解壓後獲得一個文件夾：

 

以後咱們以前獲得的app.nw這個文件就能夠用nw.exe來執行了，直接把app.nw拖到nw.exe(沒啓動前)上就能夠了

由於nw文件的運行須要node-webkit環境的支持，因此咱們還須要把app.nw這個文件跟node-webkit的環境文件一塊兒打包成一個可執行文件。

首先打開windows的cmd(可shift+鼠標右鍵,選擇在此處打開命令窗口),而後輸入以下命令：

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

注意文件路徑要根據你的實際狀況進行變更，這裏假設app.nw放在了node-webkit的主文件夾裏，而後輸出的app.exe也會在這個文件夾裏。

執行命令後咱們獲得了 app.exe 這個可執行文件。

 

到了這步，咱們已經獲得了app.exe這個文件，但若是隻有app.exe這個文件仍是不夠的，這個可執行文件的運行還須要幾個dll文件的支持。

其中 nw.pak 與 icudt.dll 這個兩個文件是必需要的。

ffmpegsumo.dll 文件是媒體支持文件，若是你的html頁面中用到了<video>或<audio>或其它與媒體相關的東西，則必須帶上這個文件。

libEGL.dll 和 libGLESv2.dll 這個兩個文件則是使用webGL或GPU必需要的

 

最後咱們獲得的就是這樣一個文件夾：

 

 

執行app.exe就能夠運行咱們的demo了。

 

但咱們大多數人想的是給用戶一個exe文件，用戶就可使用了，不用再附帶一些其餘文件。

嗯，因此咱們還能夠把app.exe跟其餘的文件再打包一次，把上圖中的全部文件變成一個可執行文件，用戶只要獲得這個文件，就能運行咱們的應用了。

作這步咱們須要一個軟件叫Enigma Virtual Box，首先下載和安裝這個軟件，而後打開它。

而後在Enter Input File Name那裏輸入咱們的app.exe的路徑，在Enter Output File Name那裏填寫咱們要把打包出來的可執行文件輸出到哪裏。最後是把除app.exe外的其它文件拖入到Files那裏，遇到提示的話默認就能夠了。

 

最後點擊右下角的Process按鈕，就大功告成了。

 

 

最後咱們獲得了一個 app_boxed.exe 的文件，只要把這個文件交給用戶，用戶就能夠運行了。

node-webkit雖然方便，但有個很大的缺點是獲得的可執行文件有點大，你們在能夠在衡量利弊後決定使不使用

 

修改node-webkit的默認圖標

(注意:在用enigmavb.exe加殼前替換圖標,不然會出現」不是有效的32位系統」)

使用node-webkit開發應用程序的時候，最終生成的exe文件，使用的默認的圖標，沒法在代碼中修改。此次就說說這圖標的事，要用到兩款軟件（固然你能夠用別的，我只提供一下個人方案）：Resource Hacker 和 Axialis IconWorkshop。

製做圖標

第一步要作的是製做ico圖標，在windows系統中，能夠設置「大圖標」，‘中等圖標’和「小圖標」等不一樣尺寸，因此，一個ico文件實際上包含多個不一樣尺寸的圖標。

 

使用Axialis IconWorkshop打開你的圖片，點擊左上角的圖標，而後就能夠選擇你要生成的尺寸了：

 

我作的時候選擇了RGBA的各類尺寸圖標，而後點擊肯定，就生成ico文件了。

替換exe文件的圖標

下一步就是替換圖標，使用Resource Hacker打開exe文件：

能夠看到node-webkit的默認圖標只有一個48 x 48的。右鍵點擊1033，選擇替換資源，替換爲剛纔製做的ico文件：

 

ok，打完收工。另外發現貌似windows自己會緩存圖標，就是說替換完後，在當前文件夾切換大圖標之類的，仍是看不到效果，而且windows 7 左下角的信息也沒變：

把exe複製到別的目錄就能看到效果

----------------------------------------------------------------

抄襲路徑:http://www.javashuo.com/article/p-zrjtemmh-cr.html

https://blog.csdn.net/w20101114/article/details/47129163