基于微信小程序的攤位預約小程序設計

林霞，鄒敏，李萍

（宜賓學院智能制造學部，四川宜賓，644000）

0 引言

由于疫情的影響，導致部分工廠產品滯銷，工人失業(yè)，各地政府為了解決這一問題采取了多項措施，鼓勵人們積極加入地攤經(jīng)濟。地攤經(jīng)濟的風險低，投資小，可以刺激周圍居民消費，為經(jīng)濟的恢復帶來新活力[1]。但隨著越來越多的地攤出現(xiàn)在各個城市，也帶來了一些新的問題：攤戶的增多，攤位數(shù)量的固定不變，出現(xiàn)了“一攤難求”的現(xiàn)象；很多攤主為了得到一個較好的攤位，不惜與他人產生矛盾；地攤的擺放不規(guī)范，影響交通秩序，也使得城市出現(xiàn)“臟亂差”的現(xiàn)象。基于此，設計一款微信小程序—攤位預約小程序。這款小程序可以訪問攤主的個人真實信息，可以提前預約攤位，便于攤位有序化管理，有利于改善位臟亂差的問題。

1 微信小程序架構

微信小程序的架構[2]由主體部分和頁面部分組成。主體部分用于核心的配置，頁面部分用于頁面的設置。主體部分的構成如表1所示。

表1 微信小程序主體部分架構

（1）app.js：初始化；

（2）app.json文件：對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現(xiàn)、頁面的跳轉、設置Tab等；（3）app.wxss：用于描述 wxml 的組件樣式。頁面部分的構成如表2所示。

表2 微信小程序頁面部分架構

（1）js：在頁面對應的js 文件中進行注冊，指定頁面的初始數(shù)據(jù)、生命周期回調、事件處理函數(shù)等；

（2）json：對本頁面的窗口表現(xiàn)進行配置；

（3）wxss：用來決定wxml的組件應該怎么顯示；

（4）wxml：框架設計的一套標簽語言。結合基礎組件、事件系統(tǒng)，構建出頁面的結構。

2 小程序運行環(huán)境

小程序三大運行環(huán)境[3]是：iOS、安卓和小程序開發(fā)者工具。它們的區(qū)別如表3所示。

表3 小程序的運行環(huán)境

小程序的運行環(huán)境分為邏輯層和渲染層，其中wxml模板和wxss樣式工作在渲染層，JS 腳本工作在邏輯層。

小程序的渲染層和邏輯層由兩個線程管理：渲染層的界面使用WebView進行渲染；邏輯層采用JSCore 線程運行JS 腳本。一個小程序存在多個界面，所以渲染層存在多個WebView 線程，這兩個線程通信經(jīng)微信客戶端中轉，邏輯層發(fā)送的網(wǎng)絡請求也經(jīng)過微信客戶端。小程序的通信模式如圖1所示。

圖1 小程序通信模式

3 小程序﹒云開發(fā)

云開發(fā)[4]中有一塊存儲空間，可以上傳或下載文件。

云函數(shù)是一段運行在云端的代碼，無需搭建服務器，在開發(fā)工具內編寫、上傳后就能運行后端代碼。小程序內提供了專門用于云函數(shù)調用的 API[3]。在小程序端和云函數(shù)里都可以通過 API 使用云存儲功能。

云調用是在云函數(shù)中調用微信服務端接口的一種能力，如獲取用戶的appid、openid、unionid等。

云數(shù)據(jù)庫是由多個集合組成的數(shù)據(jù)庫，集合可看做一個 JSON 數(shù)組。集合中的每個對象就是一條記錄，記錄的格式則是 JSON。數(shù)據(jù)的增刪改查，可以通過云開發(fā)控制臺或JS實現(xiàn)。

該微信小程序主要運用云數(shù)據(jù)庫、云儲存、云函數(shù)等三大功能。

開發(fā)者可以在云開發(fā)平臺查看用戶登錄狀態(tài)，當用戶進行預約操作時，云函數(shù)會調用數(shù)據(jù)庫中的相應數(shù)據(jù)，在預約界面顯示攤位的具體信息。用戶完成預約后，將調用云函數(shù)將預約信息存儲至云數(shù)據(jù)庫。

4 微信小程序設計及頁面設計

4.1 用戶程序實現(xiàn)框圖

進入小程序，用戶同意授權后方可使用攤位預約功能，否則不可使用。用戶程序實現(xiàn)框圖如圖2所示。

圖2 用戶程序實現(xiàn)框圖

4.2 模塊設計

該微信小程序整體模塊架構圖如圖3所示。由登錄授權模塊進入小程序后，頁面被分為首頁模塊、我的違規(guī)模塊和個人中心模塊。首頁模塊分為：廣告輪播圖模塊、掃一掃模塊、公告模塊和攤位查詢、預約模塊。我的違規(guī)模塊可查看違規(guī)記錄。個人中心模塊分為：聯(lián)系客服模塊、意見反饋模塊、關于我們模塊和應用推薦模塊。

圖3 程序整體模塊架構圖

登錄授權模塊：用戶搜索小程序后，在個人界面點擊“登錄”進行小程序授權登錄。

廣告輪播圖模塊：可在該模塊投放廣告或其他消息。

掃一掃模塊：用戶到達現(xiàn)場后，通過點擊掃一掃，掃描現(xiàn)場隨機生成的二維碼進行預約后的簽到。掃描二維碼簽到后的數(shù)據(jù)將與數(shù)據(jù)庫的數(shù)據(jù)進行比較，便于管理者進行違規(guī)情況管理。

公告模塊：對重要事項進行公示，提醒用戶應該注意的事項。

