小程序实现校园互助与班级管理平台

2021-02-28兰哲威周雪芹

电脑知识与技术 2021年35期

兰哲威周雪芹

摘要：鉴于在担任班级管理人员过程中体会到目前程序使用的不便，研发了这款校园互助与班级管理平台微信小程序。以新闻通知、校园互助和个人主页三个页面为主体，通过云函数的调用来实现发布校园新闻、班级通知、校园互助，查看完成情况等功能。一系列可靠的实践结果表明，该款小程序能够较好解决大学生班级管理人员对截图收集、通知发放等方面的问题，降低管理人员时间成本，提高管理效率。

关键词：校园互助;班级管理;微信小程序;表单提交;模态弹窗

中图分类号：TP311.1 文献标识码：A

文章编号：1009-3044（2021）35-0064-04

Campus Mutual Aid and Class Management Platform

LAN Zhe-wei， ZHOU Xue-qin

（1.School of Mechanical Engineering， Shandong University of Technology， Zibo 255049， China;2.Scholl of Computer Science and Technology University of Technology，Zibo 255049，China）

Abstract： In view of the inconvenience of using the current program when working as a class manager， this wechat applet of campus mutual aid and class management platform is developed. With the three pages of news notification， campus mutual assistance and personal home page as the main body， the functions of publishing campus news， class notification， campus mutual assistance and viewing the completion are realized through the call of cloud function. A series of reliable practical results show that this small program can better solve the problems of college student class managers in screenshot collection and notice distribution， reduce the time cost of managers and improve management efficiency.

Key words： campus mutual aid; class management; Wechat applet; form submission; modal pop-up

1 背景

在實际活动中发现当前的聊天软件并不能很好地满足收集截图、统计人数、确定到人等的需求，而微信小程序作为简单高效、不需要单独下载的新型小程序，在多方面受到大学生的追捧。基于此，设计开发了该大学班级管理与校园互助小程序。

在实现班级通知统计已提交与未提交人数的一系列实验中，发现当二者处于同一个函数时无法通过一次点击事件完整执行，提交表单后for循环中的提交对象会发生错误、滞后等的现象。

在一系列尝试后，改用以模态弹窗作为中介执行二次点击事件等技术进行实现。该项成果具有泛用性，让用户的点击事件代替定时事件，适合在处理“form”表单提交时某一数组或有多组数组需要执行“for”循环赋值时的云平台表单提交事件。

2 小程序主体

小程序以登录、新闻通知、校园互助和我的首页四大模块为主体，其中登录模块包括内部账号密码登录、注册等两种模块;新闻通知模块包括校园新闻、班级通知、自定任务以及创建任务等四种模块;校园互助模块有我的申请、我的互助以及互助查询三种模块;我的首页模块中则包括了个人主页、意见反馈、请求互助和成长历程四种基本模块，对不同的权限有发布新闻模块、布置任务、完成情况模块等（图1）。

3 登录及注册

3.1 登录模块

由于是校园内部管理软件，因此统一采用学生学号为账号的账号密码二次登录[1]，如此降低了校外人员登录的可能。登录过程采用账号、密码、空号进行“for”循环三重判断，使用“db.collection（）.get”调用云数据库，用“for”循环遍历对比输入的账号、密码对应的返回值，确保账号密码一一对应登录。

3.2 注册模块

3.2.1 个人注册

学生个人注册，填写对应信息：账号（学号）、密码、姓名、对应班级以及联系方式。首先通过调用云数据库进行对比确保没有重复注册或非学号账号注册[2]。用户在输入对应信息后满足以上条件方可通过“db.collection（）.add”将信息上传到云服务器中。

3.2.2 批量注册

另一种以班级为单位注册，提高了使用过程中的效率。通过“Excel”表格，将所需字段一一罗列，在对应字段下批量添加对应信息，再将“Excel”表格进行一定的格式修改后直接批量导入云数据库。

在创建对应个人记录后可由软件负责人修改对应账号权限，例如对应班级管理人员、校园新闻负责人或者是否能够进行校园互助等。

4 新闻通知

4.1 新闻通知模块

4.1.1 新闻通知模块架构

新闻通知模块是本程序设计架构上的第一个页面，其采用了滑动式侧边栏设计[3]，以侧边栏和主页两层页面堆叠，主页叠于侧边栏之上，通过“boolean”值判断是否隐藏或显示主页。

以手指点击屏幕的第一点为原点，滑动后停止的那一点为终点，兩者之间的差若>0，则改变“boolean”值，进而触发事件，将主页显示或隐藏。主页显示在设计上因为新闻数量的不确定性，将“width”设定为100%，“height”为“auto”。

但在实验中发现当暂无新闻通知时会出现“height”=0的情况，此时主页高度为0，无法触发滑动事件，同时侧边栏和主页底色选择不同，会发生页面颜色断层现象（图2）。针对这一情况，采用将主页底部内边距“padding-bottom”设定为特定值的办法，与侧边栏四个点击按钮：校园新闻、班级通知、自定任务和创建任务的总高度一致，当没有通知时主页会生成一个高度为特定值的空白页面，可以触发滑动事件（图3）。

