基于微信小程序的校園參賽平臺(tái)的設(shè)計(jì)與實(shí)現(xiàn)

徐宇帆　余秋明　柴政

摘要：大學(xué)校園中的各類競(jìng)賽可以鍛煉大學(xué)生的綜合能力，但學(xué)生對(duì)競(jìng)賽信息獲取渠道的不統(tǒng)一，在各平臺(tái)官網(wǎng)報(bào)名的煩瑣性和學(xué)校對(duì)報(bào)名信息管理的低效率，導(dǎo)致學(xué)生在獲取比賽信息、報(bào)名、備賽過程中存在諸多不便。通過設(shè)計(jì)手機(jī)端的微信小程序綜合各類比賽信息，搭建快速簡(jiǎn)易的參賽平臺(tái)，在小程序內(nèi)瀏覽比賽信息，統(tǒng)一報(bào)名，為參賽及組織比賽提供便利。

關(guān)鍵詞：校園競(jìng)賽;小程序;HTML;JavaScript;云開發(fā)

中圖分類號(hào)：TP311? ? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2022）07-0063-04

在“萬眾創(chuàng)新，大眾創(chuàng)業(yè)”“以賽促學(xué)，以賽促教”的社會(huì)背景和趨勢(shì)下，為培養(yǎng)廣大青年學(xué)生的創(chuàng)新意識(shí)，提高創(chuàng)新思維和實(shí)踐能力，國家各部門組織、全國各大高校、社會(huì)企業(yè)每年都會(huì)舉辦多種學(xué)科競(jìng)賽和創(chuàng)新型科技比賽，吸引了各高校學(xué)生積極參與。但學(xué)生對(duì)競(jìng)賽信息獲取渠道的不統(tǒng)一，在各平臺(tái)官網(wǎng)報(bào)名的煩瑣性和學(xué)校對(duì)報(bào)名信息管理的低效率，使得學(xué)生對(duì)競(jìng)賽信息掌握不夠充分，錯(cuò)過報(bào)名適合自身的比賽，從而錯(cuò)過了鍛煉自己的機(jī)會(huì)，在校大學(xué)生和比賽組織者迫切希望使用統(tǒng)一并且簡(jiǎn)易上手的參賽平臺(tái)，為學(xué)生參賽提供便利。

1 設(shè)計(jì)背景

1.1 問題提出

學(xué)科競(jìng)賽對(duì)學(xué)生個(gè)人素質(zhì)的培養(yǎng)和能力的提升具有重大意義，近年來參加各類學(xué)科競(jìng)賽的學(xué)生人數(shù)不斷增加。目前我國還沒有較為完善的學(xué)科競(jìng)賽管理體系，在采訪過程中不少學(xué)生反映在獲取比賽信息、報(bào)名、備賽過程中存在諸多不便。

傳統(tǒng)的人工管理模式效率低下。電腦端競(jìng)賽網(wǎng)大部分比賽主要通過傳統(tǒng)的將報(bào)名表發(fā)送到指定郵箱報(bào)名，團(tuán)隊(duì)信息需要人工手動(dòng)錄入整理。在不同類別的比賽視頻、分享資料等還要通過添加其他公眾號(hào)然后發(fā)送信息到后臺(tái)獲取。

更主要的是，這種模式對(duì)學(xué)生個(gè)體針對(duì)性不強(qiáng)。競(jìng)賽網(wǎng)主要以網(wǎng)絡(luò)知識(shí)競(jìng)賽為主，通過線上答題的方式考查學(xué)生。這些比賽面向社會(huì)廣大青年學(xué)生，對(duì)每位學(xué)生主體沒有較強(qiáng)的針對(duì)性和個(gè)性化處理。

1.2 市場(chǎng)需求和形勢(shì)

1） 納入全國普通高校競(jìng)賽評(píng)估的項(xiàng)目逐年增多

