2.1node-webkit學習(1)hello world · NW.js中文文檔

## 目錄 * 1.1 環境安裝 * 1.1.1 windows下的安裝 * 1.1.2 linux環境下的安裝 * 1.2 hello world ## 1.1 環境安裝 webkit是開源項目，項目地址為[https://github.com/rogerwang/node-webkit](https://github.com/rogerwang/node-webkit)。我們可以在該項目首頁找到downloads節（[https://github.com/rogerwang/node-webkit#downloads](https://github.com/rogerwang/node-webkit#downloads)），該處提供了預編譯版本： Prebuilt binaries (v0.9.2 - Feb 20, 2014): * Linux:?[32bit](http://dl.node-webkit.org/v0.9.2/node-webkit-v0.9.2-linux-ia32.tar.gz)?/?[64bit](http://dl.node-webkit.org/v0.9.2/node-webkit-v0.9.2-linux-x64.tar.gz) * Windows:?[win32](http://dl.node-webkit.org/v0.9.2/node-webkit-v0.9.2-win-ia32.zip) * Mac:?[32bit, 10.7+](http://dl.node-webkit.org/v0.9.2/node-webkit-v0.9.2-osx-ia32.zip) ### 1.1.1 windows下的安裝下載windows版本的安裝包，解壓到磁盤。 ![](https://wizardforcel.gitbooks.io/nwjs-doc/content/tutorial/img/091118492479885.png) 雙擊nw.exe,出現如下界面： ![](https://wizardforcel.gitbooks.io/nwjs-doc/content/tutorial/img/091118599817305.jpg) ### 1.1.2 linux環境下的安裝以ubuntu為例，首先下載安裝包。 ~~~ wget http://dl.node-webkit.org/v0.8.5/node-webkit-v0.8.5-linux-ia32.tar.gz ~~~ ![](https://wizardforcel.gitbooks.io/nwjs-doc/content/tutorial/img/091119153724137.jpg) 解壓： ~~~ tar -xzf node-webkit-v0.8.5-linux-ia32.tar.gz ~~~ ![](https://wizardforcel.gitbooks.io/nwjs-doc/content/tutorial/img/091119282001185.jpg) ![](https://wizardforcel.gitbooks.io/nwjs-doc/content/tutorial/img/091119521681296.jpg) 運行nw，看是否正常。 ![](https://wizardforcel.gitbooks.io/nwjs-doc/content/tutorial/img/091120024347558.jpg) 我出現 ~~~ ./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 ![](https://wizardforcel.gitbooks.io/nwjs-doc/content/tutorial/img/091120194349631.jpg) 2)在nw可執行文件目錄中用ghex打開nw： ~~~ ghex nw ~~~ ![](https://wizardforcel.gitbooks.io/nwjs-doc/content/tutorial/img/091120329501537.jpg) 3)在ghex中，ctrl+f,打開搜索工具，查找libudev.so.0。 ![](https://wizardforcel.gitbooks.io/nwjs-doc/content/tutorial/img/091120482788153.jpg) 關閉搜索框，在右側字符窗口，修改0為1。 ![](https://wizardforcel.gitbooks.io/nwjs-doc/content/tutorial/img/091121081376752.png) 4)ctrl+s保存后退出ghex，現在再打開nw就會看到一個小窗口了，這就成功了。 ![](https://wizardforcel.gitbooks.io/nwjs-doc/content/tutorial/img/091121191225331.jpg) ## 1.2 hello world 對新的運行時的嘗試，往往都是從經典的hello world開始，本人也不免落俗。先新建一個helloWorld目錄，存放相關文件。 ![](https://wizardforcel.gitbooks.io/nwjs-doc/content/tutorial/img/091121331536677.png) 先創建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> ~~~ ![](https://wizardforcel.gitbooks.io/nwjs-doc/content/tutorial/img/091121447001683.png) 下一步，創建package.json文件： ~~~ { "name": "helloworld", "main": "helloworld.html" } ~~~ ![](https://wizardforcel.gitbooks.io/nwjs-doc/content/tutorial/img/091121535434648.png) 第三步，將helloworld.html和package.json打包到一個zip文件包中。 ![](https://wizardforcel.gitbooks.io/nwjs-doc/content/tutorial/img/091122027938555.jpg) 下面我們使用nw來執行壓縮包。 ~~~ ./nw ../helloword/hello.nw ~~~ ![](https://wizardforcel.gitbooks.io/nwjs-doc/content/tutorial/img/091122204344799.png) 下一篇文章，講解基本的程序結構和配置。