基于uni-app 的場館預(yù)約微信小程序的設(shè)計與開發(fā)

周 建 輝

（江蘇工程職業(yè)技術(shù)學(xué)院，南通 226006）

場館預(yù)約[1]是人們生活和工作的現(xiàn)實需求，便于用戶操作和使用的場館預(yù)約系統(tǒng)會大大提高場館的利用率，也能避免用戶浪費大量的等待時間。場館預(yù)約系統(tǒng)可以使用計算機端網(wǎng)頁、手機端應(yīng)用程序或小程序?qū)崿F(xiàn)，計算機端網(wǎng)頁不僅需要考慮設(shè)備的兼容性，還不夠便捷。手機端應(yīng)用程序?qū)崿F(xiàn)方式不僅需要用戶下載，還需針對不同手機系統(tǒng)開發(fā)出多種版本。小程序是一種不需要下載就可以使用的應(yīng)用程序，很多知名企業(yè)都推出了開發(fā)小程序的技術(shù)框架，其中微信小程序[2]最為流行。本文根據(jù)某籃球場館的預(yù)約需求，基于SpringBoot 和uni-app 技術(shù)進行微信小程序的設(shè)計、開發(fā)和測試發(fā)布。SpringBoot[3]基于Spring 開發(fā)，采用約定大于配置的方式，以快速創(chuàng)建獨立運行的Spring 項目。uni-app[4]是一款使用Vue.js 開發(fā)所有前端應(yīng)用的框架，開發(fā)者編寫一套代碼，可發(fā)布到iOS、Android、Web、各種小程序（微信、支付寶、百度、頭條、飛書、QQ、快手、釘釘、淘寶）及快應(yīng)用等多種平臺。

1 場館預(yù)約需求分析

1.1 系統(tǒng)業(yè)務(wù)流程

用戶搜索并進入小程序，在小程序的“籃球中心”選擇“籃球場館”，然后預(yù)付費用，持訂單憑證進入籃球場館消費，訂單結(jié)束。整體流程如圖1 所示。

圖1 場館預(yù)約業(yè)務(wù)流程

1.2 系統(tǒng)功能

通過前期對系統(tǒng)的需求分析得出籃球場館預(yù)約小程序的功能結(jié)構(gòu)，詳見圖2。小程序部分功能如下：

圖2 籃球場館預(yù)約小程序功能

1) 微信授權(quán)登錄。[5]小程序的有些功能用戶必須登錄后才能操作，例如充值、個人信息登記、提交訂單和支付訂單，另外一些功能，例如輪播圖展示、公告顯示、預(yù)約場館時間和場館選擇等可以不經(jīng)用戶登錄而顯示。實現(xiàn)用戶登錄驗證的方式可以采用普通的登錄驗證，但為了與微信平臺更好地集成，小程序采用一鍵登錄功能。

2) 充值功能。用戶在小程序首頁點擊“充值中心”，即可進入充值界面。充值界面的頂部顯示當(dāng)前登錄用戶的賬戶余額，界面中部顯示6 個可選的充值套餐，界面底部顯示“確定充值”按鈕。用戶在確認充值時會調(diào)起微信支付功能。

3) 預(yù)定場館。場館預(yù)定是小程序的核心功能，共有日期和時間段選擇、場館選擇、提交訂單、支付訂單4 個步驟。小程序可預(yù)約最近一周的場館，選場館時可以選全場、半場或散場。

4) 提交訂單。小程序首先根據(jù)用戶的選擇判斷是全場、半場還是散場，然后計算總費用，拼接生成訂單編號后執(zhí)行微信統(tǒng)一下單，下單成功后將微信服務(wù)器返回的支付憑證存入本地緩存，以供用戶支付訂單時使用。

5) 支付訂單。支付界面包含“訂單金額”“訂單詳情”“交易單號”“付款方式”“訂單當(dāng)前狀態(tài)”“確認支付”按鈕。付款方式有余額支付和微信支付兩種，當(dāng)使用余額支付時，如果余額不足，則提示支付失敗，否則，扣款成功后顯示扣款金額和賬戶余額。微信支付功能涉及微信服務(wù)器，還需要開發(fā)前端程序、后端程序以及處理微信服務(wù)器通知的功能。

