基于HTML5技术的手机售票系统的研究与实现

邢国军，周自昌，顾 洁，张 锐，吕占民

（中国铁道科学研究院 电子计算技术研究所，北京 100081）

基于HTML5技术的手机售票系统的研究与实现

邢国军，周自昌，顾 洁，张 锐，吕占民

（中国铁道科学研究院 电子计算技术研究所，北京 100081）

介绍手机售票系统采用HTML5开发的原因，从本地存储、截屏与分享、分割线、防止重复触发、导航栏和Tab栏等方面介绍手机售票系统的实现及其实现效果。

HTML5；手机；售票

随着铁路互联网售票系统的开发和推广，铁路互联网售票成为铁路客票系统的一个重要的渠道[1]；近几年移动互联网、智能手机的快速发展，手机无线上网方便快捷。截至2015年6月，我国手机网民规模达到5.94亿，2015年上半年网民中使用手机上网的人群占比已达到88.9%[2]。实现手机购票顺应时代发展、方便旅客出行。但是，目前手机客户端的主流操作系统有Android、苹果Ios、Windows Mobile、黑莓系统等；其中，Android平台的主流开发语言是Java；Ios的主流开发语言是Object-C、Swift，Windows Phone的主流开发语言是C#。这就使得手机客户端开发适配量大，对每种操作系统全部兼容和支持，工作量大，业务同步困难。

客户端的更新需要用户重新安装，代价高；国内Android市场混乱，Ios系统的发布更新需要苹果App Store的审核，审核流程复杂，审核时间长短不定。目前，手机售票处于快速发展时期，业务变化快；根据业务变化，发布新版本时，老版本需要停用；同时需要Android和Ios的版本同时发布新版本停用老版本。使得不断发布新版本，用户频繁卸载老版本安装新版本，但是又受App Store上线流程的影响，Android和Ios两个版本之间无法实现同步发布，最终后台必须实现两套业务逻辑，这又是业务规则不允许的。

HTML5在手机浏览器中运行，支持跨平台开发，一次开发，多处运行。开发时，使用HTML5完成主要的业务逻辑和用户操作；在发布时，根据不同的手机客户端平台，将HTML5资源打包成不同的安装包，安装在手机端；在运行时，根据后台返回的业务数据和手机端的HTML5资源显示页面。对于安装在手机端的HTML5资源，可以在客户端内进行更新，不用重新安装客户端。如果需要更新，在后台发布新版HTML5内容，用户手机客户端会实时收到更新提示，可以直接更新。使用HTML5，不但实现了跨平台开发，方便了用户更新，而且能够保证各平台版本一致，业务规则一致，新业务规则实时生效。下面以本地存储、截屏、分割线、防止重复触发、标题栏和Tab栏等内容介绍如何使用HTML5实现手机售票系统。

1 本地存储

由于火车站数量多，订票过程中选择车站时，实时从后台服务端获取车站数据，对于按流量计费又不稳定的移动网络，既浪费用户流量，用户体验又会非常不好。作为学生类型的用户，如果选择学校时，由于获取数据慢，使用户体验差的问题将更加严重。HTML5提供了本地存储localStorage，用于持久化的存储本地数据，除非主动删除，否则数据永远不会过期。把车站数据和学校数据存储在本地localStorage，使用时从客户端直接获取；客户端根据车站和学校数据的版本号，从后台服务器更新本地的数据。

利用本地存储，用户登录的用户名也可以存储在本地，以免用户每次都输入用户名；如果用户选择了记住密码，密码数据也可以经过加密后，存储在本地，订票过程中就可以自动登录，整个操作过程连续友好。

2 截屏分享

截屏和分享是手机应用一个常用的功能，对于手机售票，可以分享查询到的余票、分享帮亲朋好友订到的车票、分享自己的出行信息。目前，手机基本都自带了截屏的功能，但是只能截取屏幕显示的内容，对于查询出的车次余票信息，常常一屏显示不完全，成功订购的车票信息，如果大于4张票，一屏也显示不全所有的车票信息。车次余票信息，分享时可以记录用户的查询条件，后台提供对应的车次页面，用户分享对应的页面链接；查看时，点击链接，后台返回车次页面。

