使用node-webkit包裝瀏覽器 用node-webkit(NW.js)建立桌面程序

node-webkit簡稱nwjs:開源地址php

https://github.com/nwjs/nw.jshtml

參考博客java

http://www.javashuo.com/article/p-opzbxsyt-bw.htmlnode

 

用node-webkit(NW.js)建立桌面程序

 

以往寫windows桌面程序須要用MFC、C#之類的技術,那麼若是你只會web開發技術呢?或者說你有一個網站,可是你想把你的網站打包成一個桌面應用程序,該如何作呢?linux

答案就是用node-webkit這個開源框架,他封裝了webkit內核和node.js,讓你能夠用web技術來開發windows/linux/OSX程序等。指的一提的是目前node-webkit已經更名爲NW.js,下面是在github上的此框架站點:git

https://github.com/nwjs/nw.jsgithub

 

本文講述瞭如何使用該工具打包成windows桌面程序的一個簡單例子,同時給出瞭如何下降打包出來的程序的size的一個方式(用node-webkit打包出來的桌面程序size一般會比較大),更多的技術細節請參考上述站點。web

 

需求json


首先咱們的需求很簡單,作一個windows桌面程序(exe),裏面載入百度的首頁,用戶能夠就像用瀏覽器同樣使用。以此類推,因爲是封裝了webkit,固然你即可以使用web技術開發一個windows桌面軟件。windows

 

下載和安裝node-webkit


進入官網後(http://nwjs.io/),點擊下載,我這裏使用的是win8.1的64位計算機,即下載win64版本

 

下載出來後解壓,文件夾中即爲Node-webkit的主文件夾:

 

這裏的nw.exe即該框架原先提供的一個已經封裝了webkit等的exe,這個是你構建本身的exe的基礎,你本身建立的web程序其實都是須要這個東西來運行,由於它提供了runtime環境。

 

修改icon


這裏有一點須要提的是,默認狀況下你建立出來的你的應用程序(exe)會和nw.exe的圖標同樣,固然這個不是你所想要的。因此你能夠經過resource hacker這個工具來修改nw.exe的圖標成你所想要的,好比能夠參考:

http://keenwon.com/1311.html

 

撰寫WEB應用


到這裏咱們就能夠開始撰寫web應用了,由於本例子很簡單就是打開一個網址,因此應用的目錄大體以下:

咱們主要來看package.json這個配置文件,這個是每一個用node-webkit進行打包時候必需要的一個配置文件,內容大體以下:

複製代碼
{
  // "main": "index.html",
  "main":"http://www.baidu.com/",
  "name": "baidu",
  "window": {
    "title": "baidu",
    "icon": "assest/img/logo.png",
    "toolbar": true,
    "width": 1280,
    "height": 800,
    "min_width": 400,
    "min_height": 200
  },
  "webkit": {
    "plugin": true,
    "java": false,
    "page-cache": false
  }
}
複製代碼

因爲咱們僅僅是打開一個網頁,因此main這個參數裏面的值並非index.html,而直接寫上一個網址就好

window.icon這個參數能夠配置這個exe在windows的底部任務欄上的圖標

toolbar最好設置爲true,這樣子你的應用程序上面會有相似於瀏覽器的工具欄,若是你的程序相似於一個音樂播放器之類的東西,那麼你可能須要設置爲false

關鍵package.json的語法請參考:

https://github.com/nwjs/nw.js/wiki/Manifest-format#webkit-subfields

 

打包


下面咱們能夠開始打包了。

首先將你的全部的應用程序全選,添加壓縮文件後並更名爲app.nw(名字無所謂,可是擴展名必定要修改成nw),要確保package.json在根目錄。即你打開壓縮後的zip應該是這樣的

 

隨後,將你的app.nw拷貝到node-webkit的和nw.exe同一目錄,進入windows cmd後運行這個命令:

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

 

這個時候你發現生成了app.exe,這個時候即成功將你的web應用打包成了一位windows桌面程序,直接雙擊它便可運行:

 

是否是看起來像是一個瀏覽器?其實他真的就是一個瀏覽器,由於他封裝了webkit!

 

發佈


這個時候你但願把exe發佈出去,可是要注意的是你不能獨立的運行這個app.exe,由於它須要依賴一些dll,官網上推薦用Enigma Virtual Box這個軟件來將app.exe和依賴的dll打包成一個exe後發佈,可是這裏有個嚴重問題,那就是這個最後生成的yourapp.exe的size太大,至少70MB以上!

緣由很簡單,這個是由於app.exe自己就很大,已經有幾十mb,而他其實也是基於咱們剛解壓出來node-webkit後那個nw.exe而生成的,而那個nw.exe自己已經50+mb了,因此咱們的app.exe能小的起來嗎?

 

這裏推薦另外一個打包方式,就是用Inno Setup來打包成安裝程序,即將你的一開始的web應用源文件和node-webkit的nw.exe和一些以來dll直接壓縮成一個安裝文件,咱們並不須要上述中間那先打包成app.exe的步驟。用戶在使用你的exe後會出現setup wizard把程序安裝到Program Files目錄中,其實等於解壓縮了,將nw.exe和dll還有你的web應用釋放出來,這個時候所生成的安裝文件其實size會小不少。

 

咱們經過這個站點來下載Inno Setup工具

http://www.jrsoftware.org/isdl.php

 

下載安裝運行後點擊File->New即進入傻瓜式的建立步驟

 

下一步,填寫你的發佈應用的公司信息

 

繼續下一步直到走到Application Files,這一步是添加你的應用程序的打包文件:

 

上面的「Application main executable file」指向node-webkit的nw.exe,下面的Other application files,經過add file(s)來添加nw.pak和dll依賴文件,經過add folder來添加你的web應用文件

繼續點擊下一步,後面還能夠選擇用戶安裝的時候能夠選擇的語言:(默認是沒有中文的,中文包請在這裏下載http://www.jrsoftware.org/files/istrans/

 

下一步,能夠還能夠選擇分發的exe的icon

 

繼續後面的操做的,便可生成一個只有20多mb的setup.exe安裝文件了,以供分發

相關文章
相關標籤/搜索