攤位查詢、預約模塊：用戶可在小程序上看到已被預約的攤位，同時選擇自己想要預約攤位的位置和時間，預約成功后會調用云函數(shù)，將數(shù)據(jù)存儲到云數(shù)據(jù)庫。

我的違規(guī)模塊：用戶可在我的違規(guī)界面查詢到預約違規(guī)記錄，同時將違規(guī)數(shù)據(jù)上傳至云端數(shù)據(jù)庫，便于管理者進行管理。

聯(lián)系客服模塊：用戶在使用小程序時遇到問題可以通過聯(lián)系客服解決。

意見反饋模塊：用戶可通過該模塊將預約出現(xiàn)的問題進行反饋。

關于我們模塊：用戶可以通過此模塊了解小程序的功能。

應用推薦模塊：用戶把小程序推薦給他人，可以更流暢地與好友分享內容和服務。

4.3 手機版頁面設計

4.3.1 個人中心頁面

搜索小程序名稱并點擊進入后，再點擊頁面底部的個人，從而進入個人中心界面，如圖4所示。點擊登錄按鈕，確認授權成功后，會獲得該用戶數(shù)據(jù)，重新跳轉回個人中心頁面，此時“登錄”按鈕會變成相應的用戶頭像。

圖4 個人中心頁面

在此頁面中還有聯(lián)系客服、意見反饋、關于我們、把應用推薦給他人的功能，用戶可根據(jù)自己的需求點擊相應部分進行操作。

4.3.2 首頁

(1)用戶在授權登錄成功后，點擊頁面底部首頁，會跳轉到首頁，如圖5所示。首頁分為廣告輪播圖、掃一掃、攤位預約、公告模塊。

圖5 首頁

(2)預約用戶點擊攤位預約模塊，進行攤位預約，頁面會跳轉到我的預約，如圖6所示。

圖6 我的預約

用戶可根據(jù)自身需求選擇預約位置和具體時間，點擊“確定預定”，完成攤位預約。同時，在選擇時間界面會有不同顏色對應的不同攤位狀態(tài)顯示：可預定、已選擇、我的預定和有人。

(3)用戶在小程序完成預約后，需在預約時間前到達，點擊掃一掃模塊，掃描隨機生成的二維碼進行簽到。

4.3.3 我的違規(guī)

若用戶未按時到場，掃碼簽到，則記一次違規(guī)。用戶可通過初始頁面底部，點擊我的違規(guī)模塊，如圖7所示，查看自己的違規(guī)記錄。

圖7 我的違規(guī)

同時,違規(guī)數(shù)據(jù)將會記錄在云開發(fā)平臺中，管理者則可在后臺查看違規(guī)用戶的違規(guī)詳情，比如：用戶未簽到具體時間，預約攤位的詳細信息等。

5 主要代碼

5.1 全局配置

小程序根目錄下的app.json文件進行全局配置，文件內容是一個JSON對象，以taBer為例：

其中l(wèi)ist是至少配置2個，最多5個數(shù)組，且按數(shù)組順序排列。

“tabBar”: {

“color”: “#999”, //tab上文字的默認顏色

“selectedColor”: “#000”,

//tab上文字選中時的顏色

“backgroundColor”: “#fafafa”,//tab的背景色

“position”: “bottom”, //tab的位置

“borderStyle”: “black”, //tab雙邊框顏色

“l(fā)ist”: [

{

“pagePath”: “pages/index/index”, //頁面路徑

“text”: “首頁”, //tab上按鈕文字

“iconPath”: “icons/home.png”,

//未選中圖片路徑

“selectedIconPath”: “icons/home1.png”

//選中后圖片路徑

},

{

“pagePath”: “pages/違規(guī)/index”,

“text”: “我的違規(guī)”,

“iconPath”: “icons/weigui.png”,

“selectedIconPath”: “icons/weigui.png”

},

{

“pagePath”: “pages/user/index”,

“text”: “個人”,

“iconPath”: “icons/My.png”,

“selectedIconPath”: “icons/My1.png”

}

]

5.2 組件

以輪播圖組件為例：使用swiper必須搭配swperitem使用

//輪播圖屬性配置

mode=”widthFix”src=”//gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.nbs.cn%2Ftv%2F5%2F 2%2F202005%2FW020200530469424672348.jpg”/>

//輪播項圖片地址

5.3 頁面

注冊小程序中的頁面，接受Object類型參數(shù)，指定頁面的初始數(shù)據(jù)、生命周期、事件回調函數(shù)等。

data: {

obj_yuyue:[],

obj_weigui:[],

user_id:””,

info:[],

Time: [ “8:00-9:00”, … “21:00-22:00”,],

area: [“1號位”,“2號位”, … “10號位”,],

date: [ ‘星期一’, … ‘星期天’,],

floor: [‘1F’,’2F’,’3F’,’4F’,’5F’,’6F’],

}

5.4 掃一掃

用戶到達預約現(xiàn)場后需要點擊掃一掃，掃簽到二維碼，掃描結果與云數(shù)據(jù)庫結果進行數(shù)據(jù)比較

scanCode(){let that=this //允許從相機和相冊掃碼

wx.cloud.database().collection(“admin”).where({ admin_id:”admin”}).get().then(re=>{

console.log(“數(shù)據(jù)庫結果”,re.data[0].verify_info)

console.log(“掃描結果2”,res.result)

6 結論

該預約小程序具有操作容易、流程明確、反饋及時的優(yōu)點。對用戶采取“人性化”管理，對攤位進行分區(qū)、分時管理，提高了攤位使用率。管理者可建立攤位違規(guī)制度，調動用戶準時出攤的自主性，也有利于攤位的規(guī)范化、制度化。