基于HTML5技術(shù)的手機(jī)售票系統(tǒng)的研究與實(shí)現(xiàn)

邢國軍，周自昌，顧 潔，張 銳，呂占民

（中國鐵道科學(xué)研究院 電子計(jì)算技術(shù)研究所，北京 100081）

基于HTML5技術(shù)的手機(jī)售票系統(tǒng)的研究與實(shí)現(xiàn)

邢國軍，周自昌，顧 潔，張 銳，呂占民

（中國鐵道科學(xué)研究院 電子計(jì)算技術(shù)研究所，北京 100081）

介紹手機(jī)售票系統(tǒng)采用HTML5開發(fā)的原因，從本地存儲(chǔ)、截屏與分享、分割線、防止重復(fù)觸發(fā)、導(dǎo)航欄和Tab欄等方面介紹手機(jī)售票系統(tǒng)的實(shí)現(xiàn)及其實(shí)現(xiàn)效果。

HTML5；手機(jī)；售票

隨著鐵路互聯(lián)網(wǎng)售票系統(tǒng)的開發(fā)和推廣，鐵路互聯(lián)網(wǎng)售票成為鐵路客票系統(tǒng)的一個(gè)重要的渠道[1]；近幾年移動(dòng)互聯(lián)網(wǎng)、智能手機(jī)的快速發(fā)展，手機(jī)無線上網(wǎng)方便快捷。截至2015年6月，我國手機(jī)網(wǎng)民規(guī)模達(dá)到5.94億，2015年上半年網(wǎng)民中使用手機(jī)上網(wǎng)的人群占比已達(dá)到88.9%[2]。實(shí)現(xiàn)手機(jī)購票順應(yīng)時(shí)代發(fā)展、方便旅客出行。但是，目前手機(jī)客戶端的主流操作系統(tǒng)有Android、蘋果Ios、Windows Mobile、黑莓系統(tǒng)等；其中，Android平臺(tái)的主流開發(fā)語言是Java；Ios的主流開發(fā)語言是Object-C、Swift，Windows Phone的主流開發(fā)語言是C#。這就使得手機(jī)客戶端開發(fā)適配量大，對(duì)每種操作系統(tǒng)全部兼容和支持，工作量大，業(yè)務(wù)同步困難。

客戶端的更新需要用戶重新安裝，代價(jià)高；國內(nèi)Android市場混亂，Ios系統(tǒng)的發(fā)布更新需要蘋果App Store的審核，審核流程復(fù)雜，審核時(shí)間長短不定。目前，手機(jī)售票處于快速發(fā)展時(shí)期，業(yè)務(wù)變化快；根據(jù)業(yè)務(wù)變化，發(fā)布新版本時(shí)，老版本需要停用；同時(shí)需要Android和Ios的版本同時(shí)發(fā)布新版本停用老版本。使得不斷發(fā)布新版本，用戶頻繁卸載老版本安裝新版本，但是又受App Store上線流程的影響，Android和Ios兩個(gè)版本之間無法實(shí)現(xiàn)同步發(fā)布，最終后臺(tái)必須實(shí)現(xiàn)兩套業(yè)務(wù)邏輯，這又是業(yè)務(wù)規(guī)則不允許的。

HTML5在手機(jī)瀏覽器中運(yùn)行，支持跨平臺(tái)開發(fā)，一次開發(fā)，多處運(yùn)行。開發(fā)時(shí)，使用HTML5完成主要的業(yè)務(wù)邏輯和用戶操作；在發(fā)布時(shí)，根據(jù)不同的手機(jī)客戶端平臺(tái)，將HTML5資源打包成不同的安裝包，安裝在手機(jī)端；在運(yùn)行時(shí)，根據(jù)后臺(tái)返回的業(yè)務(wù)數(shù)據(jù)和手機(jī)端的HTML5資源顯示頁面。對(duì)于安裝在手機(jī)端的HTML5資源，可以在客戶端內(nèi)進(jìn)行更新，不用重新安裝客戶端。如果需要更新，在后臺(tái)發(fā)布新版HTML5內(nèi)容，用戶手機(jī)客戶端會(huì)實(shí)時(shí)收到更新提示，可以直接更新。使用HTML5，不但實(shí)現(xiàn)了跨平臺(tái)開發(fā)，方便了用戶更新，而且能夠保證各平臺(tái)版本一致，業(yè)務(wù)規(guī)則一致，新業(yè)務(wù)規(guī)則實(shí)時(shí)生效。下面以本地存儲(chǔ)、截屏、分割線、防止重復(fù)觸發(fā)、標(biāo)題欄和Tab欄等內(nèi)容介紹如何使用HTML5實(shí)現(xiàn)手機(jī)售票系統(tǒng)。

