微信小程序停車系統(tǒng)案例分析

史春笑　葉偉輝　蔡家集　蔡杰

摘 要：本停車系統(tǒng)小程序案例分析為小程序進(jìn)階案例，為了快速了解開發(fā)流程，讀者必須對小程序框架、組件、API的基礎(chǔ)知識有一定掌握。本案例根據(jù)“基于微信小程序、單片機和PLC實現(xiàn)共享車位信息化的停車系統(tǒng)”項目需求，從后臺搭建、項目基本架構(gòu)、功能頁面構(gòu)建、頁面邏輯開發(fā)四個方面進(jìn)行展開介紹，雖然項目小，代碼量不大，但本案例著重小程序的構(gòu)架搭建和系統(tǒng)的功能開發(fā)，通過完成“預(yù)約功能”使讀者了解小程序與云網(wǎng)絡(luò)服務(wù)器的數(shù)據(jù)通信是如何實現(xiàn)的。

關(guān)鍵詞：停車系統(tǒng);小程序;進(jìn)階案例;開發(fā)

隨著私家車逐漸在我國城市家庭中普及，停車難問題成為人民日常生活中關(guān)注的焦點，減少車位的空置情況，增加其實際使用時長，是提高車位實際利用效率的有效途徑之一。小程序已經(jīng)融入了人們的生活中，本案例針對停車場對智能化管理的需求，將云網(wǎng)絡(luò)通信技術(shù)、傳感器感知技術(shù)、單片機與PLC控制技術(shù)和微信小程序編程技術(shù)結(jié)合起來，根據(jù)停車場管理的特點和的項目——“基于微信小程序、單片機和PLC實現(xiàn)共享車位信息化的停車系統(tǒng)”設(shè)計的需求，設(shè)計開發(fā)一款輔助停車微信小程序。

通過實踐案例的學(xué)習(xí)，能讓大家在學(xué)習(xí)小程序過程中對小程序構(gòu)架有更深入地了解，從而使知識得到更好地運用，使大家對小程序的研發(fā)有更深刻的認(rèn)識，本案例根據(jù)項目需求，從后臺搭建，項目基本架構(gòu)，功能頁面構(gòu)建，頁面邏輯開發(fā)四個方面展開。

一、前期準(zhǔn)備工作

（一）云服務(wù)器和云數(shù)據(jù)庫

在微信小程序開發(fā)之前，首先，必須向云服務(wù)端供應(yīng)商購置屬于自己的云服務(wù)器，由于騰訊云對微信小程序初級開發(fā)者有一定的服務(wù)支持，所以本案例選擇以騰訊云作為云服務(wù)端，并在云服務(wù)端配置服務(wù)器和搭建云數(shù)據(jù)庫。

配置云服務(wù)器后需向云服務(wù)端供應(yīng)商申請服務(wù)端域名，將該服務(wù)端域名添加到微信小程序后臺的受信任連接中，并設(shè)置為HTTPS服務(wù)。

根據(jù)本案例的功能需求，在云數(shù)據(jù)庫中搭建對應(yīng)的數(shù)據(jù)表，如“車位信息表”“用戶表”“用戶登錄信息表”“車位信息表”“用戶預(yù)約表”等，并在云服務(wù)器中逐一配置對應(yīng)的API接口，供小程序調(diào)用。圖1為車位信息表。

二、項目基本架構(gòu)

在項目編碼之前，需要先思考項目的架構(gòu)，保證項目具備一定的模塊化，提高編碼的效率，一般前端項目的架構(gòu)可分為配置層、邏輯層、表現(xiàn)層。配置層和邏輯層分為全局配置、全局邏輯和頁面配置、頁面邏輯，以下篇幅將詳細(xì)講解全局配置層、全局邏輯層以及各主要功能頁面的頁面配置和頁面邏輯。

（一）配置文件（app.json）

小程序根目錄下的app.json文件用來對微信小程序進(jìn)行全局配置，編寫時要嚴(yán)格遵循json的格式規(guī)范。其中，app.json文件包含以下重要配置項：

pages：頁面路徑列表，用于指定小程序由哪些頁面組成，每一項都對應(yīng)一個頁面的路徑（含文件名）信息。文件名不需要寫文件后綴，框架會自動去尋找對應(yīng)位置的 .json，.js，.wxml，.wxss四個文件進(jìn)行處理。

window：全局的默認(rèn)窗口表現(xiàn)，用于設(shè)置小程序的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色。

tabBar：底部 tab 欄（菜單欄）的表現(xiàn)設(shè)置。菜單包括三個常用重要頁面，即：主頁面（首頁）、地圖定位頁面（定位）、用戶信息頁面（我的）。

