基于node.js和chromium的应用程序实时运行环境,可运行通过HTML(5)、CSS(3)、Javascript来编写的本地应用程序。 node.js和webkit的结合体,webkit提供DOM操作,node.js提供本地化操作;且将二者的context完全整合,可在HTML代 码中直接使用node.js的API。
工具/原料
node-webkit
获取node-webkit
1、 支持的平台:Windows 32bit,Linux 32/64bit,Mac 32bit(OS X 10.7+) 选择与平台相对应的版本,下载并安装即可。
用node-webkit进行客户端开发
1、一个node-webkit项目的基本目录结构
2、上面这是一个简单nw应用的目录结构,如果nw应用中需要用到额外的node_module,可以在目录结构中增加一个node_modules的目录,以存放APP所需的node插件。 其实,一个最最简单的nw应用,只需要有mail.html和package.json文件即可,如下:
3、认识package.json “Every app package should contain a manifest file namedpackage.json, it will tellnode-webkithow to open the app and control how the browser behaves.” package.json格式如下:
4、 其中,main和name是必选字段,更多配置字段,可参考官方地址:https://github.com/rogerwang/node-webkit/wiki/Manifest-Format
5、主窗口mail.html的写法 随意写,和普通的前端页面开发方式一样!
6、最简单的HelloWorlda)、目录结构
7、b)、package.json文件代码
8、c)、main.html文件代码
9、d)、执行命令,运行
10、e)、最终效果
11、 也许你会觉得这个界面特别熟悉,没错,它就是chromium!只是在node-webkit中,我们可以通过修改package.json配置,把工具栏和外框去掉,修改后的配置为:
12、去掉外框后的运行效果:
13、你一定会发现去掉toolbar和frame以后,窗口没法被拖动了,其实,可以通过下面这句css来实现窗口可拖动:
生成多平台APP
1、nw包制作
2、完成上面的操作,已经生成了一个名为hello-world.nw的文件,如果本机已经安装过node-webkit,双击该文件即可运行。但是,针对未安装过node-webkit的用户,还需要将此nw的运行环境也打包在一起,并生成通用可执行文件,Mac上*.app,Windows上*.exe。2、针对Mac OS X,*.app文件制作a)、app.icns文件制作 为你的App制作特定图标,可准备一张1024*1024的png图片,利用icns-Tool工具生成app.icns图标文件。b)、修改Info.plist文件 为你的App制作或修改特定的描述文件。c)、打包*.app 从官网再次下载node-webkit的Mac版,命令行执行:mvhello-world.nw app.nwcpapp.nw node-webkit.app/Contents/Resources/cpapp.icns node-webkit.app/Contents/Resources/cpInfo.plist node-webkit.app/Contents/mvnode-webkit.app hello-wrold.app 至此,Mac OS X版本的可执行程序hello-world.app制作完成。 一般情况下,都会将其压缩后再进行传播。3)、针对Windows,*.exe文件制作 windows版本的exe程序制作非常容易,从官网下载node-webkit.exe,cmd下执行:copy/bnode-webkit.exe+app.exe hello-world.exe 在Linux环境下,可以使用如下命令: catnode-webkit.exe app.exe > hello-world.exe 至此,Windows版本的hello-world.exe程序制作完成。4)、将繁琐重复的操作整合到一个build.sh脚本中
3、#! shapp_name="system-info"# 创建app.nw文件rm-rf outputcd../ &&rm-rf output &&mkdiroutputcp-r $app_name/* outputrm-rf output/Info.plist output/build.sh output/app.icnscdoutput/find. -typed -name".svn"|xargsrm-rfzip -r ../app.nw * >/dev/null;rm-rf * &&cd../ &&mvapp.nw output/mvoutput $app_name/ &&cd$app_nameecho"create nw file success!"#下载基础包svn co svn://localhost/node-webkit-baseoutput >/dev/null#创建mac版本appcdoutputunzip mac-os-x.zip -d mac-os-x >/dev/nullrm-rf mac-os-x.zip mac-os-x/nwsnapshotif[ -f ../Info.plist ];thencp../Info.plist mac-os-x/node-webkit.app/Contents/ficpapp.nw mac-os-x/node-webkit.app/Contents/Resources/if[ -f ../app.icns ];thencp../app.icns mac-os-x/node-webkit.app/Contents/Resources/fimvmac-os-x/node-webkit.app mac-os-x/$app_name.appecho"create mac os app success!"#创建windows版本appunzip win-32.zip -d win-32 >/dev/nullrm-rf win-32.zip win-32/nwsnapshotcpapp.nw win-32/ &&cdwin-32catnw.exe app.nw > $app_name.exerm-rf nw.exe nwsnapshot.execd..echo"create windows app success!"#删除app.nwrm-f app.nw