基于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）。

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