顧名思義,node-webkit就是nodejs+webkit。html
這樣作的好處顯而易見,核心奧義在於,用nodejs來進行本地化調用,用webkit來解析和執行HTML+JS。node
下載node-webkitlinux
點擊這裏:git
https://github.com/rogerwang/node-webkitgithub
找到Downloads這一小節,而後下載對應平臺的node-webkit預編譯包。(爲了介紹起來方便,本文後續內容所有針對windows平臺,OSX和linux平臺上的操做相似,就不作特地說明了。)web
下載完以後解壓,能夠看到以下內容:npm
雙擊nw.exe直接運行,看到以下界面說明一切都ok,在你的機器上能夠運行:json
老規矩,先來Hello World!windows
建一個example1.html,內容以下:app
<!DOCTYPE html> <html> <head> <title>Hello World!</title> </head> <body> <h1>Hello node-webkit!</h1> We are using node.js <script>document.write(process.version)</script>. </body> </html>
在同一級目錄下再建一個package.json,內容以下:
{
"main" : "example1.htm" , /* APP的主入口,文件名任意;必選 */
"name" : "nw-demo" , /* APP的名稱,必須具有惟一性,且符合正常變量命名;必選 */
"description" : "demo app of node-webkit" , /* APP的簡單描述 */
"version" : "0.1.0" , /* APP的版本號 */
"keywords" : [ "demo" , "node-webkit" ], /* APP的關鍵字,搜索APP時用到 */
"window" : { /* APP的窗口屬性 */
"icon" : "link.png" , /* APP圖標(windows下,狀態欄上可見) */
"toolbar" : true , /* 是否顯示工具欄 */
"width" : 800, /* 窗口初始化大小 */
"height" : 500,
"frame" : true /* 是否顯示外窗體,如最大化、最小化、關閉按鈕 */
},
"user-agent" : "%name %ver %nwver %webkit_ver %osinfo" /* 可自定義APP的UA */
}
好了,用你機器上的壓縮工具,rar或者7z或者神馬神馬的,把這兩個文件壓縮成exampl1.zip,以下圖所示:
注意,用什麼工具壓縮無所謂,可是必定要壓縮成ZIP格式。
把example1.zip拷貝到與nw.exe同級的目錄下,以下圖:
而後用鼠標把example1.zip拖動到nw.exe上運行(用命令行也能夠,不過在windows下仍是直接拖比較爽一點),效果以下圖:
這樣,第一個例子就完成了,而後你本身編寫其餘代碼來運行了。
第一個例子代碼很是簡單,你能夠本身加點兒你最熟悉的JS代碼,好比這樣:
<!DOCTYPE html> <html> <head> <title>Example2</title> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> </head> <body> <h1>Example2</h1> <script> alert("This is example2!"); </script> </body> </html>
如上圖,很顯然,要想讓咱們的應用跑起來,以上這些dll和pak文件是少不了的(至於每一個文件是用來幹嗎的,請參見官方的描述文檔)。
那麼,對於咱們作的example1這個簡單的應用,怎麼讓咱們的用戶能運行它呢?固然,讓咱們的用戶本身去下載node-webkit而後解壓運行,這也算一種辦法,這樣的話咱們只要把example1.zip文件扔給他就能夠了。
不過這樣總以爲有點兒奇怪,要是能把全部相關的內容都打包成一個獨立的exe文件就行了,好比打包成example1.exe,這樣用戶拿到以後直接雙擊就能夠運行就更好。
首先,咱們要合併example1.zip和nw.exe,造成一個新文件,名爲example1.exe,這一點咱們經過windows的命令行下的copy命令能夠實現:
example1.zip改後綴爲example1.nw
copy /b nw.exe+example1.nw example1.exe
cd 路徑(好比:cd D:\node-webkit)進入目錄
//copy /b nw.exe+example1.nw example1.exe
copy /b nw.exe+(APP name).nw (生成的name).exe
注意,nw.exe必須放在+號前面。
這樣就生成了一個名爲example1.exe的文件,雙擊這個文件,看到的效果和第一個例子相同。很顯然,這個example1.exe仍是要依 賴那些dll文件才能運行,因此,這時候咱們須要一款打包工具來幫助咱們把這些example1.exe和dll文件都打包到一塊兒,它就是Enigma Virtual Box,你們能夠點擊這裏下載安裝(內含中文語言包):
http://enigmaprotector.com/assets/files/enigmavb.exe
安裝完成以後啓動,看到以下界面:
打包過程截圖(請按照圖中的配置操做):
點擊右下角的Process按鈕開始打包,最終得到了一個名爲example1_boxed.exe的文件。把這個文件拷貝到其它任意目錄中雙擊,若是能順利運行,說明打包成功!你能夠把它分發給你的用戶了!
官方的文檔上還介紹了其它幾種打包分發方式,有興趣的參見這裏:
https://github.com/rogerwang/node-webkit/wiki/How-to-package-and-distribute-your-apps
以上就是關於node-webkit用法的一些簡單示例,你能夠沿着這個方向本身去探索了。
很顯然,既然nodejs都被打包進來了,網上衆多的npm模塊都是能夠拿過來使用的,具體作法官方主頁上都有比較詳細的介紹。
參見這裏:https://github.com/rogerwang/node-webkit
官方的主頁上還展現了衆多使用node-webkit製做的應用,各位自行點擊查看便可。
關於node-webkit做者的介紹參見這裏:
http://www.csdn.net/article/2014-01-08/2818066-Node-Webkit
node-webkit在github上的地址:
https://github.com/rogerwang/node-webkit
因爲node-webkit的做者提供的文檔都是E文的,有熱心網友對文檔作了一些翻譯,參見這裏:
https://github.com/liu78778/node-webkit
其餘參考:
http://www.open-open.com/lib/view/open1383143218062.html