但是车次余票信息，随着时间的变化，在不停的变化，如果根据不同的链接，记录当时的余票信息，后台需要维护大量的分享数据；如果不记录分享当时的余票信息，只是显示点击链接时余票的信息，分享显示的数据随着时间的变化，余票的数据和分享时的数据区别也越来越大。订购成功的车票，随着时间的变化，状态也在变化，也存在和余票一样的问题。

Canvas元素是HTML5提供的图形容器，可以使用JavaScript在它上面进行绘制图形。利用Canvas进行截屏时，需要保存的页面上的所有元素，以及其子孙元素，按照在浏览器上显示的内容和样式画在Canvas上；再把生成的Canvas保存成图片；最后调用本地的方法，把图片保存在本地或者分享给好友。利用Canvas截取的图片，不但能显示可视范围内的内容，也可以显示在页面内，但不在屏幕可视范围内的内容。图1是直接截取的屏幕，图2是通过Canvas截取的屏幕。

图1 直接截取的屏幕

3 分割线

与电脑相比，手机屏幕较小，手机UI风格简洁明了，元素之间往往通过分割线来划分。分割线的高度为1像素，1像素的高度，通过css实现最常用的方法就是height:1px或者size=1；这种方法对于Android系统没有问题，但是对于大部分iphone手机，分割线实际高度是2个像素。苹果公司初期发布iphone时，手机屏幕的宽高是320×480像素；2010年，iphone4发布时，采用了Retina高清显示屏，在物理尺寸不变的情况下，像素成倍增加，达到640×960像素。为了兼容原有的App，Ios系统对应用程序中宽度高度等长度进行兼容性转化，在Retina屏中，1像素的高度自动转换为2个物理像素的高度；这样App应用程序可以透明地适配两种屏幕。对于UI界面要求极高的Ios系统，2个物理像素高度的分割线减低了显示的视觉效果，但是在Ios7之前，css是不支持0.5px的。为了在Retina高清显示屏显示1个物理像素高度的分割线，需要先做一个高度为4px的背景图片，图片中间的2个像素为分割线的颜色；把高度压缩成2个像素进行拉伸，指定图片的border-width的1px，即可实现1个物理像素高度。

图2 通过Canvas截取的屏幕

4 防止重复触发

在Android平台上， 使用HTML5进行开发时，经常会遇到手指点击一下，被点击的控件绑定的事件会被连续触发两次，或者在本页面点击按钮，页面跳转到下个页面时，下个页面的该位置的控件也被触发了。比如在页面上实现一个开关，如果点击一次触发两次，无论如何点击，开关的状态永远不会变化。这种现象出现的原因是部分Android设备对HTML5的支持有缺陷，手指点击屏幕的时候，确实触发了两次，或者在一段时间内，不断地触发事件。这种问题通过设置全局变量，记录点击是否已经触发事件，如果已经触发事件，就忽略此次点击，实现方法如下：

var taping = false;

function tapRespondEvent() {

if(taping) return false;

taping = true;

setTimeout(function(){

taping = false;

}, 防止重复点击时间阀值，一般为300 ms);

正常业务逻辑处理；

}

5 导航栏和Tab栏

导航栏位于屏幕的上边缘，在状态栏之下，基本始终可见。在导航栏的中间通常显示这一页标题；当在页面之间切换时，可以点击导航栏左边的返回按钮返回到上一页；在导航栏的右边，有时放置用于管理当前页面的控件。Tab栏位于屏幕的最底部，基本始终可见。Tab栏用于切换子任务、视图和功能，当点击某个Tab时，页面切换到对应的页面，当前Tab背景亮起，Tab的内容字体和图片高亮。导航栏和Tab栏都是原生开发的标准控件，只需要将控件放置在对应位置就好了。

对于HTML5页面，元素之间的位置相对固定；位于页面顶部的导航栏，如果页面向上滑动，导航栏也会随着页面的向上滑动逐渐消失在顶部；Tab栏开始会隐藏在页面的最下面，只有将整个页面滑到最上面才能看到Tab栏。导航栏和Tab栏使用频繁，这种显示对于用户操作极不方便，而且不符合用户的使用习惯。

