郭鑫 毛古寶 方歡

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

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

中圖分類號：TP311 文獻標識碼：A 文章編號：1009-3044（2018）20-0057-03

1 背景

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

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

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

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

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

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

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

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

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

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

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

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

3 系統(tǒng)設計

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

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

3.2 客戶端界面設計

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

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

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

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

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

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

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

4 簽到關鍵代碼

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（）{ //獲取到的位置信息上傳到服務器

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）{ //簽到成功，跳轉頁面

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） //設置uwx為微信昵稱

query.set（"uno"， this.data.phone） //設置uno為學號、工號

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

query.set（"uatt"， false） //設置uatt false為學生否則為老師

query.set（"uname"， name） //設置uname為與學生表對應姓名

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

console.log（res）

}）.catch（err => {

console.log（err）

}）

5 結束語

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

參考文獻：

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

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

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

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

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