nginx php 云计算 程序员 centos java shell Python 微软 开源 编程 wordpress mysql Windows apache Android Firefox google linux Ubuntu

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

node-webkit是一個Chromium和node.js上的結合體,通過它我們可以把建立在chrome瀏覽器和node.js上的web應用打包成桌面應用,而且還可以跨平臺的哦。很顯然比起傳統的桌面應用,在某些特定領域用HTML5+CSS3+js開發的web應用更加簡單和高效,而且還可以使用node.js的功能,所以node-webkit還是很有用處的。

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

首先新建一個index.html文件,作為我們這個demo的入口頁面,我們暫且就把這個頁面當成一個完整的web應用吧。內容隨便寫點什麽,比如:

3906849872.png

然后创建配置文件 package.json,内容如下:

965193666.png

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

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

現在我們有了兩個文件了。

3848583289.png

然后将index.htmlpackage.json这两个文件压缩到一个zip压缩包里,命名为app.zip

1443052314.png

现在app.zip这个压缩包里的内容应该是这样的:

586189206.png

然后把app.zip这个文件的扩展名改为nw,变为 app.nw

2991353672.png

然后下载一个windows版本的node-webkit,解压后得到一个文件夹:

2856560818.png

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

3554349071.png

跟在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這個可執行文件。

1191960116.png

到了這步,我們已經得到了app.exe這個文件,但如果只有app.exe這個文件還是不夠的,這個可執行文件的運行還需要幾個dll文件的支持。

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

ffmpegsumo.dll 文件是媒體支持文件,如果你的html頁面中用到了

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

最後我們得到的就是這樣一個文件夾:

3259527669.png

執行app.exe就可以運行我們的demo了。

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

嗯,所以我們還可以把app.exe跟其他的文件再打包一次,把上圖中的所有文件變成一個可執行文件,用戶只要得到這個文件,就能運行我們的應用了。

做這步我們需要一個軟件叫Enigma Virtual Box,首先下載和安裝這個軟件,然後打開它。

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

3277007985.png

最后点击右下角的Process按钮,就大功告成了。

1326722595.png

最後我們得到了一個 app_boxed.exe 的文件,只要把這個文件交給用戶,用戶就可以運行了。

node-webkit雖然方便,但有個很大的缺點是得到的可執行文件有點大,大家在可以在衡量利弊後決定使不使用。

延伸阅读

    评论