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

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

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

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

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

文章編號(hào)：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 引言

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.1服務(wù)器的選取

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

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

數(shù)據(jù)庫(kù)管理系統(tǒng)（DBMS）選擇關(guān)系型數(shù)據(jù)庫(kù)MySQL以及它的可視化工具navicat for mysql。MySQL支持5000萬(wàn)條記錄的數(shù)據(jù)倉(cāng)庫(kù)，在中小型數(shù)據(jù)庫(kù)中，這樣的容量存儲(chǔ)校車的班車信息和學(xué)生信息絕對(duì)夠用了。MySQL有著優(yōu)秀的跨平臺(tái)性和可移植性，它適應(yīng)所有的平臺(tái)。MySQL因?yàn)槭情_源的，所以支持任意修改，也就是說(shuō)可以去除我們不需要的功能，從而簡(jiǎ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啟動(dòng)時(shí)，Servlet查找對(duì)應(yīng)的配置文件web.xml，并根據(jù)配置文件創(chuàng)建實(shí)例;Servlet被實(shí)例化后，tomcat將調(diào)用init（）方法為實(shí)例初始化;初始化后，當(dāng)小程序的請(qǐng)求到來(lái)時(shí)，服務(wù)器創(chuàng)建一個(gè)請(qǐng)求對(duì)象和一個(gè)響應(yīng)對(duì)象。每一個(gè)Servlet的請(qǐng)求都會(huì)產(chǎn)生一個(gè)Request對(duì)象，Servlet給小程序的響應(yīng)由一個(gè)Response對(duì)象完成，這兩個(gè)對(duì)象以參數(shù)的形式傳遞給service（）方法。在service（）方法內(nèi)，對(duì)小程序的請(qǐng)求方式進(jìn)行判斷，如果是以GET方法提交，則調(diào)用doGET（）方法處理請(qǐng)求，如果是以POST方法提交的，則調(diào)用doPOST（）方法處理請(qǐng)求。對(duì)于訂座系統(tǒng)，服務(wù)器的主要功能是對(duì)數(shù)據(jù)庫(kù)的操作及對(duì)臨界資源的管理。對(duì)POST請(qǐng)求，doPOST（）方法是對(duì)數(shù)據(jù)庫(kù)進(jìn)行插入或刪除操作，通過(guò)調(diào)用JDBC API對(duì)數(shù)據(jù)庫(kù)連接并修改數(shù)據(jù)庫(kù)的數(shù)據(jù)。同時(shí)，也是通過(guò)調(diào)用JDBC API 在doGET（）方法中對(duì)數(shù)據(jù)庫(kù)進(jìn)行查詢并獲取查詢的數(shù)據(jù)，返回到客戶端。

4 結(jié)束語(yǔ)

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

參考文獻(xiàn)：

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

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

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

[4] 李剛. 輕量級(jí)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)編輯：王力】