通过node-webkit实现用用HTML5+JS开发跨平台的桌面应用
一、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
支持的平台:Windows 32bit,Linux 32/64bit,Mac 32bit(OS X 10.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应用的目录结构,如果nw应用中需要用到额外的node_module,可以在目录结构中增加一个node_modules的目录,以存放APP所需的node插件。
其实,一个最最简单的nw应用,只需要有mail.html和package.json文件即可,如下:
2、认识package.json
“Every app package should contain a manifest file named package.json, it will tell node-webkit how to open the app and control how the browser behaves. ”
package.json格式如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 </td> | { "main" : "main.html" , /* APP的主入口,文件名任意;必选 */ "name" : "nw-demo" , /* APP的名称,必须具备唯一性,且符合正常变量命名;必选 */ "description" : "demo app of node-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 */ } | </tr> </tbody> </table> </div> </div>
1 2 3 4 5 </td> | mv hello-world.nw app.nw cp app.nw node-webkit.app /Contents/Resources/ cp app.icns node-webkit.app /Contents/Resources/ cp Info.plist node-webkit.app /Contents/ mv node-webkit.app hello-wrold.app | </tr> </tbody> </table> </div> </div>
1 </td> | copy /b node-webkit.exe+app.exe hello-world.exe | </tr> </tbody> </table> </div> </div>
1 </td> | cat node-webkit.exe app.exe > hello-world.exe | </tr> </tbody> </table> </div> </div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 </td> | #! sh app_name= "system-info" # 创建app.nw文件 rm -rf output cd ../ && rm -rf output && mkdir output cp -r $app_name/* output rm -rf output /Info .plist output /build .sh output /app .icns cd output/ find . - type d -name ".svn" | xargs rm -rf zip -r .. /app .nw * > /dev/null ; rm -rf * && cd ../ && mv app.nw output/ mv output $app_name/ && cd $app_name echo "create nw file success!" #下载基础包 svn co svn: //localhost/node-webkit-base output > /dev/null #创建mac版本app cd output unzip mac-os-x.zip -d mac-os-x > /dev/null rm -rf mac-os-x.zip mac-os-x /nwsnapshot if [ -f .. /Info .plist ]; then cp .. /Info .plist mac-os-x /node-webkit .app /Contents/ fi cp app.nw mac-os-x /node-webkit .app /Contents/Resources/ if [ -f .. /app .icns ]; then cp .. /app .icns mac-os-x /node-webkit .app /Contents/Resources/ fi mv mac-os-x /node-webkit .app mac-os-x/$app_name.app echo "create mac os app success!" #创建windows版本app unzip win-32.zip -d win-32 > /dev/null rm -rf win-32.zip win-32 /nwsnapshot cp app.nw win-32/ && cd win-32 cat nw.exe app.nw > $app_name.exe rm -rf nw.exe nwsnapshot.exe cd .. echo "create windows app success!" #删除app.nw rm -f app.nw | </tr> </tbody> </table> </div> </div>