node-webkit

node-webkit是什么

基于node.js和chromium的应用程序实时运行环境,可运行通过HTML(5)、CSS(3)、Javascript来编写的本地应用程序。node.js和webkit的结合体,webkit提供DOM操作,node.js提供本地化操作;且将二者的context完全整合,可在HTML代码中直接使用node.js的API。

官网:https://github.com/rogerwang/node-webkit

支持的平台:Windows 32bit,Linux 32/64bit,Mac 32bit(OS X 10.7+)

选择与平台相对应的版本,下载并安装即可。

工作原理

webkit提供DOM操作,包括HTML解析、CSS渲染、Javascript解释执行、DOM事件处理等。而node.js则提供一些本地化的操作、服务器端的处理等。二者的上下文完全融合,实现一个较为完美的本地应用环境。

例子

程序员熟悉的hello world

我是mac环境,解压node-webkit-v0.7.2-osx-ia32.zip文件,里面的node-webkit.app就是主要用到的,可以用包管理打开看里面的目录和文件。

新建一个文件夹hello

hello

–index.html

–package.json

 

index.html就是程序的入口

可以这样写

<html>
<head>
<title>
Hello World!
</title>
</head>
<body>
<h1>Hello World!
</h1>
<a href="javascript:;" onClick="alert('hello~');">click me</a>
</body>
</html>

package.json,可以说是应用程序的配置文件,内容如下

{
“name”: “hello”, //程序名
“main”: “index.html”, //入口
}

 

hello目录下的文件(注意!不是压缩hello目录)压缩成hello.zip,然后重命名为hello.nw,然后双击就可以运行了

要做成可以给用户用的可执行文件,还差一步

 

mac环境下打包成exe,我试过,打包完之后的文件没法运行,于是我在windows下打包

copy /b nw.exe+hello.nw hello.exe

生成的hello.exe正常运行

 

附上,打包nw文件并运行的sh

#! sh
app_name=”hello”

# 压缩
cd $app_name
zip -r ../$app_name.nw *
cd ..
# run
/Users/hpp/coding/nw/node-webkit.app/Contents/MacOS/node-webkit $app_name.nw

 

 

 

 

 

参考资料

这年头,你只需要懂Node webkit 

用node-webkit开发多平台的桌面客户端 

 

 

 

4 Responses

  1. nicholas说道:

    你会用这个来开发应用吗?感觉实用,但是比较华而不实

  2. nicholas说道:

    咱有个技术问题要问你,你有比较好的预加载图片资源的方案吗?preload,canvas游戏开始画面预加载资源的那种

    • 韩小麦说道:

      不知道你的意思是否是在开始画面的时候,预加载游戏里要用到的图片资源,这个可以在开始画面的时候用 new Image ,new Image().src = ‘xxx’;