基于微信小程序的校園公共場(chǎng)所訪問(wèn)登記系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)

孫洪迪 賈民政 楊民峰

(北京工業(yè)職業(yè)技術(shù)學(xué)院 電氣與信息工程學(xué)院，北京 100042)

0 引言

隨著智能手機(jī)的普及，微信已經(jīng)成為人們生活中使用頻率最高的APP之一。智研咨詢(xún)發(fā)布的《2020—2026年中國(guó)微信公眾號(hào)行業(yè)市場(chǎng)經(jīng)營(yíng)風(fēng)險(xiǎn)及投資戰(zhàn)略規(guī)劃分析報(bào)告》顯示：從2011年開(kāi)始持續(xù)使用到今年的微信月活躍用戶(hù)數(shù)量已經(jīng)突破了11 億，全國(guó)14 億人口，微信月活躍用戶(hù)就達(dá)到了11 億，是中國(guó)用戶(hù)量最大的APP[1]。2017年1月9日，張小龍?jiān)?017微信公開(kāi)課Pro上發(fā)布的微信小程序正式上線(xiàn)。微信小程序是小程序的一種，英文名為Wechat Mini Program，是一種不需要下載安裝即可使用的應(yīng)用，它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢(mèng)想，用戶(hù)掃一掃或搜一下即可打開(kāi)應(yīng)用[2]，避免了APP繁瑣的下載注冊(cè)等諸多不便，真正做到了用完即走的理念，用戶(hù)不用擔(dān)心手機(jī)安裝過(guò)多的軟件，以及內(nèi)存占用問(wèn)題。

目前高校校園里，每位師生都在使用智能手機(jī)和微信。微信小程序在校園中也得到廣泛使用，如微課堂[3]、宿舍查寢[4]、校園服務(wù)[5]、考勤簽到[6-10]。目前學(xué)生使用的今日校園APP只有公共場(chǎng)所登記的功能，教師使用的學(xué)習(xí)通等APP可以完成學(xué)生上課簽到功能，但沒(méi)有記錄學(xué)生進(jìn)出校園公共場(chǎng)所的登記功能，班主任也不能通過(guò)這些APP實(shí)時(shí)查詢(xún)學(xué)生上課簽到情況。針對(duì)這種情況，筆者設(shè)計(jì)一款“校園公共場(chǎng)所訪問(wèn)登記系統(tǒng)”，該系統(tǒng)可以提供學(xué)生進(jìn)出校園公共場(chǎng)所登記、上課簽到、晚間宿舍歸寢簽到的功能，任課教師可以查詢(xún)統(tǒng)計(jì)學(xué)生上課簽到情況，班主任可以查詢(xún)統(tǒng)計(jì)學(xué)生上課出勤和晚間宿舍歸寢情況。

1 校園公共場(chǎng)訪問(wèn)登記系統(tǒng)的設(shè)計(jì)

1.1 系統(tǒng)架構(gòu)分析

為了讓用戶(hù)擁有良好的體驗(yàn)同時(shí)使系統(tǒng)開(kāi)發(fā)高效和便捷，該系統(tǒng)采用微信小程序原生框架進(jìn)行編寫(xiě)：服務(wù)器采用PHP編寫(xiě)，功能主要是對(duì)數(shù)據(jù)進(jìn)行存儲(chǔ)、加工，處理后反饋給客戶(hù)端進(jìn)行展示；客戶(hù)端視圖層則由微信小程序自帶的WXML與WXSS 2種語(yǔ)言編寫(xiě)，功能主要是將數(shù)據(jù)展示在界面上。使用MySQL數(shù)據(jù)庫(kù)，數(shù)據(jù)庫(kù)包括10張數(shù)據(jù)表。該系統(tǒng)功能的實(shí)現(xiàn)及具體算法如下：

