用node-webkit把web應用打包成桌面應用(windows環境)

用node-webkit把web應用打包成桌面應用(windows環境)

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,內容如下:

其中的main屬性就是用來指定入口檔案的,這個屬性的值可以是本地檔案,也可以是遠端網址,這樣就相當於可以把一個遠端的web應用直接變為一個桌面應用了。

除了name與main這兩個屬性外,還有很多其他有用的屬性可以配置,比如指定應用的圖示,顯不顯示瀏覽器的工具欄,指定瀏覽器的初始大小等等,具體的配置引數文件可看這裡https://github.com/rogerwang/node-webkit/wiki/Manifest-format

現在我們有了兩個檔案了。

然後將index.html和package.json這兩個檔案壓縮到一個zip壓縮包裡,命名為app.zip

現在app.zip這個壓縮包裡的內容應該是這樣的:

然後把app.zip這個檔案的副檔名改為nw,變為 app.nw

然後下載一個windows版本的node-webkit,解壓後得到一個資料夾:

之後我們之前得到的app.nw這個檔案就可以用nw.exe來執行了,直接把app.nw拖到nw.exe上就可以了。執行結果如下:

跟在chrome中開啟index.html這個頁面的效果差不多,當然你可以通過配置package.json這個檔案,來隱藏瀏覽器的工具欄或邊框,來使它更像是一個桌面軟體。

因為nw檔案的執行需要node-webkit環境的支援,所以我們還需要把app.nw這個檔案跟node-webkit的環境檔案一起打包成一個可執行檔案。

首先開啟windows的cmd,然後輸入如下命令:

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打包成exe檔案被360誤報木馬的解決方法解決node-webkit 不支援html5播放mp4視訊的方法