用NW.js开发下一代桌面应用程序

前言

就在最近，GitHub发布了其代码编辑器Atom的1.0正式版。使用过它的童鞋一定会知道它利用网页技术开发。只不过它的框架是Atom Shell，非常类似NW.js。这时你可能问，放着好端端的native级界面框架不用，为什么要使用网页技术编写界面呢？下面我们就来探讨一下这个问题。

网页技术的优缺点

优点

HTML技术发展到今天的HTML5版本可谓已经十分强大，同时有CSS3的加持，网页也可以华丽夺目。Canvas标签、Audio标签以及Video标签的引入使得网页真正支持了多媒体，使用已经比原生界面框架简便。更重要的是WebGL标准，它把3D世界带到了浏览器，你可能不会相信GTA、极品飞车可以跑在浏览器中，可这已经可以实现。如此说来，网页完全可以满足桌面应用UI的需求，并且可以使界面更加灵活绚丽，也极大地方便了跨平台的开发。大家不妨搜索HTML5相关的案例或网站（这里推荐Codrops，里面有非常多用CSS3实现的界面效果）

缺点

凡事都不是十全十美的，网页开发当然也有许多坑。例如当我们需要做一个无边框窗口时（如下图）
我们需要它有阴影，这时可以用-webkit-box-shadow样式属性，但发现拖拽缩放却在NW.js中无法实现，这就比用native级的wndProc函数的效果差了，当然界面效果还是非常不错的。另外，缺乏界面元素，ListBox等控件我们就必须自己实现了，是时候打开我们的脑洞了。用网页的另一个显著的缺点还有其不稳定性和性能，我们知道NW.js的前端其实就是Chromium，我在开发中经常遇到闪烁、卡顿等问题。

---

小结一下，虽然网页App有许多缺点，但基本都能接受。如果让我做一个简单的App，我一定会选择NW.js；而如果需要开发一个企业级或大型一点的应用程序，那还是选择Qt等native开发框架吧。

小试牛刀

下面我们实际开发一个Helloworld体验一下NW.js的便捷

准备

1. 获取NW.js二进制文件

到NW.js官方网站下载对应平台的二进制文件。

2. 创建工程目录

一个完整NW.js应用的目录结构应该如下：

解释一下，package.json大家应该熟悉，就是node.js工程用来描述工程信息的manifest文件，里面配置了入口文件、版本、依赖等。一般情况我们把应用的内容（网页文件、样式表、js等资源）放置在app目录中。此外，官方提供了一种方法可以防止资源暴露给用户，大家可以参考一下How to package and distribute your apps这篇参考。

3. 编写package.json

上面main即是入口页面。注意window对象，它是用来配置主窗口的。常用的属性有：
title: 顾名思义，窗口标题。
width/height: 初始的窗口尺寸。
toolbar: 布尔值，指示是否显示一个工具栏，一般应该不需要，但我们要手动设置为false。
icon: 指示窗口图标的路径。
position: 指示窗口初始位置，值可以为null,center或mouse这三个值。
min/max_width/height: 最大最小尺寸。
resizable: 指示是否可以改变窗口大小。
always-on-top: 指示窗口是否总在最前。
frame: 指示窗口是否有边框。
transparent: 与frame配合使用来实现无边框窗口。
show: 指示窗口是否显示，建议设置为false，当页面onload后在设置为true。

4. 写一个简单的入口文件

NW.js的入口文件就是一个网页（Atom Shell是一个js脚本），相比之下NW.js更方便些，开发过程更像开发一个网站，只不过浏览器加了一些特技可以得到node的模块。
在Sublime Text中输入html:5后按Tab键生成一个HTML5的模板。

这里有个Tip：
无边框窗口拖动需要给一个div加样式：

-webkit-app-region: drag;
-webkit-user-select: none;

这里注意一下，可能是BUG的原因，当一个div有3d transform时，窗口无法拖动。
对于Button、Input等可互动的元素，如果其在可拖动div下，需要对其添加如下样式：

-webkit-app-region: no-drag;

否则无法使其获取焦点来进行互动。

5. 打包

确保package.json与可执行文件在同一目录下，把需要的node模块放置到node_modules目录下，发布即可。

---

本文算是简单介绍了一下NW.js，其实如果你有丰富的前端经验，上手NW.js应该易如反掌。网页开发App是趋势，也希望它发展得越来越壮大。