1 本地存儲(chǔ)

由于火車站數(shù)量多，訂票過程中選擇車站時(shí)，實(shí)時(shí)從后臺(tái)服務(wù)端獲取車站數(shù)據(jù)，對(duì)于按流量計(jì)費(fèi)又不穩(wěn)定的移動(dòng)網(wǎng)絡(luò)，既浪費(fèi)用戶流量，用戶體驗(yàn)又會(huì)非常不好。作為學(xué)生類型的用戶，如果選擇學(xué)校時(shí)，由于獲取數(shù)據(jù)慢，使用戶體驗(yàn)差的問題將更加嚴(yán)重。HTML5提供了本地存儲(chǔ)localStorage，用于持久化的存儲(chǔ)本地?cái)?shù)據(jù)，除非主動(dòng)刪除，否則數(shù)據(jù)永遠(yuǎn)不會(huì)過期。把車站數(shù)據(jù)和學(xué)校數(shù)據(jù)存儲(chǔ)在本地localStorage，使用時(shí)從客戶端直接獲取；客戶端根據(jù)車站和學(xué)校數(shù)據(jù)的版本號(hào)，從后臺(tái)服務(wù)器更新本地的數(shù)據(jù)。

利用本地存儲(chǔ)，用戶登錄的用戶名也可以存儲(chǔ)在本地，以免用戶每次都輸入用戶名；如果用戶選擇了記住密碼，密碼數(shù)據(jù)也可以經(jīng)過加密后，存儲(chǔ)在本地，訂票過程中就可以自動(dòng)登錄，整個(gè)操作過程連續(xù)友好。

2 截屏分享

截屏和分享是手機(jī)應(yīng)用一個(gè)常用的功能，對(duì)于手機(jī)售票，可以分享查詢到的余票、分享幫親朋好友訂到的車票、分享自己的出行信息。目前，手機(jī)基本都自帶了截屏的功能，但是只能截取屏幕顯示的內(nèi)容，對(duì)于查詢出的車次余票信息，常常一屏顯示不完全，成功訂購的車票信息，如果大于4張票，一屏也顯示不全所有的車票信息。車次余票信息，分享時(shí)可以記錄用戶的查詢條件，后臺(tái)提供對(duì)應(yīng)的車次頁面，用戶分享對(duì)應(yīng)的頁面鏈接；查看時(shí)，點(diǎn)擊鏈接，后臺(tái)返回車次頁面。

但是車次余票信息，隨著時(shí)間的變化，在不停的變化，如果根據(jù)不同的鏈接，記錄當(dāng)時(shí)的余票信息，后臺(tái)需要維護(hù)大量的分享數(shù)據(jù)；如果不記錄分享當(dāng)時(shí)的余票信息，只是顯示點(diǎn)擊鏈接時(shí)余票的信息，分享顯示的數(shù)據(jù)隨著時(shí)間的變化，余票的數(shù)據(jù)和分享時(shí)的數(shù)據(jù)區(qū)別也越來越大。訂購成功的車票，隨著時(shí)間的變化，狀態(tài)也在變化，也存在和余票一樣的問題。

Canvas元素是HTML5提供的圖形容器，可以使用JavaScript在它上面進(jìn)行繪制圖形。利用Canvas進(jìn)行截屏?xí)r，需要保存的頁面上的所有元素，以及其子孫元素，按照在瀏覽器上顯示的內(nèi)容和樣式畫在Canvas上；再把生成的Canvas保存成圖片；最后調(diào)用本地的方法，把圖片保存在本地或者分享給好友。利用Canvas截取的圖片，不但能顯示可視范圍內(nèi)的內(nèi)容，也可以顯示在頁面內(nèi)，但不在屏幕可視范圍內(nèi)的內(nèi)容。圖1是直接截取的屏幕，圖2是通過Canvas截取的屏幕。

圖1 直接截取的屏幕

3 分割線

