亚洲免费av电影一区二区三区,日韩爱爱视频,51精品视频一区二区三区,91视频爱爱,日韩欧美在线播放视频,中文字幕少妇AV,亚洲电影中文字幕,久久久久亚洲av成人网址,久久综合视频网站,国产在线不卡免费播放

        ?

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

        2022-05-09 02:26:17徐宇帆余秋明柴政
        電腦知識與技術(shù) 2022年7期

        徐宇帆 余秋明 柴政

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

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

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

        文章編號:1009-3044(2022)07-0063-04

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

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

        1.1 問題提出

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

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

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

        1.2 市場需求和形勢

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

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

        2) 競賽覆蓋面積廣

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

        3) 競賽參與人數(shù)逐年增加

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

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

        2.1 系統(tǒng)介紹

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

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

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

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

        1) 學(xué)校綁定

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

        2) 比賽創(chuàng)建

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

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

        3) 比賽搜索

        首先,點(diǎn)擊“首頁”界面搜索按鈕,通過搜索比賽的關(guān)鍵詞,或者點(diǎn)擊用戶的搜索歷史,查找比賽。通過用戶輸入的關(guān)鍵詞,系統(tǒng)會快速匹配相關(guān)比賽。點(diǎn)中任何一個比賽,跳轉(zhuǎn)至比賽詳情界面。選擇上方四個按鈕(賽事信息、賽事通知、官方文件、賽事幫助)中的任何一個,可瀏覽比賽相關(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)擊“推薦”則自動跳轉(zhuǎn)到校外比賽網(wǎng)址,用戶找到報(bào)名入口從而報(bào)名比賽。

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

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

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

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

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

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

        由于比賽大都需要依靠學(xué)校方面發(fā)布,小程序使用了云開發(fā)的可視化內(nè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é)合新聞類簡約、美觀UI設(shè)計(jì)(如圖5所示),操作簡易,方便用戶瀏覽比賽信息,為用戶指明方向,快速獲取校內(nèi)外的各類比賽信息,以及用戶特別關(guān)注的賽事,引導(dǎo)用戶點(diǎn)擊符合自身優(yōu)勢,想要參加的比賽,并快捷報(bào)名。讓小程序具有簡易性和實(shí)用性。

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

        后端,通過云開發(fā)后臺,學(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ù)庫、云存儲,采用微信小程序云開發(fā)模式大大提升了小程序的開發(fā)效率,同時極大地節(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)小程序用戶注冊登錄

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

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

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

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

        云開發(fā)中的登錄方式的優(yōu)勢在于用戶在第一次登錄時自動調(diào)用云函數(shù),云函數(shù)自動獲取用戶信息(openid),并自動將小程序的用戶信息存儲到云數(shù)據(jù)庫,使得登錄變得穩(wěn)定、可靠、高效、便捷。使用云開發(fā)模式下的登錄方式,用戶可免注冊直接進(jìn)入小程序,優(yōu)先瀏覽賽事頁面(若參賽則需要綁定學(xué)號),增強(qiáng)了用戶的體驗(yàn)感,體現(xià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)容管理平臺,提供了豐富的內(nèi)容管理功能,開通簡單,無須編寫代碼即可使用。

        該小程序創(chuàng)新性地調(diào)用了微信云函數(shù),對云數(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)了參賽人員簡易快速報(bào)名和參賽信息修改等功能。同時,云函數(shù)讓開發(fā)者使用簡易的代碼就能快速地連接數(shù)據(jù)庫,大大降低了開發(fā)過程的復(fù)雜程度。

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

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

        3.4 WxValidate表單驗(yàn)證

        小程序使用WxValidate插件對表單進(jìn)行驗(yàn)證。用戶在提交表單時如果填寫錯誤的數(shù)據(jù)格式時會觸發(fā)應(yī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: '請?zhí)顚憟F(tuán)隊(duì)名',

        rangelength: '請輸入正確的團(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)建比賽信息)時的正確性,在微信小程序快捷、便利的前提下,保證了校園參賽平臺需要的嚴(yán)謹(jǐn)、穩(wěn)定的理念。

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

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

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

        5 結(jié)論

        該小程序解決了當(dāng)前比賽存在 “組織比賽難”“管理比賽不便”“參加比賽麻煩”“比賽分散”等痛點(diǎn)問題,填補(bǔ)“創(chuàng)建、管理、參加”為一體的校園參賽平臺的空白。實(shí)現(xiàn)為各大高校提供集“創(chuàng)建、管理、參加”為一體的校園參賽平臺,為高校學(xué)生提供一個在手機(jī)端就能瀏覽賽事信息,獲取賽事資源,與同學(xué)組隊(duì)一鍵報(bào)名的簡易小程序,達(dá)到“為比賽而生,使比賽更簡單”的設(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高級程序設(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)目: 國家級大學(xué)生創(chuàng)新創(chuàng)業(yè)訓(xùn)練項(xiàng)目(編號:202010407041)

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

        日本黄页网站免费大全| 日韩精品中文一区二区三区在线| 久久久中日ab精品综合| 国产zzjjzzjj视频全免费| 亚洲福利天堂网福利在线观看| 久久老熟女乱色一区二区| 久久国产精品亚洲婷婷片| 精品国产一区二区三区香蕉| 美日韩毛片| 在线视频亚洲一区二区三区| 华人免费网站在线观看| 在线视频观看免费视频18| 亚洲AV无码精品色欲av | 开心五月激动心情五月| 日日噜噜夜夜狠狠视频| 亚洲产国偷v产偷v自拍色戒| 国产va精品免费观看| 国产麻豆国精精品久久毛片| 国产欧美日韩中文久久| 无套内谢的新婚少妇国语播放| 美女超薄透明丝袜美腿| 日本精品人妻一区二区| 亚洲av无码乱码在线观看富二代 | 欧美做受视频播放| 国产精品老熟女露脸视频| 超碰Av一区=区三区| 色偷偷亚洲精品一区二区| 欧美人与善在线com| 野外性史欧美k8播放| 久九九久视频精品网站| 精品人妻一区二区三区视频| 天天做天天爱天天综合网2021| 99热视热频这里只有精品| 国产av大片久久中文字幕| 无码人妻久久一区二区三区免费丨| 97久久精品午夜一区二区| 国产剧情无码中文字幕在线观看不卡视频| 日韩美女av一区二区三区四区| 最近中文字幕免费完整版| 国产成人精品三级91在线影院| 国产麻豆成人精品av|