2019年1月通過15項(xiàng)競(jìng)賽增列入2014—2018年高校競(jìng)賽評(píng)估排行榜，其中本科類競(jìng)賽12項(xiàng)，高職類競(jìng)賽3項(xiàng)，列入排行榜的競(jìng)賽項(xiàng)目從原來的“18+1”項(xiàng)轉(zhuǎn)變?yōu)椤?0+4項(xiàng)”。2021年3月9日新增13項(xiàng)競(jìng)賽納入2020全國普通高校大學(xué)生競(jìng)賽排行榜。納入排行榜的全部競(jìng)賽項(xiàng)目共57項(xiàng)。這充分體現(xiàn)了國家對(duì)培養(yǎng)大學(xué)生創(chuàng)新能力的重視，每年高校競(jìng)賽排行榜引起社會(huì)高度關(guān)注，各類競(jìng)賽項(xiàng)目高密度開展。

2） 競(jìng)賽覆蓋面積廣

就目前國內(nèi)開展學(xué)科競(jìng)賽的種類來看，學(xué)科競(jìng)賽幾乎覆蓋了高校所有大學(xué)科。就競(jìng)賽的舉辦層次來看，有的僅僅是面向校內(nèi)或者是二級(jí)學(xué)院的競(jìng)賽，同時(shí)也有省級(jí)、區(qū)域級(jí)、國家級(jí)乃至國際級(jí)的競(jìng)賽，例如ACM國際大學(xué)生程序設(shè)計(jì)競(jìng)賽?？梢哉f，現(xiàn)在已基本形成了面向不同學(xué)科、不同層次的全面覆蓋的學(xué)科競(jìng)賽。

3） 競(jìng)賽參與人數(shù)逐年增加

根據(jù)圖1可知每屆參加挑戰(zhàn)杯全國比賽的高校、人數(shù)增多。2020年“挑戰(zhàn)杯”大學(xué)生創(chuàng)業(yè)計(jì)劃競(jìng)賽四川省省賽是迄今為止該省內(nèi)高校參賽規(guī)模最大、影響范圍最廣的一屆。自7月啟動(dòng)以來，受到了全省師生的廣泛關(guān)注，共吸引全省94所大中專學(xué)校逾萬名學(xué)生參與，相比上屆參賽學(xué)校數(shù)量增加了36.2%。

2 系統(tǒng)設(shè)計(jì)概述

2.1 系統(tǒng)介紹

該系統(tǒng)設(shè)計(jì)名稱為賽易服。賽易服微信小程序含義為“讓賽事更簡(jiǎn)單”，即讓用戶更方便快捷創(chuàng)建比賽、管理比賽、參加比賽。目的是解決當(dāng)前“組織比賽難”“管理比賽不便”“參加比賽麻煩”“比賽分散”等痛點(diǎn)，填補(bǔ)“創(chuàng)建、管理、參加”為一體的比賽服務(wù)平臺(tái)的空白。

設(shè)計(jì)理念為：與校方合作方便本校賽事組織者創(chuàng)建、管理比賽，同時(shí)為本校學(xué)生提供手機(jī)端微信小程序的參賽平臺(tái)參加比賽。小程序還收集了校外官方賽事，用戶可以直接在本平臺(tái)個(gè)性化選擇比賽報(bào)名，集各類學(xué)科賽事于一體，免去了進(jìn)入某一類別的賽事網(wǎng)站參加比賽這一過程中許多煩瑣的步驟。

2.2 系統(tǒng)功能設(shè)計(jì)

設(shè)計(jì)該微信小程序[1-2]主要功能如圖2 所示。

1） 學(xué)校綁定

用戶使用微信登錄后，點(diǎn)擊“我的-綁定”，輸入正確的學(xué)號(hào)進(jìn)行學(xué)校綁定。

2） 比賽創(chuàng)建

線下：賽事組織者通過上報(bào)需要舉行的比賽請(qǐng)求與材料，獲得學(xué)校審批后，將材料交予創(chuàng)建比賽管理員（如輔導(dǎo)員等負(fù)責(zé)教師）。

