学习node-webkit

74 阅读 0 评论 49 点赞

我是靠谱客的博主成就煎饼，最近开发中收集的这篇文章主要介绍学习node-webkit，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

想把动画编辑器从网页应用弄成桌面应用，于是看了下node-webkit这个东西。个人感觉node-webkit是把node和webkit整合到一起，然后让web app可以调用node的各种包，有了更强大的功能， webkit内置解析html，支持很多html5的特性。这样就可以用前台开发语言做出能媲美本地应用的应用了。

在网上找了一下教程， node-webkit最好的教程当然是官方的wiki了-node-webkit。

1.配置好node-webkit的相关环境后，运行了第一个例子。就是一些简单的html，运行之后感觉就是用一个简单的浏览器打开一样。当然不会这么简单，接着教程讲了一个比较赞的功能。就是菜单，包括应用头部的菜单和右键菜单（contextMenu）。在写网页应用的时候写右键菜单挺麻烦的，有了这个功能，真是非常有本地应用的感觉。

2.想用node的包也非常容易，因为node-webkit已经把node的require这个函数内置到window这个全局变量，如下：

<html>
<body>
<script>
// get the system platform using node.js
var os = require('os')
document.write('Our computer is: ', os.platform())
</script>
</body>
</html>

然后就可以借着node强大的包管理工具npm和node的各种包，真爽。

3.例子看的差不多了。就给动画编辑器配node-webkit。因为现在动画编辑器没有用node的包，所以配起来非常容易。唯一遇到的问题是动画编辑器中用了requirejs，所以会有地方用require函数，和node的require函数命名冲突。

在网上搜了一下，找到了这个- name conflict。如果加了脚本覆盖require函数再加载requirejs的库，这个时候虽然可以但是用不了node-webkit的那个dev tool了。把用requirejs的require改成requirejs，这样就可以了。

4.接下来当然就是想发布应用。(distribute) 发布后就用户就可以当做普通的本地应用直接双击，当然也不会要求用户下载node-webkit的，因为已经集成好了。

官方推荐了这样一个工具-grunt-node-webkit-builder。当然你要先配好grunt，这个算是grunt下的一个包，运行这个的相关命令，可以直接把我们的应用发布到linux， mac， windows下面，真是一次开发，多个平台使用。感觉如果这个技术更加成熟的话，这种轻松跨平台的特性，一定会吸引很多人的。

5.展望。如果这个应用使用node-webkit的话，感觉肯定要再增加一些特性使得体验更好。首先右键的菜单，提供便捷操作。很多用户都有使用右键的习惯，这个肯定是要有的。应用头部的菜单可以提供保存工作进度，然后利用node的fs导出相关文件。