基于微信小程序的摊位预约小程序设计

林霞，邹敏，李萍

（宜宾学院智能制造学部，四川宜宾，644000）

0 引言

由于疫情的影响，导致部分工厂产品滞销，工人失业，各地政府为了解决这一问题采取了多项措施，鼓励人们积极加入地摊经济。地摊经济的风险低，投资小，可以刺激周围居民消费，为经济的恢复带来新活力[1]。但随着越来越多的地摊出现在各个城市，也带来了一些新的问题：摊户的增多，摊位数量的固定不变，出现了“一摊难求”的现象；很多摊主为了得到一个较好的摊位，不惜与他人产生矛盾；地摊的摆放不规范，影响交通秩序，也使得城市出现“脏乱差”的现象。基于此，设计一款微信小程序—摊位预约小程序。这款小程序可以访问摊主的个人真实信息，可以提前预约摊位，便于摊位有序化管理，有利于改善位脏乱差的问题。

1 微信小程序架构

微信小程序的架构[2]由主体部分和页面部分组成。主体部分用于核心的配置，页面部分用于页面的设置。主体部分的构成如表1所示。

表1 微信小程序主体部分架构

（1）app.js：初始化；

（2）app.json文件：对微信小程序进行全局配置，决定页面文件的路径、窗口表现、页面的跳转、设置Tab等；（3）app.wxss：用于描述 wxml 的组件样式。页面部分的构成如表2所示。

表2 微信小程序页面部分架构

（1）js：在页面对应的js 文件中进行注册，指定页面的初始数据、生命周期回调、事件处理函数等；

（2）json：对本页面的窗口表现进行配置；

（3）wxss：用来决定wxml的组件应该怎么显示；

（4）wxml：框架设计的一套标签语言。结合基础组件、事件系统，构建出页面的结构。

2 小程序运行环境

小程序三大运行环境[3]是：iOS、安卓和小程序开发者工具。它们的区别如表3所示。

表3 小程序的运行环境

小程序的运行环境分为逻辑层和渲染层，其中wxml模板和wxss样式工作在渲染层，JS 脚本工作在逻辑层。

小程序的渲染层和逻辑层由两个线程管理：渲染层的界面使用WebView进行渲染；逻辑层采用JSCore 线程运行JS 脚本。一个小程序存在多个界面，所以渲染层存在多个WebView 线程，这两个线程通信经微信客户端中转，逻辑层发送的网络请求也经过微信客户端。小程序的通信模式如图1所示。

图1 小程序通信模式

3 小程序﹒云开发

云开发[4]中有一块存储空间，可以上传或下载文件。

云函数是一段运行在云端的代码，无需搭建服务器，在开发工具内编写、上传后就能运行后端代码。小程序内提供了专门用于云函数调用的 API[3]。在小程序端和云函数里都可以通过 API 使用云存储功能。

云调用是在云函数中调用微信服务端接口的一种能力，如获取用户的appid、openid、unionid等。

云数据库是由多个集合组成的数据库，集合可看做一个 JSON 数组。集合中的每个对象就是一条记录，记录的格式则是 JSON。数据的增删改查，可以通过云开发控制台或JS实现。

该微信小程序主要运用云数据库、云储存、云函数等三大功能。

开发者可以在云开发平台查看用户登录状态，当用户进行预约操作时，云函数会调用数据库中的相应数据，在预约界面显示摊位的具体信息。用户完成预约后，将调用云函数将预约信息存储至云数据库。

4 微信小程序设计及页面设计

4.1 用户程序实现框图

进入小程序，用户同意授权后方可使用摊位预约功能，否则不可使用。用户程序实现框图如图2所示。

图2 用户程序实现框图

4.2 模块设计

该微信小程序整体模块架构图如图3所示。由登录授权模块进入小程序后，页面被分为首页模块、我的违规模块和个人中心模块。首页模块分为：广告轮播图模块、扫一扫模块、公告模块和摊位查询、预约模块。我的违规模块可查看违规记录。个人中心模块分为：联系客服模块、意见反馈模块、关于我们模块和应用推荐模块。

