以往寫windows桌面程式需要用MFC、C#之類的技術,那麼如果你隻會web開發技術呢?或者說你有一個網站,但是你想把你的網站打包成一個桌面應用程式,該如何做呢?
答案就是用node-webkit這個開源架構,他封裝了webkit核心和node.js,讓你可以用web技術來開發windows/linux/OSX程式等。指的一提的是目前node-webkit已經改名為NW.js,下面是在github上的此架構站點:
https://github.com/nwjs/nw.js
本文講述了如何使用該工具打包成windows桌面程式的一個簡單例子,同時給出了如何降低打包出來的程式的size的一個方式(用node-webkit打包出來的桌面程式size通常會比較大),更多的技術細節請參考上述站點。
需求
首先我們的需求很簡單,做一個windows桌面程式(exe),裡面載入百度的首頁,使用者可以就像用浏覽器一樣使用。以此類推,由于是封裝了webkit,當然你便可以使用web技術開發一個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安裝檔案了,以供分發