1.3 原型圖

原型圖是用線條、圖形描繪出的產(chǎn)品框架，也稱線框圖，可以清晰地表達用戶的需求，本小程序共有13 張原型圖，使用AdobeXD 軟件進行繪制，包括首頁、充值、微信支付、個人中心、場館預(yù)定、提交訂單和支付訂單等。其中，首頁、預(yù)定場地—選擇時間原型圖見圖3、圖4。

圖3 首頁原型圖

圖4 預(yù)定場地—選擇時間原型圖

2 小程序架構(gòu)設(shè)計

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

本系統(tǒng)采用前后端分離模式開發(fā)，架構(gòu)上分訪問層、前端子層、后端子層、數(shù)據(jù)層和持久層，[6]詳見圖5。

圖5 小程序系統(tǒng)架構(gòu)

2.2 數(shù)據(jù)庫設(shè)計

本系統(tǒng)的數(shù)據(jù)庫由用戶表（user）、客戶表（client）、場館表（location）、資源表（resource）、訂單表（order）、充值扣款表（inoutmoney）、公告表（bulletin）構(gòu)成。資源表管理供出租的籃球場館資源，由球場編號、日期和時間構(gòu)成，資源全局唯一。資源表的設(shè)計見表1。訂單表管理小程序用戶的預(yù)定場館訂單，除了在微信服務(wù)器端保留訂單信息外，商戶服務(wù)器也需要對訂單進行本地化管理。訂單表設(shè)計見表2。

表1 資源表內(nèi)容設(shè)計

表2 訂單表內(nèi)容設(shè)計

2.3 API 設(shè)計

API 指一些預(yù)先定義的接口（如函數(shù)、HTTP 接口）或軟件系統(tǒng)不同組成部分銜接的約定。在前后端分離開發(fā)模式中，前端通過Web API 訪問后端的數(shù)據(jù)。接口設(shè)計包括定義接口路徑、接口入?yún)ⅰ⒔涌诔鰠⒑徒涌谡f明。

3 核心技術(shù)要點

3.1 技術(shù)選型

小程序的完整開發(fā)包括3 個子系統(tǒng)：接口程序、計算機端管理子系統(tǒng)、微信小程序。其中，接口程序為微信小程序提供數(shù)據(jù)管理，計算機端管理子系統(tǒng)供管理員操作。本系統(tǒng)采用的技術(shù)及開發(fā)工具如表3所示。

表3 系統(tǒng)選用技術(shù)及開發(fā)環(huán)境/工具

3.2 技術(shù)要點

1) 接口程序開發(fā)。接口程序開發(fā)中的數(shù)據(jù)庫訪問配置項有：HikariCP 連接池配置、添加數(shù)據(jù)庫依賴、數(shù)據(jù)庫連接字符串設(shè)置。在設(shè)置連接池的maxLifetime 屬性時，有研究者建議將該值設(shè)置得比MySQL 的wait_timeout 小幾分鐘，但在實踐中可能出現(xiàn)No operations allowed after connection closed 錯誤，在本項目中就出現(xiàn)了此問題，最終將maxLifetime 屬性值設(shè)置為32 s，問題才得以解決。

2) 微信小程序開發(fā)。開發(fā)微信小程序必須申請開發(fā)者賬號，申請入口地址為微信公眾平臺官網(wǎng)。為使小程序支持微信支付功能，必須申請企業(yè)賬號或微信授權(quán)登錄功能的個人賬號。開發(fā)者需要妥善保存小程序的AppID、AppSecret、商戶號和API 密鑰。在uni-app 中，可以使用uni.request 向API 接口服務(wù)器發(fā)起請求，調(diào)用方式為uni.request（OBJECT）。為便于開發(fā)，可以封裝uni.request 為Promise 形式。封裝好網(wǎng)絡(luò)請求后，還需要擴展到Vue 原型上，以便Vue 組件調(diào)用，例如：Vue.prototype.$myRequest=myRequest。在進行小程序頁面布局時，尺寸單位選用rpx。rpx 是響應(yīng)式px，是一種根據(jù)屏幕寬度自適應(yīng)的動態(tài)單位，以寬750 mm 的屏幕為基準，750 rpx 恰好為屏幕的寬度。在布局方式上，以彈性布局為主，再結(jié)合傳統(tǒng)的布局方式，包括絕對布局、相對布局、固定布局、浮動布局。使用uni.getSystemInfo獲取小程序基礎(chǔ)庫版本信息，若是SDK12 以下的版本，則使用getUserInfo 實現(xiàn)一鍵登錄；反之，則使用uni.getUserProfile 實現(xiàn)一鍵登錄。

