Share via

Web App Template 将HTML5 应用和游戏快速变为Universal App 商店应用覆盖更多设备

  • Article

 

随着微信公众号，百度“直达号”，“神经猫”等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

clip_image001

WAT提供大部分Windows商店应用的功能，比如Back 键，定位功能，Offline 模式支持， Charm 集成等等。

对于用响应式设计的应用，将有非常好的体验。

WAT是个全开源项目。

源码

  • Fork 源码
  • 克隆 repository git.

git clone https://git01.codeplex.com/wat

安装

  1. Visual Studio 2013(Windows Store Express, Pro or Ultimate)
  2. 从 https://wat.codeplex.com/ 下载最新版本

可以从下面这个网站上找到详细的介绍和Config 文件的使用 https://wat-docs.azurewebsites.net/

那么下面就让我们做个Demo，看看WAT神奇之处吧。

如何已经安装WAT template，将会在VS2013 新工程里看见WAT 的template

clip_image002

这是一个很典型的Windows Universal App 工程。如果你还不熟悉Universal App 请参考 UAP介绍 和博客 WP8.1 UAP

clip_image003

建完工程后，我们可以看到，左边是WAT的介绍，右边是UAP的工程。 我们重点修改的地方是Shared 目录。

我们这里介绍的是WAT2.2， 我们需要修改config.json，但是WAT 对不同功能提供了非常多的例子。开发过程中，可以参考 config.sample.json。我们可以将config.sample.json 代码复制过来，进行修改。

  1. 示例 - 将 https://www.backstreetboys.com/ 变为Universal App

clip_image004

  • 把Windows 8.1 设置成默认启动项目，按F5 运行应用。

是的非常简单，我们可以看见基于HTML5 网站的Universal App 已经运行起来了。

clip_image005

  • 我们在看看Windows Phone 8.1 应用。 将Windows Phone 8.1 设置成默认启动项目，按F5 运行项目

clip_image006

非常漂亮的响应式非常方便将一个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 里

clip_image007

clip_image008

我们运行起来看看，效果。

我们可以看到配置出来的Navigation bar 和 app bar。 我点击News 将进入News 页面

clip_image009

clip_image010

示例3- 配置应用图标和启动页面等

在WAT网站里有个Tools&Tricks 选项。在这里我们使用WAT提供的工具生成商店应用里所需的各种图标。

clip_image011

生成完了以后，就可以方便地配置在 package.appxmanifest 里了。

示例4 - 隐藏页面中的Element

为了更好的体验，我们会发现有些Element 并不适合放在Universal app 商店应用里。 比如下面这些Element。我们可以尝试着隐藏他们。

clip_image012

我们可以使用IE11 里的F12 工具里的Element选择器去查看Element信息。 可以看见这样Element 是在footer里的

clip_image013

我们可以在"wat_styles": 设置HideElement

clip_image014

我们将footer 里的element隐藏掉。可以看到在商店应用里，我们已经看不到网站里footer Element了

clip_image015

示例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的时候，应用可以提供

  1. 提示信息
  2. 提供相应的本地页面
  3. 使用SuperCache 功能

superCache 默认是关闭的。 我们还可以配置preCacheURLs cache 更多的页面。

WAT还提供很多方便的功能，因为篇幅关系，下次再一次介绍。 如何使用WAT 请参考

https://wat-docs.azurewebsites.net/GetStarted

在 https://wat-docs.azurewebsites.net/JsonWindows 介绍了如何配置config.json 提供更多的功能。