線上：賽事組織者登錄小程序的“校園比賽后臺(tái)管理”，輸入比賽相關(guān)信息，選擇比賽類別，上傳比賽相關(guān)文件，設(shè)置比賽開始和結(jié)束時(shí)間，即可創(chuàng)建比賽。

3） 比賽搜索

首先，點(diǎn)擊“首頁”界面搜索按鈕，通過搜索比賽的關(guān)鍵詞，或者點(diǎn)擊用戶的搜索歷史，查找比賽。通過用戶輸入的關(guān)鍵詞，系統(tǒng)會(huì)快速匹配相關(guān)比賽。點(diǎn)中任何一個(gè)比賽，跳轉(zhuǎn)至比賽詳情界面。選擇上方四個(gè)按鈕（賽事信息、賽事通知、官方文件、賽事幫助）中的任何一個(gè)，可瀏覽比賽相關(guān)詳情。

4） 比賽報(bào)名

用戶可以綁定學(xué)校后，在“我的大學(xué)”分欄報(bào)名校內(nèi)比賽，也可以在“推薦”分欄報(bào)名校外比賽。報(bào)名校內(nèi)比賽：用戶點(diǎn)擊“我的大學(xué)”中想要參與的校內(nèi)比賽，進(jìn)入比賽詳情界面，選擇報(bào)名比賽。隊(duì)長初步填寫好相關(guān)信息，點(diǎn)擊報(bào)名按鈕則報(bào)名成功。報(bào)名校外比賽：小程序收集校外比賽，用戶點(diǎn)擊“推薦”則自動(dòng)跳轉(zhuǎn)到校外比賽網(wǎng)址，用戶找到報(bào)名入口從而報(bào)名比賽。

5） 團(tuán)隊(duì)管理

參賽隊(duì)長點(diǎn)擊“我的”界面中的“團(tuán)隊(duì)管理”，對(duì)已經(jīng)參加比賽進(jìn)行團(tuán)隊(duì)管理，可以再次修改團(tuán)隊(duì)的信息，如：隊(duì)名、隊(duì)員、指導(dǎo)老師、項(xiàng)目簡(jiǎn)介等。

2.3 具體功能設(shè)計(jì)

1） 比賽詳情信息瀏覽及報(bào)名

在詳情頁面展示該比賽的詳情、通知、官方文件、幫助文檔等。在頁面中提供點(diǎn)贊、關(guān)注、報(bào)名三個(gè)關(guān)鍵按鈕。報(bào)名按鈕會(huì)隨報(bào)名時(shí)間而變化，若報(bào)名時(shí)間已過，則按鈕無法點(diǎn)擊，顯示報(bào)名已截止。若時(shí)間未過可填寫團(tuán)隊(duì)信息進(jìn)行報(bào)名。點(diǎn)擊關(guān)注則會(huì)將比賽加入關(guān)注列表中，數(shù)據(jù)庫中的關(guān)注表中添加該比賽，將此比賽展示在關(guān)注頁面中（圖3）。

2） 賽事組織者創(chuàng)建比賽

由于比賽大都需要依靠學(xué)校方面發(fā)布，小程序使用了云開發(fā)的可視化內(nèi)容管理平臺(tái)（CMS）為賽事組織者管理比賽信息。賽事組織者需使用我們提供的管理員賬戶及密碼，進(jìn)入editor界面，進(jìn)行創(chuàng)建比賽、發(fā)布全局消息、修改比賽信息（例如發(fā)布比賽信息）、管理參賽團(tuán)隊(duì)等操作（圖4）。

2.4 設(shè)計(jì)創(chuàng)新點(diǎn)

