随着微信公众号，百度“直达号”，“神经猫”等HTML5 轻应用和游戏的兴起，近一段，HTML5 应用和游戏的快速发展，再次燃起了众多H5开发者的巨大热情。 与此同时，Web 应用在企业级应用市场里，一直占据主导地位。如果拓展HTML5 开发者的技能，在开发Web 应用的同时，将Web 应用拓展到Native 应用，成为开发者最关心的话题。
微软推出Web App Template 工具，可以帮助开发者快速将Web 应用轻松变为Windows Universal App，通过应用商店，可以覆盖更多的用户。
Web App Template 是一个非常便捷的工具。以你的Web 应用为核心，转为全功能的Windows 8.1 和Windows Phone 8.1/Windows Phone 8.0 商店应用。 Web App Template （WAT）通过安装的Visual Studio 模板，配置Config Data（meta data）生成Windows Store App。WAT全面支持Windows Universal App
WAT提供大部分Windows商店应用的功能，比如Back 键，定位功能，Offline 模式支持， Charm 集成等等。
对于用响应式设计的应用，将有非常好的体验。
WAT是个全开源项目。
源码
- 浏览 source code
- Fork 源码
- 克隆 repository git.
git clone https://git01.codeplex.com/wat
安装
可以从下面这个网站上找到详细的介绍和Config 文件的使用 https://wat-docs.azurewebsites.net/
那么下面就让我们做个Demo，看看WAT神奇之处吧。
如何已经安装WAT template，将会在VS2013 新工程里看见WAT 的template
这是一个很典型的Windows Universal App 工程。如果你还不熟悉Universal App 请参考 UAP介绍 和博客 WP8.1 UAP
建完工程后，我们可以看到，左边是WAT的介绍，右边是UAP的工程。 我们重点修改的地方是Shared 目录。
我们这里介绍的是WAT2.2， 我们需要修改config.json，但是WAT 对不同功能提供了非常多的例子。开发过程中，可以参考 config.sample.json。我们可以将config.sample.json 代码复制过来，进行修改。
- 示例 - 将 https://www.backstreetboys.com/ 变为Universal App
- 修改start_url 为 https://www.backstreetboys.com/
- 把Windows 8.1 设置成默认启动项目，按F5 运行应用。
是的非常简单，我们可以看见基于HTML5 网站的Universal App 已经运行起来了。
- 我们在看看Windows Phone 8.1 应用。 将Windows Phone 8.1 设置成默认启动项目，按F5 运行项目
非常漂亮的响应式非常方便将一个H5 Web 应用变为Universal App
示例2 - https://www.backstreetboys.com/ Universal app 添加导航菜单
我们可以进一步完善，我们用WAT生成的Universal app
在config.sample.json 我们可以找到 "wat_appBar": 和 "wat_navBar": 的配置。 我们下面把sample 中，这两个字段的配置copy 过来，放在 config.json
我将网站里的MENU 里的 News，Event，Media 对应的links 配置放在navigation bar 里
我们运行起来看看，效果。
我们可以看到配置出来的Navigation bar 和 app bar。 我点击News 将进入News 页面
示例3- 配置应用图标和启动页面等
在WAT网站里有个Tools&Tricks 选项。在这里我们使用WAT提供的工具生成商店应用里所需的各种图标。
生成完了以后，就可以方便地配置在 package.appxmanifest 里了。
示例4 - 隐藏页面中的Element
为了更好的体验，我们会发现有些Element 并不适合放在Universal app 商店应用里。 比如下面这些Element。我们可以尝试着隐藏他们。
我们可以使用IE11 里的F12 工具里的Element选择器去查看Element信息。 可以看见这样Element 是在footer里的
我们可以在"wat_styles": 设置HideElement
我们将footer 里的element隐藏掉。可以看到在商店应用里，我们已经看不到网站里footer Element了
示例5 - Offline的功能
HTML5 Web 应用面临着另一个主要问题，就是不支持offline。 WAT将HTML5 Web 应用转为Universal app 后，提供了Offline 功能的支持
"wat_offline": {
"enabled": true,
"message": "It looks like you are offline. Please reconnect to use this application.",
"superCache": {
"enabled": false,
"baseDomainURL": "https://wat-docs.azurewebsites.net/",
"addIndexedDBSupport": true,
"imagesGuardBand": true,
"preCacheURLs": [ ],
"ignoreURLs": [ ]
}
},
在进入offline的时候，应用可以提供
- 提示信息
- 提供相应的本地页面
- 使用SuperCache 功能
superCache 默认是关闭的。 我们还可以配置preCacheURLs cache 更多的页面。
WAT还提供很多方便的功能，因为篇幅关系，下次再一次介绍。 如何使用WAT 请参考
https://wat-docs.azurewebsites.net/GetStarted
在 https://wat-docs.azurewebsites.net/JsonWindows 介绍了如何配置config.json 提供更多的功能。