关于NW.js以及如何用HTML5来做一个桌面App

最近写标题好像越来越长了。。。。。。

这件事的起因是几天前的群里，有个人想转职成计数菌，于是找我做一个可以计数的工具。

嘛，我平常写计数器不少了（毕竟各种程序里面都需要各种神奇的计数器嘛），写带界面的还是第一回。。。。。。

然后看了看需求。觉得这东西应该用HTML5非常好写。

我想了想，那就用HTML5写好了。

大家都知道，现在Hybrid App非常火，甚至也火到了传统的桌面上来了。网易云音乐的PC版就是一个用HTML和Webkit核心做的Hybrid应用。我用来写代码的Visual Studio Code也是基于Chromium的。

基于Chromium的本地应用，由于不是浏览器，于是没有浏览器的沙箱限制，通过一些精心设计的API，能做到和本地原生应用一样的事情。

为了方便做出这样的App，有一个工具非常的好用，它就是NW.js。原来的名字叫做node-webkit，顾名思义，就是把node.js和webkit打包在一起，再加上HTML5制作的主程序，完成一整套Hybrid的桌面应用的开发。不过自从node.js换成了io.js，webkit换成了Chromium，node-webkit可能觉得这个名字有点名不副实了，就改名成了NW.js

如果你电脑上已经有npm了，那么你只需要一行命令就能拥有NW.js

npm install nw -g

然后用 nw nwapp.nw 就可以打开nw的应用程序了。

而要做一个nw的应用程序也十分简单。只需要写一个json文件：

1
2
3
4
5
6
7
8
9
10
11
{
    "main": "index.html",
    "name": "App Name",
    "version": "0.1.0",
    "window": {
        "icon": "img/icon.png",
        "toolbar": false,
        "width": 900,
        "height": 550
    }
}

把这个东西存成 package.json。然后在同一个目录里放一个index.html就可以了。

然后用shell打开这个目录，输入nw 。马上就能运行起来一个桌面应用程序，内容是你的index.html。

因为浏览器环境是你自己提供的Chromium，所以NW.js的开发要比传统WebApp开发要容易一些，因为不需要考虑浏览器之间的兼容性嘛。

所以只要Chromium上有的东西都可以拿来用，比如我就在这个程序里，用了很多ES6的新语法写JavaScript。

（不过糖吃太多感觉回不去了，下一个传统Web App估计我要上babel了。）

最后我做出了一个160KB左右的软件。然后和NW.js打包在一起。。。最后成品20M。。。。

嗯，看来NW.js还是更适合那些更大的软件。

NW.js在国内的教程资源不多，我基本上是靠啃英文的官方wiki和自己摸索。

好在使用NW.js和开发基于Chrome的Web App以及用io.js写网站本身没什么区别。

我最后写出来的东西参见：https://github.com/zyzsdy/Counter-Counter

下次更新会写写在这次用NW.js开发的时候碰到的坑。虽然还有这样那样的问题，以及还远远没有成熟，不过NW.js确实是今后开发桌面app又一个不错的选择。