冯颖凌 郑贤智

（南通大学理学院 江苏·南通 226009）

0 引言

我们学生运用手机也可以使我们的校园生活变得更加方便快捷。学生管理系统作为一个学生在校园生活中所不可缺少的应用系统，传统的管理系统需要运用计算机来使用并查询各种信息。这种传统的系统使用方式会有一定的局限性，无法随时随地的让学生使用这个系统，而运用手机所开发一款基于手机智能系统的软件能够方便的解决这个问题。但如果是运用传统的手机APP也会拥有一些问题。不能保证每个学生都会去下载这一 APP。虽然比传统的计算机系统要方便许多但还是会比较有负担。而微信这个通讯程序几乎在所有用户的手机中都有安装。

1 运行环境搭建

1.1 注册小程序账号

要开发微信小程序，需要先注册一个能够使用小程序的账户。我们可以进入微信公众平台官网（https://mp.weixin.qq.com/），注册一个小程序账户，填写完邮箱信息后，可以在信息登记里选择主体类型。主体类型有个人，企业，政府，媒体和其他组织。在这其中，企业、政府、媒体和其他组织均需要进行微信认证才能使用，个人类型包括由自然人注册和运营的公众账号，所以我们选择个人作为主体类型。之后填写完个人身份信息提交后就完成了小程序账号的注册。

1.2 开发环境搭建

在注册完小程序账号后，我们可以用我们注册好的账户登录来进入小程序后台，在后台可以管理你的小程序权限，查看小程序的各种数据报表。登录后在开发设置里获取小程序的APP ID。

之后需要一个工具来开发小程序。开发小程序也可以用如 Sublime Text，WebStorm，Visual Studio Code等常用的开发工具，但考虑到对小程序开发的易用性以及对wxml，wxss的支持，在这里我们选择了微信官方所提供的微信开发者工具来开发我们的小程序，系统为 PC windows10 64位。

2 功能设计

2.1 课表查询

我们在课程表顶部设计了一个弹性盒子flex布局，来完成星期一到星期日的排列，使用wx的for循环来循环显示周期的一到日。并且在左边留了35rpx来空出一部分空间来和侧边对齐。并且选择两种对比度比较高的颜色来设置好背景色和前景色。而且顶部的星期是在最顶部的要素，所以要单独设立标签，并且因为不会有变化，我们固定了他的宽高并且固定在了上方。

还要设计一个节次线条来分割节次，节次线条我们可以通过设计一个高度为节次乘以100rpx，宽度为750rpx的透明箱子，并且设置成只显示底部线条来完成。我们同样可以用wx的for循环来循环显示这个箱子。而节次中我们可以分为上午和下午，通常第五节为上午。我们可以设置循环并且设置一个判断语句，因为循环中index是从0开始，所以要想在第五节的线条来做出区别的话只要判断当index==4的时候，来标记为不同的颜色，其余时候为相同颜色。

2.2 成绩查询、教室查询、考试信息

我们可以把成绩列表中的课程名称、成绩和学分布置到一个盒子中，并且把flex布局中的justify-content属性设置为center，align-items属性同样设置center，这样我们就可以把每一行所显现出来的数据能够非常完美的对齐到一条线中，并且左右的间隔都能够平均的分配出来。

而在表格部分，除了设计弹性盒子flex布局之外，还设置了一个wx的for循环遍历一遍数组，并且设计了两种背景颜色的flex布局样式来更好的区分表格的行数。

教室查询模块和考试信息查询模块同样用了成绩查询模块的设计思路，同样运用了弹性盒子flex布局设计一个表格，教室查询能够根据数组中的数据显示出来各个教室的占用情况，空闲教室通过判断语句判定后把那一串数据标绿显示，用搜索功能可以查询到各个教室的信息。考试信息查询会显示考试的科目、地点和时间，也同样能够搜索查询。

这里的list数组我们也同样可以保存到云数据库中，通过调用云数据库的list数组来获取我们的数据，从而在表格中所显示出来。

2.3 GPA计算器

在GPA计算器这一模块中，我们设计了一个计算功能。用户可以用此模块来计算出GPA绩点。只要输入成绩和学分，就能够一键算出绩点结果，十分方便。

我们先在上方弄了一个文字提示，给用户介绍了此模块的功能和用法。整个界面中间设置了两个输入框，分别能够获取用户所输入的成绩和学分。因为计算GPA绩点需要多个成绩和学分信息，所以我们可以让用户输入多个成绩和学分，并且设置了一个特殊符号，通过这个特殊符号使得输入进来的成绩以及学分相互分开，这样就能一次性获取全部数据。

在我们获取到成绩和学分的两组数组n和g后，可以设一个程序来计算GPA绩点。首先我们要知道GPA绩点的算法是什么样的。GPA的计算方法为成绩减去50后除以10乘以该课程的学分的总和并除以学分的总和。也就是

我们把刚才设置好的计算函数设为add，在页面中设置一个按钮，并且把刚才设置的函数add绑定到这个按钮。我们在输入框输入完数组后，按下绑定了add函数的按钮就能够计算出结果，并且刷新了页面，将获取到的计算结果再显示到我们页面中结果的显示框。我们就完成了整个GPA绩点计算器模块的设计。

2.4 图书馆

在页面的上方，我们设置了一个flex布局，用来制作正在借阅和历史借阅的入口。在下方我们做了一个显示推荐书籍的列表。列表的每单一行设置为一个flex布局，高度设置为150rpx。设定了一个有书籍的标题和简介的list数组。从中可以获取到书籍的标题来显示书籍名称，在下面可以获取到书籍信息，并且把字符大小设为27rpx，并且颜色设置为灰色，从而突出标题并且显得更加美观。单一行的样式设计好后我们可以设置wx的for循环来遍历这个flex布局，通过数组内的书籍来循环显示出一个列表。

2.5 视频资源

视频资源这一模块可以把保存在云开发中云存储里的视频文件在小程序中显示，并且在视频下面显示视频相关的简介。运用video标签来显示视频的链接，用text标签来显示从云数据库获取的视频简介。

2.6 主页

在设计好各个模块的功能后，我们把模块的入口排列到主页上，运用弹性盒子布局，将入口分为三行，并且给每个入口设计一个图标，所有图标的风格要一致，在图标下面显示第个入口的标题。

首先设置一个flex布局，将所有图标居中显示，并在上下设置30rpx的间隔。之后设置image标签来设置图标入口，将其宽度设为25%，并且居中显示。在图片的正文设置一个text标签并命名为各个模块的名称，并在每个图标页面设置一个navigator标签对应各个模块的链接。为了美观，将每一行的图标数量设置不超过三个。

3 小结

本次所设计的学生管理系统是一款基于微信小程序所制作的一款应用程序。本应用程序将学生在日常校园生活中最常用的几个功能做了整合，用微信小程序的方式来制作完成整个系统。学生能够十分方便的使用这个应用，无须下载，上手简单，使用不复杂。

本应用所包含的功能都是学生最常用的几个功能，如课表查询，成绩查询，考试信息查询，GPA计算等，还加入了视频资源，新闻资讯，每日签到，图书馆等功能。

当然，在今后的开发中，我们还可以增加一些功能，比如对收藏的老师的课程，增加提醒功能，每日的作业提醒等，页面中加入美工元素，让页面更美观。