3)接口安全策略?；趖oken 的登錄驗證機制因具有支持跨域訪問、無狀態(tài)化、無須綁定到一個特殊的身份驗證方案、更適用于移動端等優(yōu)點而被本系統(tǒng)采用。另外，在是否攔截某些接口訪問時規(guī)定了7 條安全細則：①接口client/wxauthlogin 和user/login 分別用于小程序用戶和計算機端用戶的首次登錄，不予攔截。②小程序用戶在訪問接口時，有的接口不需要用戶事先登錄，如/resource/getResourcesByTimeSection、/system/getClientCount、/bullitin/getTopBullitins。③接 口/resource/wxPayNotify 和/client/depositPayNotify 分 別 是 支付訂單和充值成功后微信通知的接口，不予攔截。④如果請求url中包含/qrcode 或/uploadFile，則表示訪問靜態(tài)資源文件夾，不予攔截。⑤若請求url 是/system/upload，則表示上傳文件，不予攔截。⑥若HTTP 請求方法是options，則放行該請求，因為跨域訪問時首先會發(fā)送options 請求詢問服務(wù)器是否可以跨域訪問。⑦如果請求接口為/user/addUser，還需要判斷是否為超級管理員；若不是，則攔截該請求。

4 測試與發(fā)布

4.1 測試

小程序的測試按照測試內(nèi)容分為功能測試、性能測試、界面測試等。功能測試根據(jù)測試環(huán)境分為內(nèi)部測試（或局域網(wǎng)測試）和公開測試，兩者稍有不同。3 個子系統(tǒng)的測試結(jié)果如表4 所示。

表4 3 個子系統(tǒng)在內(nèi)部測試和公開測試兩個環(huán)境的測試區(qū)別

4.2 發(fā)布程序

由于小程序必須通過域名訪問已經(jīng)備案的服務(wù)器，所以要依次完成購買服務(wù)器、購買域名、域名備案和域名映射。訪問服務(wù)器使用Xftp 和XShell 工具，Xftp 用于文件傳輸，XShell 用于操作Linux 終端。

接著在服務(wù)器上依次完成JDK 安裝、tomcat 安裝、MySQL 安裝、HTTP（S）配置和定時任務(wù)的編寫，定時任務(wù)完成日志分割和數(shù)據(jù)庫備份，最后將接口程序和后臺管理程序復(fù)制到服務(wù)器上，完成接口程序和后臺管理程序的發(fā)布。

使用小程序開發(fā)者工具發(fā)布小程序。在小程序開發(fā)者工具的左上角選擇“上傳”，將微信小程序代碼提交到微信公眾平臺，然后在公眾平臺提交代碼審核，審核通過后才可以運行發(fā)布為線上版本。提交代碼審核時可以選擇更新類型、填寫版本號和項目備注。

5 結(jié)語

本場館預(yù)約系統(tǒng)基于微信小程序開發(fā)而成，解決了當(dāng)前場館預(yù)約管理中的難點問題，管理員可以動態(tài)設(shè)置優(yōu)惠券，以圖表方式統(tǒng)計每日的現(xiàn)金流和客流，可以控制場館資源的上線、下線，降低了場館管理員的工作復(fù)雜性，用戶足不出戶即可實時查看場館的預(yù)約情況和進行場館預(yù)約，可以使用余額支付或微信支付，也可以充值，提高了場館的利用率，避免了因信息不對稱而導(dǎo)致的場館空置。后續(xù)將根據(jù)使用情況和建議對小程序做進一步完善。