交互設(shè)計(jì)方面，首頁結(jié)合新聞?lì)惡?jiǎn)約、美觀UI設(shè)計(jì)（如圖5所示），操作簡(jiǎn)易，方便用戶瀏覽比賽信息，為用戶指明方向，快速獲取校內(nèi)外的各類比賽信息，以及用戶特別關(guān)注的賽事，引導(dǎo)用戶點(diǎn)擊符合自身優(yōu)勢(shì)，想要參加的比賽，并快捷報(bào)名。讓小程序具有簡(jiǎn)易性和實(shí)用性。

前端，團(tuán)隊(duì)信息可一鍵生成，解決傳統(tǒng)的在Excel表等手動(dòng)登記參賽團(tuán)隊(duì)信息。通過綁定學(xué)校的方式，可以瀏覽本校比賽。同時(shí)，比賽有明確的分類和多種排序方式，用戶可以選擇相應(yīng)比賽類別，自動(dòng)定位至該類比賽，也可以對(duì)比賽按照多種方式排序如（點(diǎn)擊量、用戶偏好、最新等），提高比賽關(guān)注度與學(xué)生參與感。

后端，通過云開發(fā)后臺(tái)，學(xué)校的賽事管理員能在電腦端創(chuàng)建與管理比賽，在手機(jī)端呈現(xiàn)，保證了比賽的準(zhǔn)確性與公正性。

3 技術(shù)選型及重點(diǎn)功能設(shè)計(jì)實(shí)現(xiàn)

3.1 云開發(fā)模式

賽易服小程序的開發(fā)過程采用了微信小程序云開發(fā)模式[3]，采用一種無服務(wù)（Serverless）的模式開發(fā)小程序。云開發(fā)模式提供了與小程序云生態(tài)完美適配的三大基礎(chǔ)能力：云函數(shù)、云數(shù)據(jù)庫、云存儲(chǔ)，采用微信小程序云開發(fā)模式大大提升了小程序的開發(fā)效率，同時(shí)極大地節(jié)約了開發(fā)的成本。在本小程序設(shè)計(jì)實(shí)現(xiàn)的過程中，云開發(fā)模式都為我們開發(fā)人員提供了極大的便利，更專注于業(yè)務(wù)的邏輯。

1） 總體開發(fā)進(jìn)程方面

微信小程序云開發(fā)模式弱化了后端以及運(yùn)維的概念，為開發(fā)者提供了一種無服務(wù)（Serverless）的模式。

2） 實(shí)現(xiàn)小程序用戶注冊(cè)登錄

微信小程序云開發(fā)模式中，在云函數(shù)內(nèi)使用wx-server-sdk提供的getWXContext方法，能快速方便地打通微信開放能力（直接獲取用戶憑證Openid）。通過獲取的唯一開放身份ID：openid授權(quán)登錄，用戶無須注冊(cè)、登錄等煩瑣操作。

而傳統(tǒng)的小程序登錄方式分為兩種：

一種是通過自己設(shè)計(jì)用戶名、密碼的核驗(yàn)方法，將用戶名、密碼成對(duì)存入數(shù)據(jù)庫。這種方式不僅開發(fā)過程復(fù)雜（需要另外設(shè)計(jì)安全系數(shù)較高的表單驗(yàn)證系統(tǒng)），同時(shí)放棄了微信自帶的用戶憑證openid，使用另一套用戶名與密碼體系，讓用戶的身份信息安全無法受到保障。

另一種則是調(diào)用微信自帶API獲取openid。首先在用戶端調(diào)用wx.login從微信服務(wù)器中獲取code，然后調(diào)用wx.request將code傳遞給后端服務(wù)器，用code換取openid和session_key，最后后端服務(wù)器將用戶的標(biāo)識(shí)發(fā)送給小程序本地存儲(chǔ)。這種登錄方式雖然比第一種更加安全，且免去了復(fù)雜的開發(fā)表單驗(yàn)證系統(tǒng)的過程，但是要經(jīng)過微信服務(wù)器以及后端服務(wù)器的處理，意味著需要前后端聯(lián)調(diào)，側(cè)重于后端的配置與部署。

