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

滕毅，馬焯文

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

0 引言

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3 系統(tǒng)功能

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

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

3.2 小程序端功能

3.2.1 用戶首頁功能

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

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

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

圖5 小程序首頁

圖6 拼單廣場(chǎng)頁

3.2.2 個(gè)人中心頁功能

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

圖7 個(gè)人中心頁、個(gè)人信息頁

3.3 管理端功能

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

圖8 管理端首頁

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

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

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

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

圖10 用戶角色頁

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

4 結(jié)論

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