與電腦相比，手機(jī)屏幕較小，手機(jī)UI風(fēng)格簡潔明了，元素之間往往通過分割線來劃分。分割線的高度為1像素，1像素的高度，通過css實(shí)現(xiàn)最常用的方法就是height:1px或者size=1；這種方法對(duì)于Android系統(tǒng)沒有問題，但是對(duì)于大部分iphone手機(jī)，分割線實(shí)際高度是2個(gè)像素。蘋果公司初期發(fā)布iphone時(shí)，手機(jī)屏幕的寬高是320×480像素；2010年，iphone4發(fā)布時(shí)，采用了Retina高清顯示屏，在物理尺寸不變的情況下，像素成倍增加，達(dá)到640×960像素。為了兼容原有的App，Ios系統(tǒng)對(duì)應(yīng)用程序中寬度高度等長度進(jìn)行兼容性轉(zhuǎn)化，在Retina屏中，1像素的高度自動(dòng)轉(zhuǎn)換為2個(gè)物理像素的高度；這樣App應(yīng)用程序可以透明地適配兩種屏幕。對(duì)于UI界面要求極高的Ios系統(tǒng)，2個(gè)物理像素高度的分割線減低了顯示的視覺效果，但是在Ios7之前，css是不支持0.5px的。為了在Retina高清顯示屏顯示1個(gè)物理像素高度的分割線，需要先做一個(gè)高度為4px的背景圖片，圖片中間的2個(gè)像素為分割線的顏色；把高度壓縮成2個(gè)像素進(jìn)行拉伸，指定圖片的border-width的1px，即可實(shí)現(xiàn)1個(gè)物理像素高度。

圖2 通過Canvas截取的屏幕

4 防止重復(fù)觸發(fā)

在Android平臺(tái)上， 使用HTML5進(jìn)行開發(fā)時(shí)，經(jīng)常會(huì)遇到手指點(diǎn)擊一下，被點(diǎn)擊的控件綁定的事件會(huì)被連續(xù)觸發(fā)兩次，或者在本頁面點(diǎn)擊按鈕，頁面跳轉(zhuǎn)到下個(gè)頁面時(shí)，下個(gè)頁面的該位置的控件也被觸發(fā)了。比如在頁面上實(shí)現(xiàn)一個(gè)開關(guān)，如果點(diǎn)擊一次觸發(fā)兩次，無論如何點(diǎn)擊，開關(guān)的狀態(tài)永遠(yuǎn)不會(huì)變化。這種現(xiàn)象出現(xiàn)的原因是部分Android設(shè)備對(duì)HTML5的支持有缺陷，手指點(diǎn)擊屏幕的時(shí)候，確實(shí)觸發(fā)了兩次，或者在一段時(shí)間內(nèi)，不斷地觸發(fā)事件。這種問題通過設(shè)置全局變量，記錄點(diǎn)擊是否已經(jīng)觸發(fā)事件，如果已經(jīng)觸發(fā)事件，就忽略此次點(diǎn)擊，實(shí)現(xiàn)方法如下：

var taping = false;

function tapRespondEvent() {

if(taping) return false;

taping = true;

setTimeout(function(){

taping = false;

}, 防止重復(fù)點(diǎn)擊時(shí)間閥值，一般為300 ms);

正常業(yè)務(wù)邏輯處理；

}

5 導(dǎo)航欄和Tab欄

導(dǎo)航欄位于屏幕的上邊緣，在狀態(tài)欄之下，基本始終可見。在導(dǎo)航欄的中間通常顯示這一頁標(biāo)題；當(dāng)在頁面之間切換時(shí)，可以點(diǎn)擊導(dǎo)航欄左邊的返回按鈕返回到上一頁；在導(dǎo)航欄的右邊，有時(shí)放置用于管理當(dāng)前頁面的控件。Tab欄位于屏幕的最底部，基本始終可見。Tab欄用于切換子任務(wù)、視圖和功能，當(dāng)點(diǎn)擊某個(gè)Tab時(shí)，頁面切換到對(duì)應(yīng)的頁面，當(dāng)前Tab背景亮起，Tab的內(nèi)容字體和圖片高亮。導(dǎo)航欄和Tab欄都是原生開發(fā)的標(biāo)準(zhǔn)控件，只需要將控件放置在對(duì)應(yīng)位置就好了。

對(duì)于HTML5頁面，元素之間的位置相對(duì)固定；位于頁面頂部的導(dǎo)航欄，如果頁面向上滑動(dòng)，導(dǎo)航欄也會(huì)隨著頁面的向上滑動(dòng)逐漸消失在頂部；Tab欄開始會(huì)隱藏在頁面的最下面，只有將整個(gè)頁面滑到最上面才能看到Tab欄。導(dǎo)航欄和Tab欄使用頻繁，這種顯示對(duì)于用戶操作極不方便，而且不符合用戶的使用習(xí)慣。

要實(shí)現(xiàn)和原生導(dǎo)航欄和Tab欄一樣的顯示狀態(tài)，始終位于屏幕最上邊和最下邊，而不是位于頁面的最上邊和最下邊；需要先阻止系統(tǒng)的滑動(dòng)方法，定義自己的滑動(dòng)方法。

對(duì)于每次頁面的上下滑動(dòng)，首先判斷元素是否是固定在屏幕的某個(gè)位置，如果是該元素保持位置不動(dòng)；如果判斷該元素可以滑動(dòng)，計(jì)算滑動(dòng)的距離，然后移動(dòng)該元素。

