基于微信開發(fā)的校車訂座小程序的設(shè)計(jì)

陳騰輝 褚小停 陳啟帆 袁鴻燕

摘要：校車是校區(qū)間通勤的主要交通工具，對其科學(xué)合理地調(diào)度很重要。該文對校車訂座微信小程序的開發(fā)進(jìn)行了設(shè)計(jì)，實(shí)現(xiàn)了校車管理的信息化，分為日常線與假日線，高效實(shí)現(xiàn)了提高校車的利用率、降低運(yùn)營成本、倡導(dǎo)低碳生活的目標(biāo)。

關(guān)鍵詞：微信小程序;校車;訂座

中圖分類號：G434? ? ? ? 文獻(xiàn)標(biāo)識碼：A

文章編號：1009-3044（2019）19-0073-03

Abstract：School bus is the main means of transportation for commuting between schools， and it is very important for its scientific and reasonable dispatch. This paper designs the development of the school bus booking micro-message program， realizes the informationization of school bus management， divides it into daily line and holiday line， effectively realizes the goal of improving the utilization rate of school bus， reducing operating costs and advocating low-carbon life.

Key words：Wechat;School Bus; Seat Reservation

1 引言

近百年來，人類科技文明的進(jìn)步使人類生活發(fā)生了巨大變革，在享受現(xiàn)代科技生活的同時，全球變暖成為懸在人類文明上方的達(dá)摩克利斯之劍。中國政府經(jīng)過多年的努力，使得環(huán)保觀念深入人心，但霧霾的大面積爆發(fā)，機(jī)動車保有量的連年攀升為綠色生活再次蒙上面紗。為了解決此類問題，綠色出行成為近年來人們眼中的焦點(diǎn)。以O(shè)FO為代表的共享單車和以滴滴為代表的快速出行為汽車減排發(fā)展提供了巨大助力。經(jīng)過我們團(tuán)隊(duì)一段時間對校區(qū)之間運(yùn)營校車的觀察，入座率呈現(xiàn)嚴(yán)重的兩極分化，造成極大的資源浪費(fèi)，故而我們萌生制作一套管理系統(tǒng)以期實(shí)現(xiàn)提高校車的利用率、降低運(yùn)營成本、倡導(dǎo)低碳生活的目標(biāo)。

隨著i0S、安卓等智能化手機(jī)系統(tǒng)的迅速發(fā)展而發(fā)展起來的APP，不斷改善著智能終端的移動化應(yīng)用功能。如今的市場已進(jìn)入到“互聯(lián)網(wǎng)+”，用戶紅利逐漸退去，從現(xiàn)有的用戶身上挖掘價(jià)值、進(jìn)行業(yè)界的深度融合成了“互聯(lián)網(wǎng)+”的全新發(fā)展思路，擁有8.46多億用戶口的微信無疑是眾多社交APP的領(lǐng)跑者，它的每一次功能升級和服務(wù)創(chuàng)新，都直接牽動著億萬用戶的使用體驗(yàn)?zāi)酥辽罘绞?，同時改變著內(nèi)容生產(chǎn)、創(chuàng)意營銷、消費(fèi)支付等幾乎所有的互聯(lián)網(wǎng)業(yè)態(tài)。

小程序看起來像程序，但實(shí)際上它們是一種新的應(yīng)用程序組織形式，比我們現(xiàn)有的任何應(yīng)用程序都更靈活和更易訪問。它不僅能實(shí)現(xiàn)應(yīng)用觸手可及的夢想，還能很好地體現(xiàn)用完即走的理念，用戶只要掃一掃或者搜一下就能直接打開應(yīng)用，獲取服務(wù)。

2 微信小程序頁面開發(fā)

2.1功能設(shè)計(jì)

我們把小程序的功能分為兩大塊，第一模塊為車票的查詢與出售，考慮到學(xué)校既有校區(qū)與校區(qū)之間的日常線路，也有在周末或節(jié)假日開往火車站或汽車站的線路，針對這兩種情況，我們專門把校車分為兩種線路：日常線與假日線，方便了師生的查詢，以免混淆。