(1)通過(guò)網(wǎng)頁(yè)版坐標(biāo)拾取器獲取各個(gè)標(biāo)注地點(diǎn)的經(jīng)緯度坐標(biāo)，并匹配相應(yīng)地點(diǎn)的名稱(chēng)和描述，將其打包存入js文件中；(2)結(jié)合騰訊地圖API采用輪詢(xún)調(diào)用wx.getLocation()方法完成對(duì)用戶(hù)個(gè)人定位；(3)利用marker組件，在用戶(hù)界面中展示地圖上標(biāo)記的位置，完成簽到功能。

1.1.1 系統(tǒng)功能框架

該系統(tǒng)實(shí)現(xiàn)的主要功能包括:(1)學(xué)生根據(jù)地理位置，完成出入校園公共場(chǎng)所登記、上課簽到、晚間宿舍歸寢簽到，查詢(xún)統(tǒng)計(jì)自己上課簽到的歷史信息和晚間宿舍歸寢簽到的歷史信息；(2)班主任實(shí)時(shí)查看學(xué)生上課簽到信息、晚間宿舍歸寢信息，查詢(xún)統(tǒng)計(jì)學(xué)生上課簽到歷史信息和晚間宿舍歸寢簽到歷史信息；(3)任課教師實(shí)時(shí)查詢(xún)授課班級(jí)學(xué)生上課簽到情況，查詢(xún)統(tǒng)計(jì)所教授課程學(xué)生的上課簽到歷史信息；(4)樓宇管理員實(shí)時(shí)查詢(xún)當(dāng)前樓宇內(nèi)的學(xué)生人數(shù)和學(xué)生信息，以及學(xué)生出入樓宇的歷史信息。該系統(tǒng)實(shí)現(xiàn)的功能如圖1所示。

圖1 校園公共區(qū)域訪問(wèn)登記系統(tǒng)功能結(jié)構(gòu)圖

1.1.2 系統(tǒng)管理員操作界面

系統(tǒng)管理員負(fù)責(zé)對(duì)數(shù)據(jù)庫(kù)信息進(jìn)行更新維護(hù)，其操作界面如圖2所示。

圖2 系統(tǒng)管理員操作界面

1.2 系統(tǒng)數(shù)據(jù)庫(kù)設(shè)計(jì)

根據(jù)該系統(tǒng)的實(shí)際需求，使用MySQL數(shù)據(jù)庫(kù)。數(shù)據(jù)庫(kù)包括10張數(shù)據(jù)表，數(shù)據(jù)表具體信息如表1所示。

表1 數(shù)據(jù)表統(tǒng)計(jì)表

2 校園公共場(chǎng)所訪問(wèn)登記系統(tǒng)的實(shí)現(xiàn)

2.1 樓宇管理員模塊

樓宇管理員通過(guò)學(xué)生簽到來(lái)統(tǒng)計(jì)當(dāng)前樓宇內(nèi)學(xué)生數(shù)量以及學(xué)生相關(guān)信息。

2.1.1 流程分析

樓宇管理員可以對(duì)所管理的樓宇進(jìn)行實(shí)時(shí)的信息查詢(xún)，也可以查詢(xún)樓宇的歷史登記記錄。樓宇管理員模塊系統(tǒng)流程圖如圖3所示。

圖3 樓宇管理員模塊系統(tǒng)流程圖

2.1.2 界面設(shè)計(jì)

樓宇管理員可以查詢(xún)進(jìn)入自己所負(fù)責(zé)樓宇的學(xué)生信息。查詢(xún)方式包括：查詢(xún)當(dāng)前時(shí)刻樓宇內(nèi)學(xué)生信息以及進(jìn)入樓宇學(xué)生的歷史記錄?？梢圆樵?xún)的信息包括：學(xué)生姓名、班級(jí)和簽到時(shí)間。樓宇管理員查詢(xún)界面如圖4所示。

圖4 樓宇管理員查詢(xún)界面

2.1.3 關(guān)鍵函數(shù)實(shí)現(xiàn)

// 獲得樓宇的簽到情況