由于導(dǎo)航欄和Tab欄的存在占用屏幕的上邊和下邊的范圍，計(jì)算屏幕其余范圍內(nèi)顯示的內(nèi)容位置和高度時(shí)，需要減去導(dǎo)航欄和Tab欄高度，避免出現(xiàn)顯示內(nèi)容被導(dǎo)航欄和Tab欄遮擋住、怎么滑動(dòng)都顯示不出來。

軟鍵盤彈出時(shí)也需要進(jìn)行特殊處理。在用戶點(diǎn)擊輸入框輸入數(shù)據(jù)時(shí)，系統(tǒng)在底部彈出軟鍵盤的同時(shí)，會(huì)判斷當(dāng)前輸入框是否會(huì)被軟鍵盤擋?。蝗绻麖棾龅逆I盤擋住了輸入框的內(nèi)容，在輸入數(shù)據(jù)時(shí)不能正常顯示輸入的內(nèi)容，系統(tǒng)會(huì)自動(dòng)把頁面滑動(dòng)到合適的位置。在彈出軟鍵盤頁面自動(dòng)向上滑動(dòng)時(shí)，導(dǎo)航欄也隨著頁面向上滑動(dòng)而被遮住部分或者全部。

為了阻止導(dǎo)航欄也向上滑動(dòng)，需要在用戶點(diǎn)擊輸入框時(shí)，預(yù)先計(jì)算出頁面需要向上滑動(dòng)的高度，將頁面先滑動(dòng)到合適的高度，隨后系統(tǒng)彈出軟鍵盤時(shí)，頁面就不會(huì)再向上滑動(dòng)了。如果遇到輸入框是這個(gè)頁面最后一行的情況，預(yù)先向上滑動(dòng)時(shí)，由于下面已經(jīng)沒有內(nèi)容了，頁面是滑動(dòng)不上去的，但是在彈出軟鍵盤時(shí)，頁面卻會(huì)向上滑動(dòng)，導(dǎo)航欄就又被遮擋住了；為了避免出現(xiàn)這種情況，需要先計(jì)算輸入框需要滑動(dòng)的合適位置，在輸入框下面先補(bǔ)上對(duì)應(yīng)高度的空白元素，再主動(dòng)向上滑動(dòng)頁面；最后輸入完數(shù)據(jù)，軟鍵盤消失后，把補(bǔ)上的空白元素從頁面刪除。

6 結(jié)束語

手機(jī)售票系統(tǒng)于2013年底成功上線運(yùn)行，目前日活躍用戶300萬以上，高峰日售票量210多萬張[3]，手機(jī)售票上線當(dāng)日即排在蘋果App Store免費(fèi)榜第1名，手機(jī)售票2.0版上線后，被蘋果App Store評(píng)為優(yōu)秀新App；手機(jī)售票Android用戶量也很大，基本是Ios版本用戶量的兩倍。采用HTML5開發(fā)的手機(jī)售票雖然方便了旅客購票，獲得了大家的認(rèn)可；仍然存在有很多不足的地方。

由于導(dǎo)航欄和Tab欄的影響，頁面的上下滑動(dòng)效果比原生的滑動(dòng)效果要差一些；頁面切換無法做出和原生開發(fā)一樣的動(dòng)畫效果；由于HTML5的限制，用戶交互的許多效果都會(huì)受到限制。為此，在目前研究的基礎(chǔ)上，既要加強(qiáng)對(duì)HTML5本身開發(fā)的優(yōu)化和改進(jìn)，又要加強(qiáng)HTML5與本地原生方法之間調(diào)用的研究實(shí)現(xiàn)，做出更方便使用、交互效果更好、用戶體驗(yàn)更好的應(yīng)用。

[1]王明哲，張振利，徐 彥，等.鐵路互聯(lián)網(wǎng)售票系統(tǒng)的研究與實(shí)現(xiàn)[J].鐵路計(jì)算機(jī)應(yīng)用，2012，21（4）：23-39.

[2]中國互聯(lián)網(wǎng)信息中心. 中國互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計(jì)報(bào)告[R].中國互聯(lián)網(wǎng)信息中心，2015，7.

[3]中國鐵道科學(xué)研究院電子計(jì)算技術(shù)研究所. 2015年客票系統(tǒng)運(yùn)行情況日?qǐng)?bào)[R].中國鐵道科學(xué)研究院電子計(jì)算技術(shù)研究所，2015，08.

責(zé)任編輯 徐侃春

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

中國鐵道科學(xué)研究院基金（1151GC0503）。

邢國軍，助理研究員；周自昌，工程師。