對于日常線（校區(qū)之間）的特殊運(yùn)營，我們團(tuán)隊(duì)特別設(shè)計(jì)一項(xiàng)電子乘車卡，學(xué)生在程序上預(yù)約申請后，系統(tǒng)將生成一張電子票。經(jīng)后臺審核后，系統(tǒng)自動將該電子票轉(zhuǎn)換為電子乘車卡，并將該卡的狀態(tài)轉(zhuǎn)化為可使用。為了提高用戶對程序使用的簡易度及程序頁面的簡潔度，把未使用的電子乘車卡與已使用的電子乘車卡合而為一，在乘車卡包里，把所有的乘車卡（包括已失效以及將要使用）進(jìn)行虛化處理。在距離校車發(fā)車前1小時，系統(tǒng)會將該時段預(yù)約成功的電子乘車卡實(shí)化，用于展示。當(dāng)距離發(fā)車時間僅剩10分鐘時，系統(tǒng)會再次將該卡片虛化，并顯示該卡的狀態(tài)為已失效。無論是否登上校車，該電子乘車卡都將永遠(yuǎn)虛化（即永遠(yuǎn)無法使用）。我們將歷史記錄與乘車卡合并，既方便用戶瀏覽查詢，也減少了用戶對頁面的切換率，大大提高了用戶的便捷度。

對于假日線，我們將與校方自管會合作，由自管會方面發(fā)布假日開往火車站和汽車站的線路及乘車時間，學(xué)生可在應(yīng)用上查詢相應(yīng)的線路，并在應(yīng)用上實(shí)現(xiàn)預(yù)支付?？紤]到原計(jì)劃開通的線路會因?yàn)樯献蕟栴}而無法開通，在程序設(shè)計(jì)上，允許自管會提前24小時取消該線路并實(shí)現(xiàn)退款。對于車票發(fā)放問題我們采取日常線的管理機(jī)制。對于已取消的線路，如果用戶預(yù)支付成功，系統(tǒng)將會保留該記錄，并將該卡的狀態(tài)顯示為已取消。

第二模塊為用戶信息模塊。在此頁面中，用戶可以查詢自己的乘車卡包亟待審卡。針對用戶信息，我們將采取微信號、學(xué)號和手機(jī)號相關(guān)聯(lián)的模式，以學(xué)號為基本信息進(jìn)行乘車卡的申請及假日校車線路的預(yù)定購買。

對于管理端，我們開發(fā)了兩個管理端，一個是校車管理端，對日常線的審核及電子乘車卡的發(fā)放;第二個管理端是對特定的自管會管理人員開放，用于對假日線的發(fā)布、取消、退款及各線路的預(yù)定人數(shù)統(tǒng)計(jì)。下一步，我們計(jì)劃將學(xué)生的注冊信息與校方相結(jié)合，對日常線的審核，將采取層次篩選，對于學(xué)生提出的校車申請，先由班長審核，再由輔導(dǎo)員審核，通過后，才提交給管理員進(jìn)行座位的安排與電子乘車卡的發(fā)放。這樣將大大減少學(xué)生惡作劇的出現(xiàn)，也減少審核老師的工作負(fù)擔(dān)。

2.2程序設(shè)計(jì)