function getBuildingCheckin($buildingName){

$checkTime=$this->getTime();

$roomList=$this->DBUtils->query("buildings"

, array("buildingadministrator_id","name")

, array($this->classroomAdministrator[0]["id"],$buildingName)

, array("id","location"));

$len=count($roomList);

}

2.2 班主任模塊

班主任登錄該系統(tǒng)可以實(shí)時(shí)查詢(xún)自己班級(jí)學(xué)生上課出勤情況及晚間宿舍歸寢情況。班主任登錄系統(tǒng)后，顯示自己名下所帶班級(jí)列表。選擇要查詢(xún)班級(jí)后，顯示當(dāng)前班級(jí)的課程列表，以課程為單位顯示班級(jí)學(xué)生簽到情況。晚間宿舍歸寢也被規(guī)定成一門(mén)課程，呈現(xiàn)在課程列表里。學(xué)生根據(jù)課程安排，在規(guī)定時(shí)間和地點(diǎn)上課，課堂上即可完成簽到。晚間宿舍歸寢，每天晚間設(shè)定一個(gè)固定時(shí)間段，學(xué)生在宿舍內(nèi)及規(guī)定時(shí)間內(nèi)完成簽到，既完成晚間宿舍歸寢簽到。該系統(tǒng)方便班主任實(shí)時(shí)查詢(xún)統(tǒng)計(jì)學(xué)生的簽到信息，第一時(shí)間掌握學(xué)生出勤情況。同時(shí)班主任還可以查詢(xún)學(xué)生簽到的歷史信息，方便班主任的管理工作。

2.2.1 流程分析

班主任可以實(shí)時(shí)查詢(xún)、統(tǒng)計(jì)學(xué)生上課簽到和晚間宿舍歸寢簽到的信息及歷史簽到信息。班主任模塊系統(tǒng)流程圖如圖5所示。

圖5 班主任模塊系統(tǒng)流程圖

2.2.2 界面設(shè)計(jì)

班主任可以查詢(xún)自己班學(xué)生上課簽到情況，如圖6所示。

圖6 班主任查詢(xún)學(xué)生簽到結(jié)果界面

2.2.3 關(guān)鍵函數(shù)實(shí)現(xiàn)

//獲取班主任管理班級(jí)課程

