基于微信小程序的高校新生预报到系统设计与实现

李霞

(南京师范大学泰州学院， 信息工程学院， 江苏， 泰州 225300)

0 引言

近几年来我校招生人数在逐年增加，大大增加了新生报到工作的负担。目前，我校学生报到主要是采取传统的现场登记、填写相关表格，报到高峰期学生需要排队，给工作人员和学生都带来了很多不便。目前大多数高校的迎新系统采用传统的PC端Web网站，但由于移动端屏幕尺寸、网页设计风格等，使移动终端用户体验不佳。随着移动应用技术的快速发展，微信小程序依托微信的开发标准开发，可自动适配IOS系统和Android系统。小程序基于跨平台的属性，大大降低了建设维护的成本、提高版本更新的效率[1]。微信小程序即用即走，使用便捷，无需下载安装，充分发挥了移动互联网时代入口轻量化的优势。

针对目前我校传统迎新存在的问题，结合小程序所具备的优势，设计开发基于微信小程序的高校新生预报到程序，将会给新生带来便利，提高迎新工作效率和服务质量。

1 关键技术介绍

1.1 MINA框架简介

微信小程序采用MINA应用框架。框架主要包含：页面视图层和应用逻辑层。页面视图层由wxml与wxss文件组成，处理事务交给AppService应用逻辑层处理，视图层和逻辑层通过JSBridge实现通信。MINA框架封装了文件系统、网络通信、任务管理等基础功能，对上层提供JavaScript API，开发者可以使用微信客户端提供的各种功能，快速构建应用[2-6]。微信小程序的框架如图1所示。

图1 微信小程序框架图

1.2 小程序云开发

小程序云开发平台，提供云函数、云数据库等数据存储的一项后端云服务。微信小程序云提供的是JSON格式数据库，通过调用add()，remove()，update()，get()方法进行数据的增加、删除、修改和查找，同时支持在控制台进行可视化管理。小程序提供的云存储，通过调用uploadFile()、downloadFile()、deleteFile()方法进行文件的上传、下载和删除，并支持对文件设置访问权限[7]。云函数是运行在云端的代码，运用callFunction()来调用云函数，如果涉及其他用户改动他人创建的数据，建议使用云函数。

2 微信小程序预报到系统结构设计

2.1 系统要求

小程序预报到系统主要用在正式报到前，新生通过该系统提前了解学校最新通知，宿舍安排、课表和熟悉校园周边环境以及进行个人信息和返校方式的登记。因此，小程序预报到系统必须满足如下要求。

(1) 易操作。对手机系统没有特别要求，可以跨平台访问，新生只需要扫描小程序码，无需下载安装，成功登录后可使用相应的服务，同时高校新生预报到系统要界面美观、简洁，给用户良好的体验。

(2) 实用性。系统能够帮助新生提前熟悉校园和周边，了解学校最新通知、室友、课表等，同时便于教师提前掌握学生的基本信息、返校时间和方式，有助于新生接待工作的合理安排。

(3) 健壮性。高校新生预报到系统依托微信小程序开发平台，使用JavaScript作为开发的高级程序语言，使用小程序云数据库存储技术，使得小程序运行平稳，系统能够克服用户可能出现的错误。

2.2 系统功能设计

高校新生预报到系统可以提高新生的报到效率，在学校与新生之间搭起一个信息交流的平台。该系统不但有助于学生随时知悉学校的通知公告，还能够帮助学校根据学生填报的返校信息做出个性化的迎接服务。整个系统的功能可以划分为8个主要模块，功能结构如图2所示。

图2 系统功能模块图

(1) 登录模块。新生在使用系统前，需要根据相应账号和密码进行登录，成功登录后才可以使用相关功能。

(2) 学校概览。该模块主要包括学校简介、学校美景、院系分布、来校路线等，方便学生更好地了解新学校，便于将来迅速融入新环境。

(3) 通知公告。新生登录后，可以查看入学通知信息，入学指南，报到地点，报到注意事项等。管理员可以发布、修改、删除发布的通知。

(4) 课表查询。根据班级查询当前学期的课表，新生可提前熟悉本学期所要学习的课程，这样可以快速适应大学的学习节奏。

(5) 宿舍查询。通过宿舍查询，学生可以了解宿舍信息以及室友的简单信息。[10]

(6) 新生交流。新生可以发布讨论贴，交流入学相关问题，缓解对新环境的焦虑。