JavaScript是開發(fā)小程序頁面的主要語言，小程序的開發(fā)與普通網(wǎng)頁的開發(fā)非常相似，但兩者之間仍存在一些差異。網(wǎng)頁開發(fā)渲染線程和腳本是互斥的，這也是為什么長時間的腳本運(yùn)行可能會導(dǎo)致頁面失去響應(yīng)，而在小程序中，兩者是分開的，分別運(yùn)行在不同的線程中。正因如此，邏輯層運(yùn)行在JSCore中，并沒有一個完整的瀏覽器對象，所以導(dǎo)致了普通網(wǎng)頁開發(fā)中的BOM API和DOM API缺失，從而一些非常熟悉的庫例如jQuery、Zepto等，在小程序中是無法運(yùn)行的。小程序是由網(wǎng)頁開發(fā)衍生而來的，網(wǎng)頁編程采用的是HTML&CSS&JavaScript這樣的組合，在小程序中有同樣的角色：WXML&WXSS&JavaScript。本程序的頁面設(shè)計(jì)也是圍繞這三者進(jìn)行編程。WXML是用來描述當(dāng)前頁面的結(jié)構(gòu)，WXSS用來描述頁面樣子，JS通常用來處理頁面和用戶之間的交互。

本程序有4個基礎(chǔ)頁面，用戶登錄后進(jìn)入的是第一個頁面是“搜索頁面”，用swiper組件分化日常線和假日線的查詢，方便了用戶使用也減少了頁面替換。在日常線的swiper-item子組件中，通過在WXSS設(shè)計(jì)的transform屬性和在JS 中設(shè)計(jì)中間圖標(biāo)的點(diǎn)擊事件來切換校區(qū)之間的往來。在日期選擇設(shè)計(jì)上使用picker-view（嵌入頁面的滾動選擇器），讓用戶有一個不一樣的體驗(yàn)。當(dāng)?shù)攸c(diǎn)與日期選擇設(shè)計(jì)完畢后，用botton組件設(shè)計(jì)查詢按鈕，在JS中添加botton的點(diǎn)擊事件，調(diào)用微信提供的頁面跳轉(zhuǎn)API：wx.navigaTo進(jìn)行頁面跳轉(zhuǎn)進(jìn)入第二個頁面——“查詢頁面”?？紤]到日常線需要申請且不需要支付，假日線需要預(yù)支付，在botton的點(diǎn)擊事件中我們調(diào)用數(shù)據(jù)緩存API：wx.setStorageSync，在第二頁的onLoad中調(diào)用讀取緩存API：wx.getStorageSync判別緩存中數(shù)據(jù)的值，從而對兩種線路進(jìn)行區(qū)分。不僅如此，我們還需要用該判別的值在第二頁的WXML中進(jìn)行條件渲染，通過條件渲染wx：if來渲染出對應(yīng)的查詢結(jié)果子項(xiàng)，假日線的子項(xiàng)數(shù)目及內(nèi)容均由管理端進(jìn)行發(fā)布，上傳到服務(wù)器，在JS文件中進(jìn)行數(shù)據(jù)下載而來。在每一子項(xiàng)中設(shè)置申請（支付）按鈕，用于跳轉(zhuǎn)至車票詳情頁面（第三頁），申請內(nèi)容將通過上傳API上傳至服務(wù)器，支付頁面則調(diào)用微信的支付API。在app.json文件中設(shè)置tabBar屬性來添加底部導(dǎo)航欄，在導(dǎo)航項(xiàng)為兩項(xiàng)：首頁和第四頁——“用戶信息”。在用戶信息頁面中，可以查看所有的電子乘車卡及申請記錄。電子乘車卡無論是否用過都進(jìn)行虛化處理，在JS文件中通過調(diào)用Date（）對象獲取當(dāng)前系統(tǒng)時間，通過系統(tǒng)時間與乘車卡上的時間比較，如果在-30min～20min的范圍內(nèi)，則將電子乘車卡去掉虛化背景且日常線的頂邊為紅色，假日線的頂邊為藍(lán)色。在申請記錄里記錄著申請審核中、申請失敗、假日線被取消等記錄。

3 服務(wù)后端開發(fā)

3.1服務(wù)器的選取

Apache tomcat作為著名的Servlet容器實(shí)現(xiàn)以及輕量級JAVA應(yīng)用服務(wù)器，是Apache軟件基金會的頂級項(xiàng)目。它開源、輕量，與JBoss、Weblogic等企業(yè)級應(yīng)用服務(wù)器相比，占用資源小，擴(kuò)展性好，尤其是在當(dāng)前主流的基于POPO（WithoutEJB）的輕量級編程方式下構(gòu)建服務(wù)器系統(tǒng)。

