基于Uniapp的校園拼車多端小程序設(shè)計與實現(xiàn)

滕毅，馬焯文

( 廣東第二師范學(xué)院 計算機學(xué)院, 廣東廣州, 510303)

0 引言

在城市現(xiàn)代化建設(shè)的浪潮下，人們對“共享經(jīng)濟”消費觀念逐漸發(fā)生轉(zhuǎn)變，在道路資源不足而引發(fā)的交通阻塞等問題的大環(huán)境背景下，“拼車出行”逐漸轉(zhuǎn)變成移動互聯(lián)網(wǎng)時代下引領(lǐng)的現(xiàn)代化出行新方式[1]。國外如美國、德國、日本、法國及歐洲等西歐國家大力推行私家車合乘制，以及交通政策的鼓勵支持，當(dāng)下國外拼車市場的發(fā)展已經(jīng)趨于成熟階段[2]。國內(nèi)的網(wǎng)約車市場也憑借著這個大趨勢風(fēng)口涌現(xiàn)出了一批優(yōu)質(zhì)的拼車平臺應(yīng)用。但對于校園師生用戶而言，仍然存在著不足之處。其主要體現(xiàn)在線上拼車平臺數(shù)量眾多，搭乘的群體多元化，無法實現(xiàn)合理高效地利用網(wǎng)約車資源，從而導(dǎo)致拼車成功率低。應(yīng)用市場中絕大多數(shù)的關(guān)于校園拼車平臺的設(shè)計僅僅是基于 APP 端 、Web 網(wǎng)頁端或單一的小程序端，雖然這些產(chǎn)品的出現(xiàn)從一定程度上滿足了校園用戶的拼車需求，但仍然無法解決用戶所處網(wǎng)絡(luò)環(huán)境不一致而導(dǎo)致拼車成功率低的痛點現(xiàn)狀。本文主要針對同校師生用戶群體，在現(xiàn)有的眾多拼車應(yīng)用提供優(yōu)質(zhì)拼車出行服務(wù)的基礎(chǔ)上，設(shè)計并實現(xiàn)一款實時撮合線下拼車活動的跨用戶端小程序[3]，尤其適合在校園不同校區(qū)之間的師生拼車平臺，以滿足同校師生線上拼車的需求。

1 業(yè)務(wù)流程

(1)發(fā)起順風(fēng)車活動流程：在教師身份信息認證成功條件下，教師用戶自駕車空載且主動發(fā)起順風(fēng)車活動。教師用戶選擇出發(fā)點和目的地具體地址，完善已有乘車人數(shù)、車牌號、出發(fā)時間等信息，選擇教師順風(fēng)車類型進行訂單發(fā)布，發(fā)布成功后，頁面跳轉(zhuǎn)至拼單廣場頁。

(2)發(fā)起拼車活動流程：在個人實名認證信息已完善的條件下，學(xué)生、教師用戶主動發(fā)起拼車活動學(xué)生、教師用戶選擇出發(fā)點和目的地具體地址，完善已有乘車人數(shù)、車牌號、出發(fā)時間等信息，選擇約拼類型進行訂單發(fā)布，發(fā)布成功后，頁面跳轉(zhuǎn)至拼單廣場頁。

(3)參與拼車活動流程：在個人實名認證信息已完善，拼單廣場已有待拼車訂單的條件下，學(xué)生、教師用戶制動尋找拼車訂單。學(xué)生、教師用戶在拼單廣場頁檢索符合條件的待拼車訂單，選擇某一訂單，并完善參與拼車人數(shù)信息，參與拼車活動成功，訂閱消息通知原訂單發(fā)起用戶。

2 系統(tǒng)設(shè)計

2.1 系統(tǒng)架構(gòu)

目標系統(tǒng)的功能層次劃分主要依據(jù)了 Model-View-Controller分層架構(gòu)的規(guī)范設(shè)計風(fēng)格，使用Vue.js 框架處理前端數(shù)據(jù)的前提下，對目標系統(tǒng)進行前后端分離開發(fā)，使得目標系統(tǒng)功能模塊之間的耦合度大大降低[4]。

目標系統(tǒng)依據(jù) MVC 分層架構(gòu)風(fēng)格進行劃分，分為資源層、服務(wù)層、訪問層和訪問終端。資源層為系統(tǒng)業(yè)務(wù)數(shù)據(jù)管理操作提供基礎(chǔ)服務(wù)；服務(wù)層負責(zé)根據(jù)業(yè)務(wù)場景進行相應(yīng)的業(yè)務(wù)邏輯操作；訪問層負責(zé)控制系統(tǒng)接口的請求調(diào)用或轉(zhuǎn)發(fā)等操作；訪問終端負責(zé)與用戶進行數(shù)據(jù)交互與展示。

圖1 校園拼車小程序客戶端流程圖

圖2 MVC架構(gòu)描述

2.2 開發(fā)環(huán)境

本文目標系統(tǒng)設(shè)計中，編程語言主要使用的是Java Script，數(shù)據(jù)庫采用MySQL8.09版本，CentOS7作為開發(fā)系統(tǒng)服務(wù)器。前端框架采用Uniapp、ElementUi、Vue.js，后端框架采用 SpringBoot2.4.4版本，最后在IDEA中集成。

Uniapp是一款以Vue.js 為開發(fā)基礎(chǔ)的多平臺適配前端框架，開發(fā)者僅需遵循開發(fā)規(guī)范，便可實現(xiàn)一套代碼、多平臺運行的需求，極大簡化了目標系統(tǒng)多平臺適配的工作量[13]。在系統(tǒng)設(shè)計中主要運用 Uniapp 框架作為UI界面開發(fā)的基礎(chǔ)框架開發(fā)一套兼容適配與 QQ 小程序 和微信小程序的目標系統(tǒng)小程序。