（二）邏輯文件（app.js）

小程序中邏輯文件分為頁面邏輯文件（如首頁面邏輯文件index.js）和小程序邏輯文件（app.js）。在這個文件中，可以通過App（） 函數(shù)注冊小程序生命周期函數(shù)、全局方式和全局屬性，已注冊的小程序在頁面邏輯文件可以通過getApp（）調(diào)用相關(guān)全局功能。邏輯文件代碼app.js——調(diào)用API（wx.login）功能見代碼1。

小程序登錄態(tài)維護(hù)發(fā)生在用戶打開小程序時的加載階段，而在用戶打開小程序時就必須運行邏輯文件（app.js），所以小程序登錄態(tài)維護(hù)代碼塊必須寫在邏輯文件（app.js）內(nèi)部，其實現(xiàn)流程如下：首先，小程序通過調(diào)用API（wx.login）獲取當(dāng)前登錄微信用戶的臨時登錄憑證（code）;其次，使用小程序的網(wǎng)絡(luò)請求API（wx.request）向開發(fā)者服務(wù)器端發(fā)送登錄憑證（code），開發(fā)者服務(wù)器以code通過登錄憑證校驗接口向微信服務(wù)器換取該微信用戶的唯一標(biāo)識（openid）以及本次登錄的會話密鑰（session_key）;最后，開發(fā)者服務(wù)器可以根據(jù)用戶標(biāo)識來生成自定義登錄態(tài)，并與openid.session_key進(jìn)行關(guān)聯(lián)，用于后續(xù)業(yè)務(wù)邏輯中前后端交互時識別用戶身份。小程序?qū)㈤_發(fā)者服務(wù)器返回的自定義登錄態(tài)緩存到本地的緩存（storage）中，后續(xù)接口從緩存中讀取自定義登錄態(tài)，傳遞給開發(fā)者服務(wù)器端;開發(fā)者服務(wù)器端服務(wù)器根據(jù)自定義登錄態(tài)查詢對應(yīng)的合法的openid和session_key來判斷用戶身份，并返回相應(yīng)的業(yè)務(wù)數(shù)據(jù)。如果不存在，說明小程序未登錄，需從第一步流程重新獲取用戶登錄態(tài)。

代碼1 邏輯文件代碼——調(diào)用API（wx.login）功能

wx.request（{

url： 'https：//407737775wifi.cn/index.php？m=home&c=index&a=login'，

data： { code： res.code }，

method： 'POST'，

header： { "content-type"： "application/x-www-form-urlencoded" }，

success： function （res） { that.globalData.userId = res.data.info }，

fail： function （res） {

console.log（res）

console.log（'服務(wù)器請求失??！'）

}， }）

（三）全局樣式（app.wxss）

app.wxss是全局樣式表，對整個小程序中每個頁面都有效，可將一些系統(tǒng)級別的統(tǒng)一樣式風(fēng)格寫入這個文件，頁面渲染是框架頁中的樣式文件（如index.wxss）的樣式會覆蓋app.wxss中的相同的選擇器。WXSS是小程序基于CSS拓展的一套樣式語言，所以大部分CSS的編寫規(guī)則也與CSS類似，本案例就不作過深入的介紹，有興趣的讀者請學(xué)習(xí)CSS即可。

三、主要功能頁面構(gòu)建

（一）主頁面

本案例的主頁面采用簡潔的畫面構(gòu)圖，突出“實用”二字，主頁面右上方是微信用戶的頭像（logo），用戶點擊logo將跳轉(zhuǎn)至用戶信息頁面。主頁面中部為兩個功能按鈕，分別是車位預(yù)約按鈕和車位出租按鈕，點擊預(yù)約按鈕將跳轉(zhuǎn)至地圖定位頁面，用戶可以進(jìn)行選擇車場操作;點擊出租按鈕將跳轉(zhuǎn)至出租車位頁面。主頁面的底部是底部菜單，菜單包括三個常用重要頁面，即主頁面（首頁）、地圖定位頁面（定位）、用戶信息頁面（我的）。

（二）地圖定位頁面

地圖定位頁面采用上下結(jié)構(gòu)，上半部分為用戶當(dāng)前的地圖定位，用戶可以根據(jù)需要通過滑動地圖選擇心儀車場;下半部分為車場的簡單信息介紹。地圖定位頁面效果圖如圖2。