页面设置了滑动刷新，下拉至触发“onload”事件即可重新调用云数据库“db.collection（）.get”，若云数据库集合更新即可获取更新后的内容。

4.2 校园要事及自定任务

4.2.1 校园新闻模块

校园新闻通过for循环将集合中每个记录从云数据库调用导入本地空数组，利用“wxml”页面的<view>组件表达出来。以聊天气泡为样式作为新闻通知的互动窗口。窗口在设计上设置“width”为屏宽的90%，能够适应学生使用的不同手机;“height”设定是“auto”，随新闻行数的增加而增长，避免出现空白格过多或者文字无法完全显示的情况（图4）。

4.2.2 班级模块

每个班级都有一组设定为该班班级代号的识别码，班级通知中带有该识别码即可发送到对应班级学生的班级通知模块中展示。班级模块的互动窗口与校园新闻的样式一致。且根据班级管理人员的设置能够形成两种窗口：当班级管理人员设置的“boolean”值为“false”时该班级通知的窗口一种为纯展示窗口，无法触发跳转事件;当该“boolean”设置为“true”时，窗口下方会显示“需要提交截图”字样，学生点击对应窗口后会触发跳转事件跳转至提交截图页面，同时调用云数据库将对应任务的识别码缓存到本地。提交截图页面上会显示日期、任务名，中间选择图片按钮触发点击事件后能够选择单张截图[4]并与缓存到本地的对应任务识别码一起上传，上传成功后会有弹窗提醒，之后跳转回新闻通知页面，此时学生在点击该窗口时会触发模态弹窗提醒学生已经上传完成，不会再跳转至提交截图页面。

4.2.3 自定义模块

自定任务与创建任务的权限属于学生个人，只有学生对应个人可以查看、创建与删除自己创建的任务。起到了备忘录的作用，减少了多个软件间切换的不必要的烦琐。互动窗口的点击事件设置为删除，在学生完成后点击该窗口，会弹出模态弹窗提示是否完成。学生点击确认后即可删除该自定任务。

5 校园互助

5.1 校园互助模块

5.1.1 校园互助模块架构

校园互助模块是本程序设计架构上的第二个页面，参考了时下大学校园内流行的悬赏群机制。互助分类选择上用多项选择器分成类型—地点—时间三者，能够区分大多数校园互助。

互动窗口上采用了多列型自定义动画弹出窗格设计，将学生申请的互助需要分列显示，超出的字数以省略号代替。多列选择器在页面上方，点击后即可触发“pick”事件进行选择。

窗口下方设有详情和收起两个按钮。点击收起按钮触发收起事件：将弹窗收起;点击详情按钮触发跳转事件跳转至互助详细情况页面。该页面内所有内容将详细展示，且下方的“确认互助”按钮点击后会更新云数据库中该记录的内容，在申请人处“我的”页面会显示已接受和互助人的信息;而在互助人处“互助”页面会显示申请人的信息。在完成后互助人点击确认按钮，云数据库内容更新，申请人处会显示该项申请已完成，此时申请人点击该窗口即可弹出模态弹窗，确认后显示已完成，云数据库删除该记录。这样一次校园互助确认完成。

页面可以进行下拉刷新，触发“onload”事件后可重新调用云数据库更新页面内容（图5）。

5.2 校园互助实际应用

5.2.1 互助查询模块

互助查询模块是校园互助模块的主页，也是该模块的基础。通过调用云函数“db.collection（）.get”，以“pick”多列选择器的返回值为条件进行查询，将返回的数据缓存到本地的数组，利用“wxml”页面的<view>组件表达出来。

5.2.2 我的申请模块

我的申请模块是将学生本人的申请集合到一起的页面。其除了调用云函数“db.collection（）.get”用于本地数组的缓存以外，还有对云数据库的删除功能。将查询到的记录“_id”作为识别码，用“db.collection（）.remove”就能进行对应记录的删除。

5.2.3 接取互助模块

接取互助模块在云函数调用“db.collection（）.get”上添加了搜索条件，能够在云数据库中搜索到对应的记录，并通过点击事件用“db.collection（）.update”进行对应字段“boolean”值的修改来显示该互助是否接取。

5.2.4 我的互助模块

我的互助模块是将学生本人所接取的互助集合到一起的页面。其通过调用云函数“db.collection（）.get”用于本地数组的缓存以外，还使用了“db.collection（）.update”将该记录本身进行改写，修改代表完成状态的字段的“boolean”值来显示是否完成。

6 我的首页

6.1 基本模块

6.1.1 成长历程模块

成长历程是将班级通知中学生个人上传的截图通过调用云函数“db.collection（）.get”将记录中的图片地址“url”和“tempfilePath”缓存到本地数组，通过<view>表达出来。这里的“UI”设计参考了卡片窗口形式的设计。

6.1.2 意见反馈模块

