文/玄魂
目錄
node-webkit學習（1）hello world
前言
1.1 環境安裝
1.1.1 windows下的安裝
1.1.2 linux環境下的安裝
1.2 hello world
幾個月前，要開發一個簡易的展示應用，要求支持離線播放（桌面應用）和在線播放（web應用）。
當時第一想到的是flex，同一套代碼（或者只需少量的更改）就可以同時運行在桌面和瀏覽器上。由於很多展現效果要全新開發，我想到了impress.js(https://github.com/bartaz/impress.js/)。如果選擇impress.js，就意味着要將html5作為桌面應用，當時想到要封裝webkit，但是本人對這方面也不是很熟悉，時間也很有限，就又沿着這個方向搜索，找到了node-webkit(https://github.com/rogerwang/node-webkit)。
node-webkit解決了我通過html和js來編寫桌面應用的難題。
至於node-webkit的定義，按照作者的說法：
“ 基於node.js和chromium的應用程序實時運行環境，可運行通過HTML(5)、CSS(3)、Javascript來編寫的本地應用程序。node.js和webkit的結合體，webkit提供DOM操作，node.js提供本地化操作；且將二者的context完全整合，可在HTML代碼中直接使用node.js的API。”
webkit是開源項目，項目地址為https://github.com/rogerwang/node-webkit。
我們可以在該項目首頁找到downloads節（https://github.com/rogerwang/node-webkit#downloads），該處提供了預編譯版本：
Prebuilt binaries (v0.9.2 - Feb 20, 2014):
· Windows: win32
· Mac: 32bit, 10.7+
下載windows版本的安裝包，解壓到磁盤。
雙擊nw.exe,出現如下界面：
1.1.2 linux環境下的安裝
以ubuntu為例，首先下載安裝包。
解壓：
tar -xzf node-webkit-v0.8.5-linux-ia32.tar.gz
運行nw，看是否正常。
我出現
./nw: error while loading shared libraries: libudev.so.0: cannot open shared object file: No such file or directory
的錯誤。可以按如下方式解決：
1)下載安裝ghex：sudo apt-get install ghex
2)在nw可執行文件目錄中用ghex打開nw：
ghex nw
3)在ghex中，ctrl+f,打開搜索工具，查找libudev.so.0。
關閉搜索框，在右側字符窗口，修改0為1。
4)ctrl+s保存后退出ghex，現在再打開nw就會看到一個小窗口了，這就成功了。
1.2 hello world
鄙視不標明出處的轉載，更多相關內容，歡迎訪問玄魂的博客
對新的運行時的嘗試，往往都是從經典的hello world開始，本人也不免落俗。
先新建一個helloWorld目錄，存放相關文件。
先創建helloWorld.html文件，內容如下（來自作者的示例）：
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using node.js <script>document.write(process.version)</script>.
</body>
</html>
下一步，創建package.json文件：
{
"name": "helloworld",
"main": "helloworld.html"
}
第三步，將helloworld.html和package.json打包到一個zip文件包中。
下面我們使用nw來執行壓縮包。
./nw ../helloword/hello.nw
1.3 關於打zip包問題
距離寫這篇文章已經過去2年多了，當時是基於官方的文檔，把我們自己的素材打到zip包中運行。發布的時候很多人也在按官方文檔的方式把zip包和exe合並到一起。
實踐證明，這並不是一種好方法，一來調試程序很不方便，二來程序啟動的時候要解壓文件導致啟動速度慢，第三程序沒法靈活的使用相對目錄。
nw在啟動的時候會自動在啟動目錄尋找package.json並加載，所以在非特殊需要情況下，沒有必要打包運行。
在程序發布的時候，可以采用安裝包的方式進行安裝，所有文件在安裝目錄里，放出快捷方式來供用戶訪問，也不需要去打包。所以我的建議是盡量避免此種方式。
原文鏈接：http://www.xuanhun521.com/Blog/2014/4/9/node-webkit%E5%AD%A6%E4%B9%A01hello-world
下一篇文章，講解基本的程序結構和配置。
更多相關內容，歡迎訪問玄魂的博客
ps：nw.js，electron交流群 313717550