基于微信小程序的校园参赛平台的设计与实现.docx

    基于小程序的校园参赛平台的设计与实现    徐宇帆　余秋明　柴政Summary：大学校园中的各类竞赛可以锻炼大学生的综合能力，但学生对竞赛信息获取渠道的不统一，在各平台官网报名的烦琐性和学校对报名信息管理的低效率，导致学生在获取比赛信息、报名、备赛过程中存在诸多不便通过设计端的小程序综合各类比赛信息，搭建快速简易的参赛平台，在小程序内浏览比赛信息，统一报名，为参赛及组织比赛提供便利Key：校园竞赛;小程序;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） 比赛搜索首先，点击“首页”界面搜索按钮，通过搜索比赛的Key，或者点击用户的搜索历史，查找比赛通过用户输入的Key，系统会快速匹配相关比赛点中任何一个比赛，跳转至比赛详情界面选择上方四个按钮（赛事信息、赛事通知、官方文件、赛事帮助）中的任何一个，可浏览比赛相关详情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.avatarUrlthat.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 _ = mand;exports.main = async （event， context） => {console.log（event.a）try{return awaitdb.collection（"postsLast"）.where（{name：event.a}）.update（{data：{views：_.inc（1）}}）}catch（e）{console.log（"success"，e）;}}这一细节实现了参赛人员简易快速报名和参赛信息修改等功能同时，云函数让开发者使用简易的代码就能快速地连接数据库，大大降低了开发过程的复杂程度在小程序后台设计中，由于CMS（内容管理）与云开发的生态体系紧密结合，在开发阶。