圖3 系統(tǒng)架構(gòu)圖

3 系統(tǒng)功能

3.1 系統(tǒng)總體功能

系統(tǒng)分為兩個部分：小程序端和管理端。小程序端的目標群體是校園師生用戶，提供線上預(yù)約拼車活動的撮合服務(wù)；管理端的目標群體是管理員，主要提供與系統(tǒng)業(yè)務(wù)相關(guān)的圖表與數(shù)據(jù)的管理服務(wù)。小程序端包含三個主頁：首頁、拼單廣場頁和個人中心頁。管理端包含了五大主要頁面：首頁、權(quán)限管理、數(shù)據(jù)圖表、數(shù)據(jù)管理和登錄頁。

3.2 小程序端功能

3.2.1 用戶首頁功能

用戶授權(quán)獲取地理信息后，實時顯示用戶所在地理位置坐標，填寫完整相應(yīng)的乘車人數(shù)、車牌信息以及選取好行程的起始點即可點擊“發(fā)起約拼”或“教師順風(fēng)”按鈕進行相應(yīng)拼車類型的發(fā)布。首頁能夠分別跳轉(zhuǎn)至起始點和目的地地址選址頁面，用戶輸入地點關(guān)鍵字，系統(tǒng)將根據(jù)用戶輸入顯示相應(yīng)的推薦地址坐標項，點擊某一地址坐標項即可完成地址選取，并返回首頁頁面。用戶選取拼車訂單的出發(fā)時間，點擊“確認發(fā)布”按鈕后，將顯示訂單提交成功的提示反饋，并在用戶確認后跳轉(zhuǎn)至 “拼單廣場頁”。

拼單廣場頁所顯示的信息項為處于等待拼車狀態(tài)且未超過預(yù)約出發(fā)時間的訂單列表，用戶能夠通過選擇某一訂單跳轉(zhuǎn)至相應(yīng)訂單詳情頁。在訂單詳情頁中會顯示對應(yīng)訂單的詳情信息，用戶通過僅需輸入?yún)⑴c該拼車訂單的乘客人數(shù)，點擊“確認”按鈕即可參與該拼車活動，界面顯示成功提示反饋，若該拼車訂單已經(jīng)滿座，則會從拼單廣場的訂單列表中刪除。

圖4 校園拼車小程序端、管理端界面結(jié)構(gòu)

圖5 小程序首頁

圖6 拼單廣場頁

3.2.2 個人中心頁功能

個人中心頁提供了全部訂單頁、個人信息頁、意見反饋頁和版本信息頁的入口選項，通過點擊“授權(quán)登錄”按鈕，系統(tǒng)將詢問用戶是否授權(quán)獲取用戶基本信息，確認授權(quán)后將成功登錄，并展示相應(yīng)的用戶頭像的賬戶名。在個人中心頁登錄后，可查看全部訂單頁、個人信息頁、意見反饋頁、版本信息頁。在個人信息頁面中，頁面顯示為用戶個人實名認證信息項，有兩種身份類別：學(xué)生和教師。用戶能夠完善相應(yīng)信息項進行修改操作，信息完善后方可進行拼車活動。

圖7 個人中心頁、個人信息頁

3.3 管理端功能

管理端首頁主要提供了用戶端最近時段的實時數(shù)據(jù)展示以及平臺用戶量、歷史訂單量、年級分布、平臺端和用戶身份類別等數(shù)據(jù)。

圖8 管理端首頁

(1)權(quán)限管理模塊：包括角色權(quán)限和用戶角色頁，超級管理員能夠新增、編輯和刪除角色與權(quán)限的對應(yīng)關(guān)系，即哪種角色擁有哪些頁面權(quán)限以及用戶擁有哪種角色身份。

(2)數(shù)據(jù)圖表模塊：包括歷史訂單類別統(tǒng)計頁和歷史訂單狀態(tài)統(tǒng)計頁，所有管理員均可以查看。

(3)數(shù)據(jù)圖表模塊：包括訂單管理頁和用戶管理頁，僅超級管理員能夠操作，當(dāng)出現(xiàn)錯誤訂單數(shù)據(jù)的時候，能夠?qū)⒂唵蝿h除，能夠執(zhí)行修改和刪除用戶信息的操作。

圖9 角色權(quán)限頁

圖10 用戶角色頁

圖11 數(shù)據(jù)圖表模塊頁

4 結(jié)論

本文所設(shè)計的小程序，使用Uniapp響應(yīng)式前端框架所研發(fā)，成功實現(xiàn)了一套代碼兼容適配QQ 小程序和微信小程序的拼車小程序。小程序擁有的教師順風(fēng)車和拼車約單功能，貼切解決跨校區(qū)校園用戶拼車平臺不一致、安全性保證等痛點需求，滿足同校校園師生的拼車出行需求，但在一些問題上尚有欠缺，例如對于個人信息的保密性風(fēng)險問題尚未得到針對性的解決方案，以及目標系統(tǒng)中關(guān)于地理位置獲取的精度尚未達到精準定位的水平，使得用戶的實際使用體驗會與開發(fā)預(yù)期達到效果有一定的落差。因此接下來將針對用戶信息進行有效的加密存儲，同時將從用戶體驗的角度出發(fā)，進一步提升系統(tǒng)的性能，完善業(yè)務(wù)功能邏輯。