node-webkit学习(1)hello world

作者：玄魂

来源：node-webkit学习(1)hello world

目录

  • 1.1 环境安装
    • 1.1.1 windows下的安装
    • 1.1.2 linux环境下的安装
  • 1.2 hello world

1.1 环境安装

webkit是开源项目，项目地址为https://github.com/rogerwang/node-webkit。

我们可以在该项目首页找到downloads节（https://github.com/rogerwang/node-webkit#downloads），该处提供了预编译版本：

Prebuilt binaries (v0.9.2 - Feb 20, 2014):

1.1.1 windows下的安装

下载windows版本的安装包，解压到磁盘。

2.1. node-webkit学习(1) hello world - 图1

双击nw.exe,出现如下界面：

2.1. node-webkit学习(1) hello world - 图2

1.1.2 linux环境下的安装

以ubuntu为例，首先下载安装包。

  1. wget http://dl.node-webkit.org/v0.8.5/node-webkit-v0.8.5-linux-ia32.tar.gz

2.1. node-webkit学习(1) hello world - 图3

解压：

  1. tar -xzf node-webkit-v0.8.5-linux-ia32.tar.gz

2.1. node-webkit学习(1) hello world - 图4

2.1. node-webkit学习(1) hello world - 图5

运行nw，看是否正常。

2.1. node-webkit学习(1) hello world - 图6

我出现

  1. ./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.1. node-webkit学习(1) hello world - 图7

2)在nw可执行文件目录中用ghex打开nw：

  1. ghex nw

2.1. node-webkit学习(1) hello world - 图8

3)在ghex中，ctrl+f,打开搜索工具，查找libudev.so.0。

2.1. node-webkit学习(1) hello world - 图9

关闭搜索框，在右侧字符窗口，修改0为1。

2.1. node-webkit学习(1) hello world - 图10

4)ctrl+s保存后退出ghex，现在再打开nw就会看到一个小窗口了，这就成功了。

2.1. node-webkit学习(1) hello world - 图11

1.2 hello world

对新的运行时的尝试，往往都是从经典的hello world开始，本人也不免落俗。

先新建一个helloWorld目录，存放相关文件。

2.1. node-webkit学习(1) hello world - 图12

先创建helloWorld.html文件，内容如下（来自作者的示例）：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Hello World!</title>
  5. </head>
  6. <body>
  7. <h1>Hello World!</h1>
  8. We are using node.js <script>document.write(process.version)</script>.
  9. </body>
  10. </html>

2.1. node-webkit学习(1) hello world - 图13

下一步，创建package.json文件：

  1. {
  2.     "name": "helloworld",
  3.     "main": "helloworld.html"
  4. }

2.1. node-webkit学习(1) hello world - 图14

第三步，将helloworld.html和package.json打包到一个zip文件包中。

2.1. node-webkit学习(1) hello world - 图15

下面我们使用nw来执行压缩包。

  1. ./nw ../helloword/hello.nw

2.1. node-webkit学习(1) hello world - 图16

下一篇文章，讲解基本的程序结构和配置。