基于微信小程序的攤位預(yù)約小程序設(shè)計

林霞，鄒敏，李萍

（宜賓學(xué)院智能制造學(xué)部，四川宜賓，644000）

0 引言

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

1 微信小程序架構(gòu)

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

表1 微信小程序主體部分架構(gòu)

（1）app.js：初始化；

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

表2 微信小程序頁面部分架構(gòu)

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

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

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

（4）wxml：框架設(shè)計的一套標(biāo)簽語言。結(jié)合基礎(chǔ)組件、事件系統(tǒng)，構(gòu)建出頁面的結(jié)構(gòu)。

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

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

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

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

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

圖1 小程序通信模式

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

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

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

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

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

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

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

4 微信小程序設(shè)計及頁面設(shè)計

4.1 用戶程序?qū)崿F(xiàn)框圖

進(jìn)入小程序，用戶同意授權(quán)后方可使用攤位預(yù)約功能，否則不可使用。用戶程序?qū)崿F(xiàn)框圖如圖2所示。

圖2 用戶程序?qū)崿F(xiàn)框圖

4.2 模塊設(shè)計

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

圖3 程序整體模塊架構(gòu)圖

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

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

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

公告模塊：對重要事項進(jìn)行公示，提醒用戶應(yīng)該注意的事項。

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

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

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

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

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

應(yīng)用推薦模塊：用戶把小程序推薦給他人，可以更流暢地與好友分享內(nèi)容和服務(wù)。

4.3 手機版頁面設(shè)計

4.3.1 個人中心頁面

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

圖4 個人中心頁面

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

4.3.2 首頁

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

圖5 首頁

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

圖6 我的預(yù)約

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

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

4.3.3 我的違規(guī)

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

圖7 我的違規(guī)

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

5 主要代碼

5.1 全局配置

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

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

“tabBar”: {

“color”: “#999”, //tab上文字的默認(rèn)顏色

“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ù)、生命周期、事件回調(diào)函數(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 掃一掃

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

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

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

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

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

6 結(jié)論

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