
前言:
受益于Node的問世,Javascript終于能夠掙脫瀏覽器這個(gè)條條框框的盒子。于是,Javascript能夠開發(fā)服務(wù)器應(yīng)用了。既然Javascript能夠運(yùn)行在操作系統(tǒng)中,那是否也能使用Javascript像C/C++開發(fā)那些個(gè)桌面應(yīng)用呢。
在Google一番之后,果然已經(jīng)有高人實(shí)現(xiàn)了這個(gè)想法了。
Node-WebKit,把瀏覽器的布局引擎WebKit和Node.js結(jié)合了在一起。WebKit負(fù)責(zé)處理HTML5 UI相關(guān)的部分,而Node.js負(fù)責(zé)本地的API接口,比如文件系統(tǒng),網(wǎng)絡(luò),設(shè)備等等。
一個(gè)需要特別提醒的,Node-WebKit的開發(fā)維護(hù)者正是國內(nèi)的王文睿大大,中國人啊,很自豪有木有!!但是項(xiàng)目文檔好想沒有中文版的,只是英文版的,這也許是要和國際接軌的原因吧。
項(xiàng)目地址:https://github.com/rogerwang/node-webkit
話不多說,我們擼起袖子,開始嘗試一下使用前端技術(shù)開發(fā)桌面應(yīng)用的樂趣吧。
Windows桌面版《2048》
Step 1 準(zhǔn)備材料
1、node-webkit(本文使用v0.8.6-win版本):
http://dl.node-webkit.org/v0.8.6/node-webkit-v0.8.6-win-ia32.zip
2、基于jQuery實(shí)現(xiàn)的2048游戲:
http://www.w3cfuns.com/blog-5446836-5399036.html(原文地址)
https://github.com/JerryC8080/My2048(下載地址)
node-webkit的其他版本,在項(xiàng)目地址(https://github.com/rogerwang/node-webkit)可以下載得到,不同操作系統(tǒng)是不同版本的。
基于jQuery實(shí)現(xiàn)的2048游戲,是我之前做的一個(gè)小玩意,而這一次就完美移植到Windows桌面,哇嘎嘎嘎。
node-webkit下載并解壓之后,如下:

文件說明:
- nw.pak --核心Javascript庫
- incudt.dll --網(wǎng)絡(luò)庫
- ffmpegsumo.dll --媒體庫,為、或者其他媒體功能提供支持
- libEGL.dll、libGLESv2.dll、D3DCompiler_43.dll、d3dx9_43.dll --該四個(gè)dll,為WebGL、GPU、DirectX提供支持
基于jQuery實(shí)現(xiàn)的2048游戲下載并解壓之后,如下:

Step 2 編寫package.json文件
在《2048》游戲的目錄,新建一個(gè)package.json文件,輸入內(nèi)容:
{
"name": "MyDemo",
"main": "index.html",
"window": {
"toolbar": false,
"resizable": false,
"width": 660,
"height": 800
}
}

Step 3 壓縮源程序
我們使用壓縮工具,把已經(jīng)編寫好的../My2048-master目錄里面的內(nèi)容壓縮。
壓縮需要注意的兩點(diǎn):
- 壓縮格式要為zip;
- 文件后綴名要為.nw;
如圖:

壓縮完成

Step 4 預(yù)覽
把壓縮好的 My2048-master.nw 文件復(fù)制到node-webkit目錄:

運(yùn)行cmd,
移動(dòng)到node-webkit所在的目錄: cd + node-webkit所在的路徑
運(yùn)行命令:nw My2048-master.nw

便能看到預(yù)覽效果了

Step 5 生成exe執(zhí)行文件
依然在node-webkit的目錄下
運(yùn)行命令:copy /b nw.exe+My2048-master.nw My2048.exe

OK,我們可以看到node-webkit目錄下多了一個(gè)My2048.exe的執(zhí)行文件,我們雙擊它運(yùn)行看看效果:


Step 6 打包程序
如果想把這個(gè)程序發(fā)給朋友,除了.exe文件之外,還需要包括另外兩個(gè)必要的文件:
- icudt.dll(必要網(wǎng)絡(luò)庫)
- nw.pak(核心javascript庫)
這兩個(gè)是最基本的文件,如果程序還包含了其他功能,還需要包含相對應(yīng)的dll文件,各個(gè)文件功能說明文章開始已經(jīng)說明了。
所以,我們得到了最基本的發(fā)布版了:
