基于微信小程序的考勤系統(tǒng)設(shè)計與實現(xiàn)

郭鑫 毛古寶 方歡

摘要：高校考勤是日常教學(xué)中的一個常用事件，如何借助信息化的手段精準(zhǔn)、快速地實現(xiàn)這一功能是十分必要的。該文基于微信小程序，借助js后端設(shè)計語言及前端設(shè)計語言wxml，設(shè)計和開發(fā)了一套考勤微信小程序。該設(shè)計的系統(tǒng)將用戶角色分為教師和學(xué)生，可以完成教師上課考勤功能、學(xué)生主動簽到等功能，系統(tǒng)使用測試結(jié)果表明系統(tǒng)的具備可使用性。

關(guān)鍵詞：微信小程序；考勤系統(tǒng)；js；wxml

中圖分類號：TP311 文獻(xiàn)標(biāo)識碼：A 文章編號：1009-3044（2018）20-0057-03

1 背景

隨著互聯(lián)網(wǎng)的快速發(fā)展以及網(wǎng)絡(luò)速度的不斷提升，越來越多的事務(wù)處理轉(zhuǎn)向移動端，手機(jī)作為移動端的主角，正發(fā)揮著越來越大的作用。通過對高校大學(xué)生的調(diào)查以及筆者自身的體會可以發(fā)現(xiàn)，現(xiàn)在大學(xué)教師考勤方法比較傳統(tǒng)，也有過一些新鮮的嘗試，但都沒有大規(guī)模的施行，這些方法要么費(fèi)時費(fèi)力，要么可行度、精確度有待提高。然而，考勤情況不僅可以作為教學(xué)質(zhì)量的參考[1]，而且對學(xué)生自身學(xué)習(xí)也具備督促作用，所以一種高效的考勤方法顯得尤為必要。結(jié)合學(xué)生大都每天都使用智能手機(jī)，如果能將考勤與智能手機(jī)結(jié)合起來，則勢必會大大減少學(xué)生課堂日常考勤的壓力，提高教師的工作效率 [2]。

該文旨在開發(fā)一款產(chǎn)品用于高校上課的考勤活動，為實現(xiàn)這一目標(biāo)，首先針對現(xiàn)有的幾種考勤方式與應(yīng)用場景之間的關(guān)系進(jìn)行具體分析比較匯總[3-4]，分析結(jié)果如表1所示。

從表1可以看出，在高?？记谶@一應(yīng)用場景下，APP和小程序都有很大的優(yōu)勢，同時微信小程序基于微信，直接從微信端進(jìn)入，省去安裝一個APP的步驟，而且能使用微信的一系列的權(quán)限，比起APP有更大的優(yōu)勢。

2 系統(tǒng)需求分析

2.1 系統(tǒng)總體分析

小程序用于高校的上課考勤，用戶從微信端進(jìn)入小程序，獲取當(dāng)前用戶的信息，注冊時將微信號與學(xué)號或工號唯一綁定，登錄之后通過用戶名來判定是老師還是學(xué)生，以顯示不同的界面。進(jìn)入系統(tǒng)后可以使用校園資訊、上課打卡、查看課程表等功能，老師在打卡結(jié)束之后還能看到經(jīng)處理過的統(tǒng)計情況。系統(tǒng)用例圖如圖1所示。

2.2 系統(tǒng)模塊分析

1）注冊。注冊會將個人的學(xué)號與微信號相關(guān)聯(lián)，起到一定的防作弊的作用，用戶在簽到的時候都只能用關(guān)聯(lián)注冊過的微信號才有效，即當(dāng)不是用綁定的微信號登陸時，是無法進(jìn)行考勤操作的。老師用工號注冊，學(xué)生用學(xué)號注冊，生成唯一的關(guān)聯(lián)，保存到數(shù)據(jù)庫中。

2）登錄。從關(guān)聯(lián)注冊的微信進(jìn)入小程序，用學(xué)號或、工號密碼登錄。非關(guān)聯(lián)注冊的微信登錄無效。

3）資訊。展示校園的訊息、通知等，豐富小程序功能。

4）簽到。老師在有考勤需求時，點(diǎn)擊簽到，即將自己的位置信息上傳到服務(wù)器，同時激活計時器，學(xué)生需要在一分鐘內(nèi)完成簽到才視作有效。學(xué)生登錄成功后點(diǎn)擊相應(yīng)的按鈕來簽到，同時將個人信息、位置信息上傳到服務(wù)器，與老師的位置信息進(jìn)行比對，在一定的范圍內(nèi)認(rèn)為是有效的操作，反之會在最終的統(tǒng)計表里顯示該用戶位置可疑。

5）結(jié)果顯示。在計時器結(jié)束后，服務(wù)器進(jìn)行比對信息，將本班的基本信息統(tǒng)計推送給老師，包括本班一共多少人，簽到成功多少人，有哪些人位置不在范圍內(nèi)，有哪些人沒有簽到。老師可根據(jù)最后的統(tǒng)計信息進(jìn)行抽查，提高準(zhǔn)確率。

3 系統(tǒng)設(shè)計

3.1 系統(tǒng)功能設(shè)置

系統(tǒng)采用B/S架構(gòu)，基于微信客戶端，由發(fā)出各種操作請求，核心的部分?jǐn)?shù)據(jù)比對集中到服務(wù)器上[5]。數(shù)據(jù)庫操作是該系統(tǒng)的重要組成部分，在系統(tǒng)實現(xiàn)過程中有大量的數(shù)據(jù)庫操作，合理的數(shù)據(jù)庫操作可以極大地提高系統(tǒng)的運(yùn)行速度及質(zhì)量，同時這也關(guān)乎教師得到的反饋信息的準(zhǔn)確性。