(7) 信息登记。新生填写个人身份信息、联系方式、家庭住址、报道时间和方式等，方便学校建立电子档案、布署接待工作等。

(8) 问题反馈。一方面可以收集使用中存在的问题，从而可以进行版本的优化和完善；另一方面收集新生给学校提出的建议，方便学校及时了解他们的诉求，精确地帮助新生解决问题。

2.3 系统数据库设计

新生预报到系统使用小程序云数据库作为系统后台数据库，系统使用的集合有：用户信息、通知信息、话题讨论、学生返校信息、反馈信息等。系统中通知信息集合，用来存储管理发布的通知，含有标题、发布时间、发布内容等字段。话题讨论集合，主要存储用户在讨论区内发布的内容，包括话题发布者姓名、发布者头像信息、话题内容、话题图片等字段[11]。学生返校信息集合，主要保存新生填写的入学信息，来校方式、报到方式等，便于学校进行统计。通知信息集合、话题讨论集合、学生返校信息集合中包含的字段和类型分别如表1—表3所示。

表1 通知信息集合

表2 话题讨论集合

3 系统功能实现

新生首先通过账号和密码登录该系统，系统将输入的数据与云端数据库进行匹配，匹配成功则默认进入“首页”，否则提示信息有误。接着可以通过tabBar进行页面切换，“首页”可以查看学院简介、校园美景、最新通知等；在“校园服务”模块中新生可以查询课表、宿舍以及进行发帖讨论；在“我的”模块，新生可以进行返校信息登记、系统使用问题和对学校相关工作的建议。预报到系统的使用流程如图3所示。

表3 学生返校信息集合

图3 系统操作流程

3.1 校园首页模块的实现

首页内容主要展示校园的一些信息，上半部分为swiper组件，轮播校园迎新海报；下半部分通过scroll-view显示navigator组件，用来展示学校的基本情况，比如学院简介、校园美景、院系分布、校园VR、通知公告等。点击相应组件，则链接到学校相应的页面。首页界面设计的部分wxml代码如下所示。首页界面效果如图4所示。

……

……

图4 系统首页

3.2 通知公告模块的实现

通知公告页面视图主要运用了image和view组件，通过wxss样式来控制组件的显示效果。首先通过wx.cloud.database( )进行数据库的初始化工作，然后通过get( )方法查询云数据的通知集合，调用setData( )方法，将转置后的数据存储到datalist[]数组中。在视图层通过wx:for列表渲染出通知集合中的通知内容。通过点击通知项，可以跳转到相应的通知详细页面。查询通知的部分代码如下所示。通知公告显示效果如图5所示。

const db = wx.cloud.database({

env: 'welcome-67unz'

})

db.collection('broadcast')

.get()

.then(res => {

this.setData({

datalist: res.data.reverse()

})

})

.catch(res => {

console.log("获取失败", res)

})

……

3.3 个人信息模块的实现

通过tabBar切换到“我的”页面，用户通过完善返校信息入口，填写返校信息。页面设计综合使用了text，label，input，radio，picker，textarea等组件。完善返校信息界面,如图6所示。用户选择报道方式时，有四个选项可供选择：按时报道、请假、申请保留入学资格、放弃入学。系统根据用户的选择，提示用户进一步完善信息。例如，如果选择按时报到，需补充具体的返校日期、返校方式、随行人数等信息。用户提交信息，触发表单的submit事件，通过调用数据库的add( )方法，将数据上传至云数据库中。部分代码如下。

图6 完善返校信息

var that = this

var backdata = db.collection('backdata')

app.globalData.uploadinfo = true

app.globalData.navurl = ""

backdata.add({

data: {

stuname: that.data.stuname,

stusex: that.data.stusex,

stubirthDay: that.data.stubirthDay,

stuphone: that.data.stuphone,

……

stuqingjiareason: that.data.stuqingjiareason,

stubaoliuzige: that.data.stubaoliuzige,

stufangqireason: that.data.stufangqireason

}

})

4 总结

微信小程序具有“轻、精、快、简”的轻量化特征，它是具有非凡潜力的新应用模式[12]。基于微信小程序的高校新生预报到系统，既能够让新生提前熟悉校园环境、课表和室友等，又方便教师采集新生基本信息，提前掌握新生报到时间和方式，便于迎新工作的科学安排。该系统具有很高的实际应用价值和推广意义，并且在后续使用过程中，通过功能的扩展，可以助力校园管理，发挥更大的作用。