頁面下半部分是車場的簡單信息介紹，使用滾動視圖（scroll-view）組件，將熱門車庫的簡單而重要的信息，如車庫的名字、收費情況、此時剩余的車位，較為直觀地呈現(xiàn)給用戶，供用戶選擇，用戶可以點擊選擇車庫，通過頁面鏈接跳轉(zhuǎn)到該車庫的停車位清單頁面，為用戶提供停車位預(yù)約服務(wù)。圖定位頁面結(jié)構(gòu)文件代碼 location.wxml——地圖定位部分見代碼5。

代碼5地圖定位頁面結(jié)構(gòu)文件代碼——地圖定位部分：

（三）車場信息頁面

車場信息頁面是用戶獲取該車場信息的主要功能頁面，主要信息包括：該車場的簡單介紹，車位的收費情況，車位可停時間等。車場信息頁面效果圖如圖3。

為了讓用戶能更直觀地了解車場環(huán)境，使用小程序滑塊視圖容器（swiper）組件進(jìn)行布局設(shè)計，將車場宣傳照片以自動循環(huán)播放的方式呈現(xiàn)給用戶，起到了一定的宣傳作用。頁面的中下部分為車場的文字介紹、使用費用等說明信息以及該車場每個車位的可停時間，用戶點擊選擇車位進(jìn)行預(yù)約停車操作，實現(xiàn)車位預(yù)約功能。車場信息頁面結(jié)構(gòu)文件代碼——預(yù)約按鈕部分見代碼6。

代碼6車場信息頁面結(jié)構(gòu)文件代碼——預(yù)約按鈕部分：

已使用

四、頁面邏輯開發(fā)

為在一定程度上提高本案例小程序的交互用戶體驗，即界面給用戶使用、交流過程的體驗，通過頁面鏈接跳轉(zhuǎn)的方式，實現(xiàn)各頁面在規(guī)定的邏輯下相互跳轉(zhuǎn)，強調(diào)互動、交互特性。下面將介紹本案例的三個重要頁面的邏輯開發(fā)。

（一）主頁面邏輯開發(fā)

主頁面是用戶打開小程序時默認(rèn)打開的第一個頁面，它不僅是用戶對該小程序的第一印象，還在其他功能頁面之間承擔(dān)著橋梁的作用，首頁的UI設(shè)計（人機交互、操作邏輯、界面美觀的整體設(shè)計）將很大程度影響用戶的使用體驗。

主頁面中部為兩個功能按鈕，分別是車位預(yù)約按鈕和車位出租按鈕，點擊預(yù)約按鈕將跳轉(zhuǎn)至地圖定位頁面，用戶可以進(jìn)行選擇車場操作;點擊出租按鈕將跳轉(zhuǎn)至出租車位頁面。上述點擊事件需要在主頁面邏輯文件（index.js）編寫事件處理函數(shù)。主頁面邏輯文件代碼——事件處理函數(shù)見代碼7。

代碼7主頁面邏輯文件代碼——事件處理函數(shù)

avatarTap： function （） {

wx.switchTab（{ url： '/pages/admin/admin' }）

}

（二）地圖信息頁面邏輯開發(fā)

目前，定位技術(shù)主要分為兩種，分別是基于移動運營網(wǎng)基站的定位和基于GPS的定位?；径ㄎ皇抢靡苿舆\營網(wǎng)基站對手機的距離的進(jìn)行測算來確定手機位置的?；贕PS的定位方式是利用手機上的GPS定位模塊將自己的位置信號發(fā)送到定位后臺來實現(xiàn)手機定位的。前者不需要手機具備GPS定位能力，但是定位誤差較大，精度很大程度依賴于基站的分布及覆蓋范圍的大小。后者定位精度較高，但GPS衛(wèi)星信號穿透能力較弱，在建筑物內(nèi)信號會受到一定削弱。

根據(jù)上述分析，本頁面的地圖定位功能設(shè)計采用GPS定位技術(shù)實現(xiàn)。使用地圖（map）組件進(jìn)行外部布局設(shè)計，調(diào)用微信小程序官方提供的地圖定位API（wx.createMapContext）綁定地圖組件，通過它可以操作地圖組件，同時，利用系統(tǒng)信息API（wx.getSystemInfo）調(diào)取用戶手機的GPS定位信息，從而實現(xiàn)在地圖組件上顯示用戶的當(dāng)前位置。由于本課題需要定位的是車場整個建筑物，因此室內(nèi)誤差等影響因素較小。地圖定位頁面邏輯文件代碼 location.js——地圖定位部分見代碼8。

代碼8地圖定位頁面邏輯文件代碼——加載地圖部分

that.mapCtx = wx.createMapContext（'map'）