意见反馈是单独的上传页面。通过“db.collection（）.add”将反馈意见和反馈图片上传到单独的集合中。该集合在小程序中未被表达，只能通过云数据库平台查看，降低了反馈信息无法完整反馈给开发人员或者管理人员的可能。

6.1.3 请求互助模块

点击请求互助按钮跳转至申请互助页面，通过“db.collection（）.add”将所需信息填写完整后发送至云数据库。其中类型的选择用“pick”事件的多列选择器进行与互助查询模块一样的分类选择，返回值作为类型的识别码。

6.1.4 个人主页模块

点击上方头像，跳转进入个人主页。以“db.collection（）.get”在数据库中按登录界面登录时记录的学号为条件查询个人信息，在用<view>组件进行表达。展示的信息包括学号、联系方式和信誉积分。信誉积分用于判断是否能进行校园互助。当信誉积分低于某一特定值时，将无法进行校园互助（图6）。

6.2 班级管理模块

6.2.1 完成情况模块

完成情况模块是分为三个页面的组合，只有对应班级管理人员可以查看。第一个页面“db.collection（）.get”得到所有班级通知中需要提交截图的部分并列表显示。每一个任务用<view>组件表达，同时设置点击事件跳转至第二个页面。第二个页面是对应任务的完成人员与未完成人员。未完成人员用数组进行随机排序，而完成人员将会生成与第一个页面类似的列表，点击后会跳转至截图展示与下载页面，点击图片即可下载对应截图。

6.2.2 布置任务模块

布置任务模块采用表单提交的形式，分为三个阶段，只有对应班级管理人员可以查看。一阶段是通过“form”表单提取<textarea>返回的值。第二阶段用第一次点击事件以“db.collection（）.add”的方式将输入值提交到云端，至此二阶段结束。如果该项任务需要提交截图，则进入第三阶段。

6.2.3 布置任务模块三阶段

第三阶段是将表单提交到云数据库生成新记录时提交班级成员名单作为未完成人员。班级人员名单时通过“db.collection（）.get”以班级识别码为条件查询，再导入本地数组[5]。但经多次试验后发现导入情况不佳，常常出现只导入首个或末尾的单条记录。后改用“for”循环单个导入却将其他信息也多次导入，于是开始尝试阶段式完成，即第一部分先创建该项任务记录，再导入人员数据。

第一种方案，延时处理。但是有时会提交到上一个表单，即数据提交发生滞后现象;使用跳转后延时也是同一现象。在多次测试中发现若延时处理设定值为2000有一定概率不发生信息滞后现象，但需要布置一次任务后退出小程序重新登录。尚未得出确切原因，怀疑是本地缓存中对应存放任务识别码的缓存未能及时更新。

第二种方案，将程序提出另作函数，放入“db.collection（）.add”的“success”事件后，得到上传成功后的返回值再执行，但是函数运行到这一步时常常发生卡顿、不执行的现象。尚未得出原因。

第三种方案，再添加一个点击事件，在上传完成后人工点击触发函数，进入“for”循环，每次得到一个班级同学的记录并进行“db.collection（）.update（{_.push}）”将该同学的记录添加到该任务中。这一方案能够完美实现提交班级成员名单，但是过于烦琐，且若是忘记提交就会在云数据库中生成一个空记录，占用空间。

在尝试将第三种方案與模态弹窗结合，在“db.collection（）.add”的“success”事件后添加一组模态弹窗“wx.showModal”，显示“上传成功”提示，点击确定后才能退出。确定按钮触发第三方案的事件。且添加了“wx.removeStorageSync（）”事件，确保对应“db.collection（）.add”的“success”事件后添加一组模态弹窗“wx.showModal”，显示“上传成功”提示，点击确定后才能退出。确定按钮触发第三方案的事件。且添加了“wx.removeStorageSync（）”事件，确保对应缓存在每次循环开始前都是空集合。以此较好解决了数组无法缓存本地以及表单提交数组的问题。

6.3 发布新闻模块

发布新闻模块与发布班级通知类似，且只有校园新闻负责人有权限发布。取消了接收识别码和班级成员，所有用户都可以接收。

7 结束语

1）该软件能提高班级管理人员的工作效率和降低过程中所需的成本。

2）滑动型侧边栏如果主页高度为自动需要设置一定初始值才能运行。

3）云数据库提交过程中如果需要进行for循环对数组依次提交可用分段式，先创建记录，后逐条添加。

为使本程序能够适应在大量数据情况下能够快速检索得到对应数据，仍需要优化预备工作和检索实现过程的各项参数。

参考文献：

[1] 微信小程序登录功能实现（通过用户名和密码）[EB/OL].（2019-07-26）[2021-06-30].https：//blog.csdn.net/weixin_4210 6981/article/details/97403912.

[2] 周文洁.微信小程序开发零基础入门[M].北京：清华大学出版社，2019.

[3] 微信小程序之侧边栏滑动实现[EB/OL].（2018-09-01）[2021-06-30].https：//blog.csdn.net/weidong_y/article/details/8228 9375.

[4] 周文洁.微信小程序开发实战：微课视频版[M].北京：清华大学出版社，2020.