基于微信小程序的校園參賽平臺的設計與實現

徐宇帆　余秋明　柴政

摘要：大學校園中的各類競賽可以鍛煉大學生的綜合能力，但學生對競賽信息獲取渠道的不統一，在各平臺官網報名的煩瑣性和學校對報名信息管理的低效率，導致學生在獲取比賽信息、報名、備賽過程中存在諸多不便。通過設計手機端的微信小程序綜合各類比賽信息，搭建快速簡易的參賽平臺，在小程序內瀏覽比賽信息，統一報名，為參賽及組織比賽提供便利。

關鍵詞：校園競賽;小程序;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—），男，浙江上虞人，講師，碩士，研究方向為數字信號處理。