//地圖調(diào)用

wx.getLocation（{

type： 'gcj02'，

success： function （res） {

console.log（res）

var latitude = res.latitude

var longitude = res.longitude

var speed = res.speed

var accuracy = res.accuracy;

var point = {

latitude： latitude，

longitude： longitude

};

that.setData（{ point： point， }）;

}

}）

（三）車場信息頁面邏輯開發(fā)

車場信息頁面是預(yù)約功能的操作頁面，因此車場信息頁面邏輯開發(fā)是本案例的重要部分。用戶選擇車位后，微信小程序會將該用戶的個人信息和所選車位組合成一條數(shù)據(jù)庫記錄，通過網(wǎng)絡(luò)請求API（wx.request）以POST方法向服務(wù)器發(fā)起網(wǎng)絡(luò)請求，將用戶的預(yù)約信息上傳到服務(wù)器，服務(wù)器對該網(wǎng)絡(luò)請求進(jìn)行判斷，若為正確的預(yù)約操作，服務(wù)器將對數(shù)據(jù)庫中的車位表進(jìn)行更新操作，使該車位設(shè)置為已預(yù)約（即將該車位對應(yīng)的預(yù)約標(biāo)志字段置1），并把該車位的信息與用戶ID關(guān)聯(lián)綁定起來;同時，小程序通過網(wǎng)絡(luò)請求API（wx.request）以GET方法向服務(wù)器發(fā)起網(wǎng)絡(luò)請求，讀取最新的車位表所有記錄，用于刷新車位的實時預(yù)約和使用情況。車位預(yù)約成功后，服務(wù)器將自動生成一個4位十進(jìn)制阿拉伯?dāng)?shù)字作為預(yù)約驗證碼。

車場信息頁面邏輯文件代碼 getLocationList.js——預(yù)約功能部分見代碼9。

代碼9車場信息頁面邏輯文件代碼——預(yù)約功能部分

wx.request（{

url： 'https：//407737775wifi.cn/index.php？m=home&c=book&a=postBookInfo'，

header： {"Content-Type"： "application/x-www-form-urlencoded"}，

method： "POST"，

data： { location_id： this.data.packList[i - 1].id， userId： app.globalData.userId， start_time： this.data.packList[i - 1].start_time， end_time： this.data.packList[i - 1].end_time， }，

success： function （res） {

if （res.data.status == 0） {

//請求成功

wx.showToast（{

title： '預(yù)約成功'，

icon： 'success'，

duration： 1800 }） } } }）

五、小結(jié)

停車泊位供不應(yīng)求現(xiàn)狀依舊嚴(yán)峻，如何緩解停車泊位的需求問題已引起了人民的廣泛關(guān)注。運用“互聯(lián)網(wǎng)+”思想，減少車位的空置情況，增加其實際使用時長，是提高車位實際利用效率的有效途徑之一。

微信小程序是微信衍生出的一種新形態(tài)，用戶無需下載安裝即可打開小程序應(yīng)用，實現(xiàn)了應(yīng)用“觸手可及，用完即走”的理念。微信小程序的UI和操作流程比原生APP更統(tǒng)一，為本創(chuàng)新創(chuàng)業(yè)訓(xùn)練計劃項目——“基于微信小程序、單片機和PLC實現(xiàn)共享車位信息化的停車系統(tǒng)”停車系統(tǒng)提供了不俗的用戶體驗。

讀者學(xué)習(xí)微信小程序的組件，API，搭建流程等知識后，必須要經(jīng)過一段時間的實踐運用才能使學(xué)習(xí)到的小程序知識融會貫通。本案例基本覆蓋小程序前端常用技術(shù)，可以直接借鑒沿用到任何項目中，讓讀者對后臺搭建、項目基本架構(gòu)、功能頁面構(gòu)建、頁面邏輯開發(fā)四個方面有更深的了解，通過講解“預(yù)約功能”的實現(xiàn)，為讀者提供可參考的小程序與云網(wǎng)絡(luò)服務(wù)器數(shù)據(jù)通信的編程學(xué)習(xí)案例。

參考文獻(xiàn)

[1] 李駿，邊思.微信小程序開發(fā)入門及案例詳解[M].北京：機械工業(yè)出版社，2017.

[2] 劉學(xué)廷.移動智能終端存取車系統(tǒng)APP用戶體驗研究與設(shè)計[D].天津：天津科技大學(xué)，2015.

[3] 劉玉佳.微信“小程序”開發(fā)的系統(tǒng)實現(xiàn)及前景分析[J].信息通信，2017（1）：1-2.