云開發(fā)中的登錄方式的優(yōu)勢(shì)在于用戶在第一次登錄時(shí)自動(dòng)調(diào)用云函數(shù)，云函數(shù)自動(dòng)獲取用戶信息（openid），并自動(dòng)將小程序的用戶信息存儲(chǔ)到云數(shù)據(jù)庫，使得登錄變得穩(wěn)定、可靠、高效、便捷。使用云開發(fā)模式下的登錄方式，用戶可免注冊(cè)直接進(jìn)入小程序，優(yōu)先瀏覽賽事頁面（若參賽則需要綁定學(xué)號(hào)），增強(qiáng)了用戶的體驗(yàn)感，體現(xiàn)小程序的簡(jiǎn)易性與報(bào)名系統(tǒng)結(jié)合。

關(guān)鍵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 小程序開發(fā)環(huán)境

1） 采用WXSS、ES6、WXML、JS;

2） 微信小程序基礎(chǔ)庫版本2.11.0及其以上;

3） 微信小程序云數(shù)據(jù)庫。

3.3 云數(shù)據(jù)庫與CMS（內(nèi)容管理）結(jié)合使用

使用云開發(fā)[5]中的云數(shù)據(jù)庫（JSON數(shù)據(jù)庫）和CMS（內(nèi)容管理）作為后端服務(wù)器。

CMS（內(nèi)容管理）是基于云開發(fā)搭建[6]的可視化的內(nèi)容管理平臺(tái)，提供了豐富的內(nèi)容管理功能，開通簡(jiǎn)單，無須編寫代碼即可使用。

該小程序創(chuàng)新性地調(diào)用了微信云函數(shù)，對(duì)云數(shù)據(jù)庫數(shù)據(jù)進(jìn)行增刪改查等操作。

相關(guān)JS關(guān)鍵代碼[如下：

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）;

}}

這一細(xì)節(jié)實(shí)現(xiàn)了參賽人員簡(jiǎn)易快速報(bào)名和參賽信息修改等功能。同時(shí)，云函數(shù)讓開發(fā)者使用簡(jiǎn)易的代碼就能快速地連接數(shù)據(jù)庫，大大降低了開發(fā)過程的復(fù)雜程度。

在小程序后臺(tái)設(shè)計(jì)中，由于CMS（內(nèi)容管理）與微信云開發(fā)的生態(tài)體系緊密結(jié)合，在開發(fā)階段，開發(fā)者省去了自己搭建服務(wù)器管理后臺(tái)信息的煩瑣操作，直接使用CMS（內(nèi)容管理）作為小程序簡(jiǎn)易服務(wù)器，在云開發(fā)生態(tài)中與云數(shù)據(jù)庫連接，管理數(shù)據(jù)庫內(nèi)容。

另外，CMS（內(nèi)容管理）支持多賬號(hào)登錄，完美適配賽易服微信小程序賽事組織者、程序維護(hù)人員等角色。賽事組織者，程序維護(hù)人員（一般為開發(fā)人員）都可注冊(cè)并且使用。賽事組織者可在CMS（內(nèi)容管理）平臺(tái)上注冊(cè)之后進(jìn)行一些簡(jiǎn)單的配置，就可使用 CMS 內(nèi)容管理系統(tǒng)來管理信息內(nèi)容（如圖6所示），方便進(jìn)行上傳賽事圖片和賽事文件等內(nèi)容信息，同時(shí)更好地對(duì)賽事信息，參賽團(tuán)隊(duì)信息進(jìn)行管理。

3.4 WxValidate表單驗(yàn)證

小程序使用WxValidate插件對(duì)表單進(jìn)行驗(yàn)證。用戶在提交表單時(shí)如果填寫錯(cuò)誤的數(shù)據(jù)格式時(shí)會(huì)觸發(fā)應(yīng)用的自動(dòng)核驗(yàn)并采用輕提示提醒用戶，輸入格式不合法，直至用戶輸入合法的數(shù)據(jù)內(nèi)容。