要实现和原生导航栏和Tab栏一样的显示状态，始终位于屏幕最上边和最下边，而不是位于页面的最上边和最下边；需要先阻止系统的滑动方法，定义自己的滑动方法。

对于每次页面的上下滑动，首先判断元素是否是固定在屏幕的某个位置，如果是该元素保持位置不动；如果判断该元素可以滑动，计算滑动的距离，然后移动该元素。

由于导航栏和Tab栏的存在占用屏幕的上边和下边的范围，计算屏幕其余范围内显示的内容位置和高度时，需要减去导航栏和Tab栏高度，避免出现显示内容被导航栏和Tab栏遮挡住、怎么滑动都显示不出来。

软键盘弹出时也需要进行特殊处理。在用户点击输入框输入数据时，系统在底部弹出软键盘的同时，会判断当前输入框是否会被软键盘挡住；如果弹出的键盘挡住了输入框的内容，在输入数据时不能正常显示输入的内容，系统会自动把页面滑动到合适的位置。在弹出软键盘页面自动向上滑动时，导航栏也随着页面向上滑动而被遮住部分或者全部。

为了阻止导航栏也向上滑动，需要在用户点击输入框时，预先计算出页面需要向上滑动的高度，将页面先滑动到合适的高度，随后系统弹出软键盘时，页面就不会再向上滑动了。如果遇到输入框是这个页面最后一行的情况，预先向上滑动时，由于下面已经没有内容了，页面是滑动不上去的，但是在弹出软键盘时，页面却会向上滑动，导航栏就又被遮挡住了；为了避免出现这种情况，需要先计算输入框需要滑动的合适位置，在输入框下面先补上对应高度的空白元素，再主动向上滑动页面；最后输入完数据，软键盘消失后，把补上的空白元素从页面删除。

6 结束语

手机售票系统于2013年底成功上线运行，目前日活跃用户300万以上，高峰日售票量210多万张[3]，手机售票上线当日即排在苹果App Store免费榜第1名，手机售票2.0版上线后，被苹果App Store评为优秀新App；手机售票Android用户量也很大，基本是Ios版本用户量的两倍。采用HTML5开发的手机售票虽然方便了旅客购票，获得了大家的认可；仍然存在有很多不足的地方。

由于导航栏和Tab栏的影响，页面的上下滑动效果比原生的滑动效果要差一些；页面切换无法做出和原生开发一样的动画效果；由于HTML5的限制，用户交互的许多效果都会受到限制。为此，在目前研究的基础上，既要加强对HTML5本身开发的优化和改进，又要加强HTML5与本地原生方法之间调用的研究实现，做出更方便使用、交互效果更好、用户体验更好的应用。

[1]王明哲，张振利，徐 彦，等.铁路互联网售票系统的研究与实现[J].铁路计算机应用，2012，21（4）：23-39.

[2]中国互联网信息中心. 中国互联网络发展状况统计报告[R].中国互联网信息中心，2015，7.

[3]中国铁道科学研究院电子计算技术研究所. 2015年客票系统运行情况日报[R].中国铁道科学研究院电子计算技术研究所，2015，08.

责任编辑 徐侃春

Ticketing and Reservation System with mobile phone based on HTML5

XING Guojun, ZHOU Zichang, GU Jie, ZHANG Rui, LV Zhanmin
( Institute of Computing Technologies, China Academy of Railway Sciences, Beijing 100081, China )

This paper introduced the reasons to use HTML5 in the Ticketing and Reservation System with mobile phone, from the local storage, screenshots and sharing, line segmentation, prevention of repeated trigger, navigation bar and tab bar, introduced the implementation of the System, and its effect.

HTML5; mobile phone; ticketing

U293.22∶TP39

A

1005-8451（2015）11-0038-04

2015-09-01

中国铁道科学研究院基金（1151GC0503）。

邢国军，助理研究员；周自昌，工程师。