基于微信小程序的校园参赛平台的设计与实现
2022-05-09徐宇帆余秋明柴政
徐宇帆 余秋明 柴政
摘要：大学校园中的各类竞赛可以锻炼大学生的综合能力，但学生对竞赛信息获取渠道的不统一，在各平台官网报名的烦琐性和学校对报名信息管理的低效率，导致学生在获取比赛信息、报名、备赛过程中存在诸多不便。通过设计手机端的微信小程序综合各类比赛信息，搭建快速简易的参赛平台，在小程序内浏览比赛信息，统一报名，为参赛及组织比赛提供便利。
关键词：校园竞赛;小程序;HTML;JavaScript;云开发
中图分类号：TP311 文献标识码：A
文章编号：1009-3044（2022）07-0063-04
在“万众创新，大众创业”“以赛促学，以赛促教”的社会背景和趋势下，为培养广大青年学生的创新意识，提高创新思维和实践能力，国家各部门组织、全国各大高校、社会企业每年都会举办多种学科竞赛和创新型科技比赛，吸引了各高校学生积极参与。但学生对竞赛信息获取渠道的不统一，在各平台官网报名的烦琐性和学校对报名信息管理的低效率，使得学生对竞赛信息掌握不够充分，错过报名适合自身的比赛，从而錯过了锻炼自己的机会，在校大学生和比赛组织者迫切希望使用统一并且简易上手的参赛平台，为学生参赛提供便利。
1 设计背景
1.1 问题提出
学科竞赛对学生个人素质的培养和能力的提升具有重大意义，近年来参加各类学科竞赛的学生人数不断增加。目前我国还没有较为完善的学科竞赛管理体系，在采访过程中不少学生反映在获取比赛信息、报名、备赛过程中存在诸多不便。
传统的人工管理模式效率低下。电脑端竞赛网大部分比赛主要通过传统的将报名表发送到指定邮箱报名，团队信息需要人工手动录入整理。在不同类别的比赛视频、分享资料等还要通过添加其他公众号然后发送信息到后台获取。
更主要的是，这种模式对学生个体针对性不强。竞赛网主要以网络知识竞赛为主，通过线上答题的方式考查学生。这些比赛面向社会广大青年学生，对每位学生主体没有较强的针对性和个性化处理。
1.2 市场需求和形势
1） 纳入全国普通高校竞赛评估的项目逐年增多
2019年1月通过15项竞赛增列入2014—2018年高校竞赛评估排行榜，其中本科类竞赛12项，高职类竞赛3项，列入排行榜的竞赛项目从原来的“18+1”项转变为“30+4项”。2021年3月9日新增13项竞赛纳入2020全国普通高校大学生竞赛排行榜。纳入排行榜的全部竞赛项目共57项。这充分体现了国家对培养大学生创新能力的重视，每年高校竞赛排行榜引起社会高度关注，各类竞赛项目高密度开展。
2） 竞赛覆盖面积广
就目前国内开展学科竞赛的种类来看，学科竞赛几乎覆盖了高校所有大学科。就竞赛的举办层次来看，有的仅仅是面向校内或者是二级学院的竞赛，同时也有省级、区域级、国家级乃至国际级的竞赛，例如ACM国际大学生程序设计竞赛。可以说，现在已基本形成了面向不同学科、不同层次的全面覆盖的学科竞赛。
3） 竞赛参与人数逐年增加
根据图1可知每届参加挑战杯全国比赛的高校、人数增多。2020年“挑战杯”大学生创业计划竞赛四川省省赛是迄今为止该省内高校参赛规模最大、影响范围最广的一届。自7月启动以来，受到了全省师生的广泛关注，共吸引全省94所大中专学校逾万名学生参与，相比上届参赛学校数量增加了36.2%。
2 系统设计概述
2.1 系统介绍
该系统设计名称为赛易服。赛易服微信小程序含义为“让赛事更简单”，即让用户更方便快捷创建比赛、管理比赛、参加比赛。目的是解决当前“组织比赛难”“管理比赛不便”“参加比赛麻烦”“比赛分散”等痛点，填补“创建、管理、参加”为一体的比赛服务平台的空白。
设计理念为：与校方合作方便本校赛事组织者创建、管理比赛，同时为本校学生提供手机端微信小程序的参赛平台参加比赛。小程序还收集了校外官方赛事，用户可以直接在本平台个性化选择比赛报名，集各类学科赛事于一体，免去了进入某一类别的赛事网站参加比赛这一过程中许多烦琐的步骤。
2.2 系统功能设计
设计该微信小程序[1-2]主要功能如图2 所示。
1） 学校绑定
用户使用微信登录后，点击“我的-绑定”，输入正确的学号进行学校绑定。
2） 比赛创建
线下：赛事组织者通过上报需要举行的比赛请求与材料，获得学校审批后，将材料交予创建比赛管理员（如辅导员等负责教师）。
线上：赛事组织者登录小程序的“校园比赛后台管理”，输入比赛相关信息，选择比赛类别，上传比赛相关文件，设置比赛开始和结束时间，即可创建比赛。
3） 比赛搜索
首先，点击“首页”界面搜索按钮，通过搜索比赛的关键词，或者点击用户的搜索历史，查找比赛。通过用户输入的关键词，系统会快速匹配相关比赛。点中任何一个比赛，跳转至比赛详情界面。选择上方四个按钮（赛事信息、赛事通知、官方文件、赛事帮助）中的任何一个，可浏览比赛相关详情。
4） 比赛报名
用户可以绑定学校后，在“我的大学”分栏报名校内比赛，也可以在“推荐”分栏报名校外比赛。报名校内比赛：用户点击“我的大学”中想要参与的校内比赛，进入比赛详情界面，选择报名比赛。队长初步填写好相关信息，点击报名按钮则报名成功。报名校外比赛：小程序收集校外比赛，用户点击“推荐”则自动跳转到校外比赛网址，用户找到报名入口从而报名比赛。
5） 团队管理
参赛队长点击“我的”界面中的“团队管理”，对已经参加比赛进行团队管理，可以再次修改团队的信息，如：队名、队员、指导老师、项目简介等。
2.3 具体功能设计
1） 比赛详情信息浏览及报名
在详情页面展示该比赛的详情、通知、官方文件、帮助文档等。在页面中提供点赞、关注、报名三个关键按钮。报名按钮会随报名时间而变化，若报名时间已过，则按钮无法点击，显示报名已截止。若时间未过可填写团队信息进行报名。点击关注则会将比赛加入关注列表中，数据库中的关注表中添加该比赛，将此比赛展示在关注页面中（图3）。
2） 赛事组织者创建比赛
由于比赛大都需要依靠学校方面发布，小程序使用了云开发的可视化内容管理平台（CMS）为赛事组织者管理比赛信息。赛事组织者需使用我们提供的管理员账户及密码，进入editor界面，进行创建比赛、发布全局消息、修改比赛信息（例如发布比赛信息）、管理参赛团队等操作（图4）。
2.4 设计创新点
交互设计方面，首页结合新闻类简约、美观UI设计（如图5所示），操作简易，方便用户浏览比赛信息，为用户指明方向，快速获取校内外的各类比赛信息，以及用户特别关注的赛事，引导用户点击符合自身优势，想要参加的比赛，并快捷报名。让小程序具有簡易性和实用性。
前端，团队信息可一键生成，解决传统的在Excel表等手动登记参赛团队信息。通过绑定学校的方式，可以浏览本校比赛。同时，比赛有明确的分类和多种排序方式，用户可以选择相应比赛类别，自动定位至该类比赛，也可以对比赛按照多种方式排序如（点击量、用户偏好、最新等），提高比赛关注度与学生参与感。
后端，通过云开发后台，学校的赛事管理员能在电脑端创建与管理比赛，在手机端呈现，保证了比赛的准确性与公正性。
3 技术选型及重点功能设计实现
3.1 云开发模式
赛易服小程序的开发过程采用了微信小程序云开发模式[3]，采用一种无服务（Serverless）的模式开发小程序。云开发模式提供了与小程序云生态完美适配的三大基础能力：云函数、云数据库、云存储，采用微信小程序云开发模式大大提升了小程序的开发效率，同时极大地节约了开发的成本。在本小程序设计实现的过程中，云开发模式都为我们开发人员提供了极大的便利，更专注于业务的逻辑。
1） 总体开发进程方面
微信小程序云开发模式弱化了后端以及运维的概念，为开发者提供了一种无服务（Serverless）的模式。
2） 实现小程序用户注册登录
微信小程序云开发模式中，在云函数内使用wx-server-sdk提供的getWXContext方法，能快速方便地打通微信开放能力（直接获取用户凭证Openid）。通过获取的唯一开放身份ID：openid授权登录，用户无须注册、登录等烦琐操作。
而传统的小程序登录方式分为两种：
一种是通过自己设计用户名、密码的核验方法，将用户名、密码成对存入数据库。这种方式不仅开发过程复杂（需要另外设计安全系数较高的表单验证系统），同时放弃了微信自带的用户凭证openid，使用另一套用户名与密码体系，让用户的身份信息安全无法受到保障。
另一种则是调用微信自带API获取openid。首先在用户端调用wx.login从微信服务器中获取code，然后调用wx.request将code传递给后端服务器，用code换取openid和session_key，最后后端服务器将用户的标识发送给小程序本地存储。这种登录方式虽然比第一种更加安全，且免去了复杂的开发表单验证系统的过程，但是要经过微信服务器以及后端服务器的处理，意味着需要前后端联调，侧重于后端的配置与部署。
云开发中的登录方式的优势在于用户在第一次登录时自动调用云函数，云函数自动获取用户信息（openid），并自动将小程序的用户信息存储到云数据库，使得登录变得稳定、可靠、高效、便捷。使用云开发模式下的登录方式，用户可免注册直接进入小程序，优先浏览赛事页面（若参赛则需要绑定学号），增强了用户的体验感，体现小程序的简易性与报名系统结合。
关键JS代码[4]如下：
getOpenid（） {
let that = this;
wx.cloud.callFunction（{
name： 'getOpenid'，
complete： res => {
console.log（res.result）
that.openid = res.result.openid
}
}）
wx.login（{
success： function （） {
wx.getUserInfo（{
success： function （e） {
console.log（e.userInfo.avatarUrl）
console.log（e.userInfo.nickName）
that.avatarUrl = e.userInfo.avatarUrl
that.nickName = e.userInfo.nickName
}
3.2 小程序开发环境
1） 采用WXSS、ES6、WXML、JS;
2） 微信小程序基础库版本2.11.0及其以上;
3） 微信小程序云数据库。
3.3 云数据库与CMS（内容管理）结合使用
使用云开发[5]中的云数据库（JSON数据库）和CMS（内容管理）作为后端服务器。
CMS（内容管理）是基于云开发搭建[6]的可视化的内容管理平台，提供了丰富的内容管理功能，开通简单，无须编写代码即可使用。
该小程序创新性地调用了微信云函数，对云数据库数据进行增删改查等操作。
相关JS关键代码[如下：
const cloud = require（'wx-server-sdk'）;
cloud.init（）;
const db = cloud.database（）;
const _ = db.command;
exports.main = async （event， context） => {
console.log（event.a）
try{
return await
db.collection（"postsLast"）.where（{name：event.a}）.update（{
data：{
views：_.inc（1）
}
}）
}catch（e）{
console.log（"success"，e）;
}}
这一细节实现了参赛人员简易快速报名和参赛信息修改等功能。同时，云函数让开发者使用简易的代码就能快速地连接数据库，大大降低了开发过程的复杂程度。
在小程序后台设计中，由于CMS（内容管理）与微信云开发的生态体系紧密结合，在开发阶段，开发者省去了自己搭建服务器管理后台信息的烦琐操作，直接使用CMS（内容管理）作为小程序简易服务器，在云开发生态中与云数据库连接，管理数据库内容。
另外，CMS（内容管理）支持多账号登录，完美适配赛易服微信小程序赛事组织者、程序维护人员等角色。赛事组织者，程序维护人员（一般为开发人员）都可注册并且使用。赛事组织者可在CMS（内容管理）平台上注册之后进行一些简单的配置，就可使用 CMS 内容管理系统来管理信息内容（如图6所示），方便进行上传赛事图片和赛事文件等内容信息，同时更好地对赛事信息，参赛团队信息进行管理。
3.4 WxValidate表单验证
小程序使用WxValidate插件对表单进行验证。用户在提交表单时如果填写错误的数据格式时会触发应用的自动核验并采用轻提示提醒用户，输入格式不合法，直至用户输入合法的数据内容。
相关JS关键代码如下：
initValidate（） {
const rules = {
teamname： {
required： true，
rangelength： [1， 5]
}，
}
const messages = {
teamname： {
required： '请填写团队名'，
rangelength： '请输入正确的团队名'
}}
this.WxValidate = new WxValidate（rules， messages）
}，
if（！this.WxValidate.checkForm（params）） {
const error = this.WxValidate.errorList[0]
this.showModal（error）
if （error.param == "teamname"） {
this.setData（{
error： true
}）
}
這一设计确保了参赛人员、赛事组织者在填写表单（如：参赛信息、创建比赛信息）时的正确性，在微信小程序快捷、便利的前提下，保证了校园参赛平台需要的严谨、稳定的理念。
4 系统重点功能实现
1） 比赛分类查看。点击比赛分类图标，显示各类比赛。点击“商业”比赛自动定位该类比赛。
2） 进入一个比赛点击报名，输入报名信息。
5 结论
该小程序解决了当前比赛存在 “组织比赛难”“管理比赛不便”“参加比赛麻烦”“比赛分散”等痛点问题，填补“创建、管理、参加”为一体的校园参赛平台的空白。实现为各大高校提供集“创建、管理、参加”为一体的校园参赛平台，为高校学生提供一个在手机端就能浏览赛事信息，获取赛事资源，与同学组队一键报名的简易小程序，达到“为比赛而生，使比赛更简单”的设计理念。
参考文献：
[1] 杨启，张丽萍.从互联网生态看微信小程序的发展[J].新闻论坛，2017（2）：22-24.
[2] 王天泥.当图书馆遇上微信小程序[J].图书与情报，2016（6）：83-86.
[3] 基夫·莫里斯.基础设施即代码 云服务器管理[M].北京：人民邮电出版社，2018.
[4] Frisbie M.JavaScript高级程序设计[M].李松峰，译.北京：人民邮电出版社，2020.
[5] 刘红卫.微信小程序应用探析[J].无线互联科技，2016（23）：11-12，40.
[6] 陈琦.基于Webpy+Apache HTTP Server的微信小程序架构搭建研究[J].无线互联科技，2017（18）：50-51.
【通联编辑：闻翔军】
收稿日期：2021-11-08
基金项目： 国家级大学生创新创业训练项目（编号：202010407041）
作者简介：徐宇帆（2001—），男，广东广州人，本科在读， 研究方向为虚拟现实技术、微信小程序开发，主持2020年国家级大学生创新创业训练项目;余秋明（1980—），男，江西奉新人，讲师，工学硕士，研究方向为教育教学、软件人才培养、智能数据库;柴政（1982—），男，浙江上虞人，讲师，硕士，研究方向为数字信号处理。