相關(guān)JS關(guān)鍵代碼如下：

initValidate（） {

const rules = {

teamname： {

required： true，

rangelength： [1， 5]

}，

}

const messages = {

teamname： {

required： '請(qǐng)?zhí)顚憟F(tuán)隊(duì)名'，

rangelength： '請(qǐng)輸入正確的團(tuán)隊(duì)名'

}}

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

}）

}

這一設(shè)計(jì)確保了參賽人員、賽事組織者在填寫表單（如：參賽信息、創(chuàng)建比賽信息）時(shí)的正確性，在微信小程序快捷、便利的前提下，保證了校園參賽平臺(tái)需要的嚴(yán)謹(jǐn)、穩(wěn)定的理念。

4 系統(tǒng)重點(diǎn)功能實(shí)現(xiàn)

1） 比賽分類查看。點(diǎn)擊比賽分類圖標(biāo)，顯示各類比賽。點(diǎn)擊“商業(yè)”比賽自動(dòng)定位該類比賽。

2） 進(jìn)入一個(gè)比賽點(diǎn)擊報(bào)名，輸入報(bào)名信息。

5 結(jié)論

該小程序解決了當(dāng)前比賽存在 “組織比賽難”“管理比賽不便”“參加比賽麻煩”“比賽分散”等痛點(diǎn)問題，填補(bǔ)“創(chuàng)建、管理、參加”為一體的校園參賽平臺(tái)的空白。實(shí)現(xiàn)為各大高校提供集“創(chuàng)建、管理、參加”為一體的校園參賽平臺(tái)，為高校學(xué)生提供一個(gè)在手機(jī)端就能瀏覽賽事信息，獲取賽事資源，與同學(xué)組隊(duì)一鍵報(bào)名的簡(jiǎn)易小程序，達(dá)到“為比賽而生，使比賽更簡(jiǎn)單”的設(shè)計(jì)理念。

參考文獻(xiàn)：

[1] 楊啟，張麗萍.從互聯(lián)網(wǎng)生態(tài)看微信小程序的發(fā)展[J].新聞?wù)搲?017（2）：22-24.

[2] 王天泥.當(dāng)圖書館遇上微信小程序[J].圖書與情報(bào)，2016（6）：83-86.

[3] 基夫·莫里斯.基礎(chǔ)設(shè)施即代碼 云服務(wù)器管理[M].北京：人民郵電出版社，2018.

[4] Frisbie M.JavaScript高級(jí)程序設(shè)計(jì)[M].李松峰，譯.北京：人民郵電出版社，2020.

[5] 劉紅衛(wèi).微信小程序應(yīng)用探析[J].無線互聯(lián)科技，2016（23）：11-12，40.

[6] 陳琦.基于Webpy+Apache HTTP Server的微信小程序架構(gòu)搭建研究[J].無線互聯(lián)科技，2017（18）：50-51.

【通聯(lián)編輯：聞翔軍】

收稿日期：2021-11-08

基金項(xiàng)目： 國家級(jí)大學(xué)生創(chuàng)新創(chuàng)業(yè)訓(xùn)練項(xiàng)目（編號(hào)：202010407041）

作者簡(jiǎn)介：徐宇帆（2001—），男，廣東廣州人，本科在讀， 研究方向?yàn)樘摂M現(xiàn)實(shí)技術(shù)、微信小程序開發(fā)，主持2020年國家級(jí)大學(xué)生創(chuàng)新創(chuàng)業(yè)訓(xùn)練項(xiàng)目;余秋明（1980—），男，江西奉新人，講師，工學(xué)碩士，研究方向?yàn)榻逃虒W(xué)、軟件人才培養(yǎng)、智能數(shù)據(jù)庫;柴政（1982—），男，浙江上虞人，講師，碩士，研究方向?yàn)閿?shù)字信號(hào)處理。