function getClassCourses($classId){

$coursesList=$this->DBUtils->getNewTable(

"SELECT DISTINCT courses.name

FROM courses, syllabus

WHERE syllabus.class_id='".$classId."'

AND syllabus.course_id=courses.id");

return $coursesList;

}

2.3 任課教師模塊

任課教師手動(dòng)點(diǎn)名，效率低且容易出現(xiàn)登記、統(tǒng)計(jì)錯(cuò)誤。登錄該系統(tǒng)后，任課教師可以看到自己所教授的課程列表，點(diǎn)擊課程名字可以看到該課程對(duì)應(yīng)班級(jí)。選擇相應(yīng)班級(jí)后，如果該班級(jí)當(dāng)前是上課時(shí)間，則可以查詢(xún)當(dāng)前課堂學(xué)生簽到情況，對(duì)沒(méi)有簽到的學(xué)生名單一目了然。對(duì)以往上課簽到的歷史信息，任課教師也可以根據(jù)班級(jí)查詢(xún)，方便教師統(tǒng)計(jì)。在學(xué)生簽到過(guò)程中，除了學(xué)生要基于位置完成簽到以外，教師還設(shè)置了學(xué)生簽到的有效時(shí)間，兩者都符合條件，才能成功簽到。

2.3.1 流程分析

任課教師可以實(shí)時(shí)查詢(xún)和統(tǒng)計(jì)授課班級(jí)學(xué)生上課簽到信息及學(xué)生歷史簽到信息。任課教師模塊程序流程，如圖7所示。

圖7 任課教師模塊系統(tǒng)流程圖

2.3.2 界面設(shè)計(jì)

任課教師查詢(xún)自己所教授課程學(xué)生上課簽到情況，如圖8所示。

圖8 任課教師查詢(xún)結(jié)果界面

2.3.3 關(guān)鍵函數(shù)實(shí)現(xiàn)

//獲取當(dāng)前課程簽到記錄

function getClassCheckinRecord(){

$courseTime = $this->getTime();

$res = $this->DBUtils->getNewTable(

"SELECT students.truename AS truename, classes.name AS class_name, checkin_time

FROM classes, students, checkin, syllabus

WHERE classes.id = students.class_id

AND students.id = checkin.student_id

AND checkin.having_class_id = syllabus.id

AND syllabus.course_time = '".$courseTime."'" );

return $res;

}

2.4 學(xué)生模塊

學(xué)生使用該系統(tǒng)完成上課簽到和晚間歸寢簽到工作。上課簽到時(shí)，學(xué)生在手機(jī)微信小程序里打開(kāi)該系統(tǒng)，系統(tǒng)調(diào)用微信提供的騰訊地圖，通過(guò)教室GPS數(shù)據(jù)和學(xué)生所持手機(jī)GPS數(shù)據(jù)對(duì)比，在規(guī)定范圍內(nèi)，則可簽到成功；若不在規(guī)定范圍內(nèi)，則系統(tǒng)提示不在簽到范圍內(nèi)，不能完成簽到工作。簽到成功后，會(huì)記錄簽到學(xué)生姓名、學(xué)號(hào)、班級(jí)及簽到具體時(shí)間。學(xué)生可以查詢(xún)自己的歷史簽到信息，歷史信息里記錄了學(xué)生信息及簽到課程和簽到時(shí)間。學(xué)生還可以選擇查詢(xún)時(shí)間，來(lái)精確查詢(xún)某時(shí)間段內(nèi)的簽到信息。晚間宿舍歸寢簽到被規(guī)定成一門(mén)課程，所以功能實(shí)現(xiàn)與上課簽到相同。

2.4.1 流程分析

學(xué)生可以通過(guò)該系統(tǒng)完成進(jìn)出校園公共場(chǎng)所登記、上課簽到、晚間宿舍歸寢簽到，并可以查詢(xún)統(tǒng)計(jì)自己的上課簽到和晚間宿舍歸寢簽到信息及歷史簽到信息。學(xué)生模塊系統(tǒng)流程圖如圖9所示。

圖9 學(xué)生模塊系統(tǒng)流程圖

2.4.2 界面設(shè)計(jì)

學(xué)生簽到是基于手機(jī)地理位置信息，在教室有效范圍內(nèi)才可以成功完成簽到， 晚間宿舍歸寢亦是同樣情況。如果學(xué)生手機(jī)不在有效地理范圍內(nèi)和有效時(shí)間內(nèi)，則不能完成簽到任務(wù)。學(xué)生成功簽到，如圖10所示。

圖10 學(xué)生成功簽到界面

學(xué)生可以查詢(xún)自己簽到的歷史信息，如圖11所示。

圖11 學(xué)生查詢(xún)簽到歷史信息界面

2.4.3 關(guān)鍵函數(shù)實(shí)現(xiàn)

//簽到函數(shù)

onTap:function(){

//獲取當(dāng)前手機(jī)的地理位置

wx.getLocation({

type: "wgs84",

success: function(res){

var latitude=res.latitude;

var longitude=res.longitude;

//上傳簽到數(shù)據(jù)

});

}

3 結(jié)論

基于微信小程序的校園公共場(chǎng)所訪問(wèn)登記系統(tǒng)，可以提供學(xué)生進(jìn)出校園公共場(chǎng)所登記、上課簽到、晚間宿舍歸寢簽到的功能，提供班主任和任課教師對(duì)學(xué)生上課簽到、晚間宿舍歸寢簽到情況的實(shí)時(shí)查詢(xún)及簽到歷史信息查詢(xún)統(tǒng)計(jì)功能。該系統(tǒng)可以提高工作效率，降低錯(cuò)誤率，學(xué)生和教師都無(wú)需考慮設(shè)備兼容問(wèn)題，操作簡(jiǎn)單、方便實(shí)用。