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

目录

一、node-webkit是什么？

二、node-webkit有些什么干货？

三、node-webkit的基本工作原理是怎样的？

四、怎样用node-webkit进行客户端开发？

五、如何做到开发一份代码，生成多平台APP？

六、使用node-webkit开发桌面客户端的优缺点？

七、Q & A!

一、node-webkit是什么？

1、概念

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

2、获取node-webkit

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

支持的平台：Windows32bit，Linux32/64bit，Mac32bit(OSX10.7+)

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

二、node-webkit有些什么干货？

官方提供的一些成品：https://github.com/rogerwang/node-webkit/wiki/List-of-apps-and-companies-using-node-webkit

三、node-webkit的基本工作原理是怎样的？

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

四、怎样用node-webkit进行客户端开发？

1、一个node-webkit项目的基本目录结构

nw-demo.png

上面这是一个简单nw应用的目录结构，如果nw应用中需要用到额外的node_module，可以在目录结构中增加一个node_modules的目录，以存放APP所需的node插件。

其实，一个最最简单的nw应用，只需要有mail.html和package.json文件即可，如下：

    屏幕快照 2013-06-05 上午11.57.41.png

2、认识package.json

“Everyapppackageshouldcontainamanifestfilenamedpackage.json,itwilltellnode-webkithowtoopentheappandcontrolhowthebrowserbehaves.”

package.json格式如下：

{

"main":"main.html",/*APP的主入口，文件名任意；必选*/

"name":"nw-demo",/*APP的名称，必须具备唯一性，且符合正常变量命名；必选*/

"description":"demoappofnode-webkit",/*APP的简单描述*/

"version":"0.1.0",/*APP的版本号*/

"keywords":["demo","node-webkit"],/*APP的关键字，搜索APP时用到*/

"window":{/*APP的窗口属性*/

"icon":"link.png",/*APP图标（windows下，状态栏上可见）*/

"toolbar":true,/*是否显示工具栏*/

"width":800,/*窗口初始化大小*/

"height":500,

"frame":true/*是否显示外窗体，如最大化、最小化、关闭按钮*/

},

"user-agent":"%name%ver%nwver%webkit_ver%osinfo"/*可自定义APP的UA*/

}

    其中，main和name是必选字段，更多配置字段，可参考官方地址：https://github.com/rogerwang/node-webkit/wiki/Manifest-Format

3、主窗口mail.html的写法    随意写，和普通的前端页面开发方式一样！

4、最简单的HelloWorld

a）、目录结构

    屏幕快照 2013-06-05 下午7.15.47.png

b）、package.json文件代码    屏幕快照 2013-06-05 下午7.16.51.png

c）、main.html文件代码    屏幕快照 2013-06-05 下午7.17.21.png

d）、执行命令，运行    屏幕快照 2013-06-05 下午7.19.26.png

e）、最终效果

屏幕快照2013-06-05下午7.26.26.png

也许你会觉得这个界面特别熟悉，没错，它就是chromium！只是在node-webkit中，我们可以通过修改package.json配置，把工具栏和外框去掉，修改后的配置为：

屏幕快照2013-06-05下午7.23.49.png

去掉外框后的运行效果：

屏幕快照2013-06-05下午7.25.30.png

你一定会发现去掉toolbar和frame以后，窗口没法被拖动了，其实，可以通过下面这句css来实现窗口可拖动：

    屏幕快照 2013-06-05 下午7.31.16.png

五、如何做到开发一份代码，生成多平台APP？

1、nw包制作

屏幕快照2013-06-06上午11.43.34.png

    完成上面的操作，已经生成了一个名为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.nwapp.nw

cpapp.nwnode-webkit.app/Contents/Resources/

cpapp.icnsnode-webkit.app/Contents/Resources/

cpInfo.plistnode-webkit.app/Contents/

mvnode-webkit.apphello-wrold.app

至此，MacOSX版本的可执行程序hello-world.app制作完成。

    一般情况下，都会将其压缩后再进行传播。

3）、针对Windows，*.exe文件制作

windows版本的exe程序制作非常容易，从官网下载node-webkit.exe，cmd下执行：

copy/bnode-webkit.exe+app.exehello-world.exe

在Linux环境下，可以使用如下命令：

catnode-webkit.exeapp.exe>hello-world.exe

      至此，Windows版本的hello-world.exe程序制作完成。

4）、将繁琐重复的操作整合到一个build.sh脚本中

#!sh

app_name="system-info"

#创建app.nw文件

rm-rfoutput

cd../&&rm-rfoutput&&mkdiroutput

cp-r$app_name/*output

rm-rfoutput/Info.plistoutput/build.shoutput/app.icns

cdoutput/

find.-typed-name".svn"|xargsrm-rf

zip-r../app.nw*>/dev/null;

rm-rf*&&cd../&&mvapp.nwoutput/

mvoutput$app_name/&&cd$app_name

echo"createnwfilesuccess!"

#下载基础包

svncosvn://localhost/node-webkit-baseoutput>/dev/null

#创建mac版本app

cdoutput

unzipmac-os-x.zip-dmac-os-x>/dev/null

rm-rfmac-os-x.zipmac-os-x/nwsnapshot

if[-f../Info.plist];then

cp../Info.plistmac-os-x/node-webkit.app/Contents/

fi

cpapp.nwmac-os-x/node-webkit.app/Contents/Resources/

if[-f../app.icns];then

cp../app.icnsmac-os-x/node-webkit.app/Contents/Resources/

fi

mvmac-os-x/node-webkit.appmac-os-x/$app_name.app

echo"createmacosappsuccess!"

#创建windows版本app

unzipwin-32.zip-dwin-32>/dev/null

rm-rfwin-32.zipwin-32/nwsnapshot

cpapp.nwwin-32/&&cdwin-32

catnw.exeapp.nw>$app_name.exe

rm-rfnw.exenwsnapshot.exe

cd..

echo"createwindowsappsuccess!"

#删除app.nw

rm -f app.nw

六、使用node-webkit开发桌面客户端的优缺点？

1、优点

提高UI开发效率，DOM中丰富的事件等可以涵盖绝大多数桌面开发中的情况

HTML(5)与CSS(3)拥有丰富的展现效果，可以更容易地对界面进行改版、换肤

容易实现跨平台:MacOSX、Windows、Linux

使用Web开发人员工具可以使UI调试变得很轻松

桌面程序UI与Web版UI可以共享代码

2）、缺点

浏览器原生API几乎仅仅局限在Web页面上

若通过JavaScript引擎向Web前端暴露一些具有操作客户端权限的API，如何保证代码安全性

必须携带浏览器内核运行库，无形增加程序体积，至少20MB以上（压缩后）

能否满足各种复杂怪异的需求，比如异型窗口