3.2 客戶端界面設(shè)計

1）注冊界面設(shè)計。如圖3所示，在小程序初始化過程中即獲取到當(dāng)前用戶的微信信息，注冊過程中以學(xué)號或工號為賬號，注冊成功即將微信號與用戶綁定，在此之后就只能通過該微信號進(jìn)行打卡，否則打卡無效。

2）登錄界面設(shè)計。如圖4所示，輸入學(xué)號或工號、密碼即可登錄成功。

3）首頁設(shè)計。如圖5所示，添加了學(xué)校的資訊以及一些有關(guān)大學(xué)生的信息，豐富小程序的功能。

4）打卡界面設(shè)計。如圖6所示，通過微信調(diào)用手機(jī)的GPS，獲取到位置信息，老師同學(xué)們根據(jù)當(dāng)前是第幾節(jié)課進(jìn)行打卡，同時會監(jiān)聽系統(tǒng)的時鐘，判斷點(diǎn)擊按鈕是否在相應(yīng)的時間段下，不在規(guī)定的時間段則打卡無效。

5）學(xué)生信息返回界面。如圖7所示，在打卡成功后會顯示該界面以示打卡成功。

6）教師信息返回界面。如圖8所示，在規(guī)定的時間結(jié)束后，教師端會收到統(tǒng)計信息表包括班級、課程、應(yīng)到多少人、實到多少人、未簽到多少人，位置可疑的同學(xué) 。老師可根據(jù)返回的信息表進(jìn)行下一步的活動。

7）用戶中心設(shè)計。登錄后可以查詢自己上課的打卡情況、課程表，還可以進(jìn)行問題反饋。

4 簽到關(guān)鍵代碼

data： { //數(shù)據(jù)存儲

x：''，

y：''，

tx：''，

ty：''

}，

sign： function （） { //簽到功能函數(shù)

const that = this

wx.getLocation（{ //獲取位置信息函數(shù)

type： 'wgs84'，

success： function （res） {

var latitude = res.latitude //獲取經(jīng)度信息

var longitude = res.longitude //獲取緯度信息

that.setData（{ x： res.latitude }） //數(shù)據(jù)存儲

that.setData（{ y： res.longitude }） //數(shù)據(jù)存儲

} }） }，

upload：function（）{ //獲取到的位置信息上傳到服務(wù)器

const query = Bmob.Query（'sign'）；

query.set（"xx"， this.data.x）

query.set（"yy"， this.data.y）

query.save（）.then（res => {

console.log（res）

}）.catch（err => {

console.log（err）

}） }，

check：function（）{ //檢測位置函數(shù)

const query = Bmob.Query（user'）； //獲取老師的位置信息

query.get（'objectId'）.then（res => {

console.log（res）

}）.catch（err => {

console.log（err）

}）

if（x-tx<=10&&y-ty;<=10）{ //簽到成功，跳轉(zhuǎn)頁面

wx.navigateTo（{

url： '../call1/call1'，

}）；

wx.showToast（{

title： '簽到成功'，

icon： 'none'，

duration： 2000

}） }

else{ //簽到失敗出現(xiàn)提示信息

wx.showToast（{

title： '簽到失敗'，

icon： 'none'，

duration： 2000

}）

} }，

onTouch： function （event） { //功能實現(xiàn)函數(shù)

this.sign（）；

this.upload（）；

this.check（）；

}，

else if （this.data.phone.length ！= 0 &&this.data.password.length; ！= 0 ） {

const query = Bmob.Query（'user'）； //上傳數(shù)據(jù)庫

query.set（"uwx"， this.data.userInfo.nickName） //設(shè)置uwx為微信昵稱

query.set（"uno"， this.data.phone） //設(shè)置uno為學(xué)號、工號

query.set（"upass"， this.data.password） //設(shè)置upass為密碼

query.set（"uatt"， false） //設(shè)置uatt false為學(xué)生否則為老師

query.set（"uname"， name） //設(shè)置uname為與學(xué)生表對應(yīng)姓名

query.save（）.then（res => {

console.log（res）

}）.catch（err => {

console.log（err）

}）

5 結(jié)束語

該文設(shè)計了基于微信小程序的考勤系統(tǒng)，解決了傳統(tǒng)上課考勤速度慢、效果差的痛點(diǎn)，通過該系統(tǒng)可以提高上課的效率，減少不必要的時間浪費(fèi)，未來可在此基礎(chǔ)上增添更多的功能，滿足學(xué)生和老師在日常學(xué)習(xí)生活中的其他問題。

參考文獻(xiàn)：

[1] 王鉑智. 基于微信小程序的簽到系統(tǒng)[J]. 電子世界， 2018（4）： 106-107.

[2] 何軍. 基于Portal路由微信AP只能考勤系統(tǒng)的設(shè)計與實現(xiàn)[J]. 計算機(jī)及通信研究， 2018（3）： 56-58.

[3] 張國杰， 吳杰峰， 劉路莎， 等. 基于微信小程序的數(shù)字化社區(qū)學(xué)習(xí)地圖開發(fā)[J]. 廣州大學(xué)學(xué)報：社會科學(xué)版，2017（11）： 57-62.

[4] 葛會會. 基于Android 藍(lán)牙考勤系統(tǒng)的設(shè)計與實現(xiàn)[D]. 南昌： 東華理工大學(xué)， 2016.

[5] 黃新艷. 微信小程序開發(fā)中flex布局容器及元素之屬性技術(shù)釋疑[J]. 信息與電腦， 2017（8）： 78-80.