3.2數(shù)據(jù)庫管理系統(tǒng)的選取

數(shù)據(jù)庫管理系統(tǒng)（DBMS）選擇關(guān)系型數(shù)據(jù)庫MySQL以及它的可視化工具navicat for mysql。MySQL支持5000萬條記錄的數(shù)據(jù)倉庫，在中小型數(shù)據(jù)庫中，這樣的容量存儲校車的班車信息和學(xué)生信息絕對夠用了。MySQL有著優(yōu)秀的跨平臺性和可移植性，它適應(yīng)所有的平臺。MySQL因?yàn)槭情_源的，所以支持任意修改，也就是說可以去除我們不需要的功能，從而簡化MySQL，提高速度。

3.3服務(wù)器設(shè)計(jì)

Servlet程序是由服務(wù)器調(diào)用和執(zhí)行的Java類，運(yùn)行在服務(wù)器中的Servlet是服務(wù)器進(jìn)程的一部分，服務(wù)器負(fù)責(zé)Servlet的生命周期。當(dāng)tomcat啟動時，Servlet查找對應(yīng)的配置文件web.xml，并根據(jù)配置文件創(chuàng)建實(shí)例;Servlet被實(shí)例化后，tomcat將調(diào)用init（）方法為實(shí)例初始化;初始化后，當(dāng)小程序的請求到來時，服務(wù)器創(chuàng)建一個請求對象和一個響應(yīng)對象。每一個Servlet的請求都會產(chǎn)生一個Request對象，Servlet給小程序的響應(yīng)由一個Response對象完成，這兩個對象以參數(shù)的形式傳遞給service（）方法。在service（）方法內(nèi)，對小程序的請求方式進(jìn)行判斷，如果是以GET方法提交，則調(diào)用doGET（）方法處理請求，如果是以POST方法提交的，則調(diào)用doPOST（）方法處理請求。對于訂座系統(tǒng)，服務(wù)器的主要功能是對數(shù)據(jù)庫的操作及對臨界資源的管理。對POST請求，doPOST（）方法是對數(shù)據(jù)庫進(jìn)行插入或刪除操作，通過調(diào)用JDBC API對數(shù)據(jù)庫連接并修改數(shù)據(jù)庫的數(shù)據(jù)。同時，也是通過調(diào)用JDBC API 在doGET（）方法中對數(shù)據(jù)庫進(jìn)行查詢并獲取查詢的數(shù)據(jù)，返回到客戶端。

4 結(jié)束語

正式發(fā)布的微信小程序已在改變著“互聯(lián)網(wǎng)+”生態(tài)，借助這一眾創(chuàng)平臺來重新定義服務(wù)路徑、獲取流量紅利。校車訂座方式的信息化也是校車發(fā)展歷程中的必經(jīng)之路。在實(shí)施期間遇到的困擾仍需與學(xué)校相關(guān)部門進(jìn)一步交流合作，規(guī)避校車訂座所帶來的不利因素，充分發(fā)揮其有利的各個方面。

參考文獻(xiàn)：

[1] 劉光瑞. Tomcat架構(gòu)解析[M].北京：人民郵電出版社，2017.

[2] 王珊，薩師煊.數(shù)據(jù)庫系統(tǒng)概論[M].北京：高等教育出版社，2014.

[3] 史勝輝，王春明，沈?qū)W華. Java EE基礎(chǔ)教程[M].北京：清華大學(xué)出版社，2010.

[4] 李剛. 輕量級Java EE企業(yè)應(yīng)用實(shí)戰(zhàn)[M].北京：電子工業(yè)出版社，2014.

[5] 微信小程序開發(fā)者文檔[EB/OL]. https：//developers.weixin.qq.com/miniprogram/dev/index.html.

【通聯(lián)編輯：王力】