图3 程序整体模块架构图

登录授权模块：用户搜索小程序后，在个人界面点击“登录”进行小程序授权登录。

广告轮播图模块：可在该模块投放广告或其他消息。

扫一扫模块：用户到达现场后，通过点击扫一扫，扫描现场随机生成的二维码进行预约后的签到。扫描二维码签到后的数据将与数据库的数据进行比较，便于管理者进行违规情况管理。

公告模块：对重要事项进行公示，提醒用户应该注意的事项。

摊位查询、预约模块：用户可在小程序上看到已被预约的摊位，同时选择自己想要预约摊位的位置和时间，预约成功后会调用云函数，将数据存储到云数据库。

我的违规模块：用户可在我的违规界面查询到预约违规记录，同时将违规数据上传至云端数据库，便于管理者进行管理。

联系客服模块：用户在使用小程序时遇到问题可以通过联系客服解决。

意见反馈模块：用户可通过该模块将预约出现的问题进行反馈。

关于我们模块：用户可以通过此模块了解小程序的功能。

应用推荐模块：用户把小程序推荐给他人，可以更流畅地与好友分享内容和服务。

4.3 手机版页面设计

4.3.1 个人中心页面

搜索小程序名称并点击进入后，再点击页面底部的个人，从而进入个人中心界面，如图4所示。点击登录按钮，确认授权成功后，会获得该用户数据，重新跳转回个人中心页面，此时“登录”按钮会变成相应的用户头像。

图4 个人中心页面

在此页面中还有联系客服、意见反馈、关于我们、把应用推荐给他人的功能，用户可根据自己的需求点击相应部分进行操作。

4.3.2 首页

(1)用户在授权登录成功后，点击页面底部首页，会跳转到首页，如图5所示。首页分为广告轮播图、扫一扫、摊位预约、公告模块。

图5 首页

(2)预约用户点击摊位预约模块，进行摊位预约，页面会跳转到我的预约，如图6所示。

图6 我的预约

用户可根据自身需求选择预约位置和具体时间，点击“确定预定”，完成摊位预约。同时，在选择时间界面会有不同颜色对应的不同摊位状态显示：可预定、已选择、我的预定和有人。

(3)用户在小程序完成预约后，需在预约时间前到达，点击扫一扫模块，扫描随机生成的二维码进行签到。

4.3.3 我的违规

若用户未按时到场，扫码签到，则记一次违规。用户可通过初始页面底部，点击我的违规模块，如图7所示，查看自己的违规记录。

图7 我的违规

同时,违规数据将会记录在云开发平台中，管理者则可在后台查看违规用户的违规详情，比如：用户未签到具体时间，预约摊位的详细信息等。

5 主要代码

5.1 全局配置

小程序根目录下的app.json文件进行全局配置，文件内容是一个JSON对象，以taBer为例：

其中list是至少配置2个，最多5个数组，且按数组顺序排列。

“tabBar”: {

“color”: “#999”, //tab上文字的默认颜色

“selectedColor”: “#000”,

//tab上文字选中时的颜色

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

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

“borderStyle”: “black”, //tab双边框颜色

“list”: [

{

“pagePath”: “pages/index/index”, //页面路径

“text”: “首页”, //tab上按钮文字

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

//未选中图片路径

“selectedIconPath”: “icons/home1.png”

//选中后图片路径

},

{

“pagePath”: “pages/违规/index”,

“text”: “我的违规”,

“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类型参数，指定页面的初始数据、生命周期、事件回调函数等。

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 扫一扫

用户到达预约现场后需要点击扫一扫，扫签到二维码，扫描结果与云数据库结果进行数据比较

scanCode(){let that=this //允许从相机和相册扫码

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

console.log(“数据库结果”,re.data[0].verify_info)

console.log(“扫描结果2”,res.result)

6 结论

该预约小程序具有操作容易、流程明确、反馈及时的优点。对用户采取“人性化”管理，对摊位进行分区、分时管理，提高了摊位使用率。管理者可建立摊位违规制度，调动用户准时出摊的自主性，也有利于摊位的规范化、制度化。