基于云開發的高校課程助手小程序的設計

曾水新 黃日勝

摘要：目前智慧校園平臺不能滿足細粒度的課程層面的信息化需求，高校課程助手是一款基于云開發的微信小程序，有簽到、成績管理、通知等功能。簽到功能利用手機接收低功耗藍牙信號計算距離，解決市面上大多數簽到系統容易作弊的問題；成績管理功能彌補了部分教務系統不能錄入平時成績、作業成績的不足；通知功能是為教師發送課程通知、文章而設計的功能，添加了學生確認的環境，避免有學生漏看重要通知的問題。

關鍵詞：微信小程序；云開發；教務系統；考勤系統；JavaScript

中圖分類號：TP311.52 ? ? ?文獻標識碼：A

文章編號：1009-3044（2022）28-0034-04

1 引言

近年來，國內的教育信息化發展迅速，各高校建設的智慧校園平臺，覆蓋了OA、教務、圖書、科研、資產、財務等領域，極大提高了辦公效率。智慧校園是一個龐大的綜合解決方案，投資大、周期長，可以滿足學校的大部分的、共性的信息化需求，但無法滿足學校部分個性化需求。信息系統精細化的管理，需要在智慧校園平臺基礎上，不斷增加小的信息系統，形成“智慧校園+”的格局，即“大平臺+小工具”，大平臺解決穩定的、通用的需求，小工具系統作為補充，滿足個性化的、臨時性的、探索性的需求。

由于微信的覆蓋率廣、小程序開發成本低、且跨平臺、云開發無須購買服務器，微信小程序是開發智慧校園平臺小工具的理想載體。目前服務高校的小程序的研究已非常豐富，如：李海燕的教務助手小程序[1]、李霞的高校新生預報到系統[2]、閔慧的查寢打卡微信小程序[3]、張辰瑞的高?；鶎狱h建平臺[4]、馬延立的基于微信小程序的在線考試系統[5]、潘俊芳的圖書館座位預約系統[6]等。

高校課程助手小程序系統是智慧校園一個補充，使信息化服務下沉到課程層面，為學生提供便利，讓教師集中精力在核心教學事務。

2 需求分析

2.1 基于室內定位的簽到

為了杜絕安全隱患，一些高校要求教師每節課對學生考勤。點名是重復而煩瑣的課堂活動，如果每節課由教師口頭點名，會浪費寶貴的課堂時間，因此在高校考勤的信息化是十分必要的。

市面上有很多考勤系統，一般可分三類：一種為一鍵簽到式的，教師發起點名后，學生在手機或電腦一鍵簽到，這種方式無位置信息，無法保證學生是否在教室；二是動態簽到，如二維碼簽到、手勢簽到，學生掃描動態變化的二維碼，或輸入與教師相同的手勢，這種方式加入了隨機信息，以保證學生在現場才能簽到，但是學生可拍照發給不在場的學生，繞過限制；第三種是基于GPS的簽到，學生手機獲取定位，在允許的位置內才能簽到，由于GPS定位的精度不夠，經常會出現簽到失敗，而且容易被破解，如安裝一個虛擬定位軟件。

因此，需要一個可室內定位的、操作方便的考勤系統，確保在教室的學生才可簽到。

2.2 平時成績查詢

教務系統一般都有成績發布的功能，一般僅限于期末考試。高校的課程有作業成績、平時測驗成績、考勤成績，是形成性考核的組成部分，學生需要一個隨時能查詢并且知道加權后的成績的系統。

2.3 可確認課程消息

專業教師經常需要發送消息給學生，如考試通知、調課通知、作業提醒、參考資料等，以往的做法是發到課程群或口頭通知，教師無法確認學生是否收到，因此希望有一個類似釘釘消息、需本人確認的通知系統。

3 系統前端的設計與實現

3.1 微信小程序的架構

小程序是一種無須安裝的“輕應用”，目前主流的互聯網企業都發布了自己的小程序，微信小程序是騰訊公司在2017年推出的，2022年第一季度日活躍用戶數超過5億[7]，2022年H1微信、支付寶、抖音、快手等多個平臺小程序數量超過750萬，日活躍用戶數量超過7.8億[8]。

小程序無論是外在表現還是內部技術都與移動Web相似，Web前端開發人員很容易上手。傳統Web前端的技術棧是JavaScript + HTML + CSS，而小程序是JavaScript + WXML + WXSS，JavaScript負責業務邏輯，WXML和WXSS負責界面，WXML與HTML有類似的思想，但有自己的一套標簽，在WXSS里可以直接使用CSS的大多數語法。

微信小程序的架構如圖1所示，由視圖層、邏輯層組成，視圖層用于渲染頁面，邏輯層用于運行JS腳本，由兩個獨立的線程管理。視圖層和邏輯層通過系統層的JSBridge進行通信，邏輯層把數據變化通知到視圖層，觸發視圖層頁面更新，視圖層把觸發的事件通知到邏輯層進行業務處理。

3.2 主頁

系統有教師和學生兩種角色。啟動時，系統讀取本地緩存，獲取用戶信息（userInfo） 里的角色，根據角色顯示對應的主頁，圖1（a） 為教師主頁。如果本地緩存讀取失敗，則向服務器發起請求拉取用戶信息。

小程序提供了wx.setStorage（）和wx.getStorage（）函數用于設置、讀取緩存，這兩個函數是沒有時效管理的，因此封裝了兩個函數，分別為setTimedStorage（）和getTimedStorage（），存入的數據如果超出設置的時效，則返回空。使用getTimedStorage（）讀取用戶信息，隔一定的時間會“讀取失敗”，從而達到強制更新用戶信息的效果。

主頁除了界面渲染，還做初始化的工作：1） 判定是否有新版本，如有則調用更新管理器wx.getUpdateManager（）下載并更新。2） 判定用戶的微信基礎庫是否達到最低要求，如過低則停止運行。3） 異步下載圖片、音頻資源。4） 獲取班級列表。

3.3 用戶管理

用戶管理包括申請認證、審核身份、移除身份、學生名單，如圖2（a） 下方所示。

1） 申請認證。用戶未綁定時，導航到認證頁，如圖2（e） 所示。用戶信息表以學生學號、教師工號為索引，教師與學生信息提前導入數據庫。超級管理員需手動綁定，教師、學生通過身份認證頁面綁定微信賬號。

服務器端檢查用戶表是否存在該學號、檢測學號與姓名是否對應?！鞍堤枴弊侄斡山處熾S機設定、口頭通知，因此只有在現場的人員才能填寫正確，防止外部人員申請認證。校驗通過后，將該用戶設置為待認證狀態。

2） 審核身份。教師端列出將待認證的學生的信息，批量審核。

3） 移除身份。移除身份是將微信賬號與用戶表解綁，并不會刪除用戶之前形成的簽到、成績單、通知等歷史數據。這個功能允許學生或教師更換綁定的微信賬號。

4） 學生名單。用戶名單允許教師根據行政班、審核狀態、姓名等信息查詢學生。

3.4 自主簽到

本系統的一個特色是應用iBeacon技術實現了室內簽到功能。iBeacon是蘋果公司推出的一項室內定位技術，用于彌補衛星定位在室內無法接收信號、精度不足的缺陷。iBeacon的技術定位的原理是：iBeacon設備（藍牙信標）按一定的時間間隔發出廣播數據包，數據包的信息包含了可自定義的設備標志信息以及RSSI信號強度信息，客戶端根據RSSI值計算與設備的距離。

iBeacon藍牙信標發射的是BLE（Bluetooth Low Energy，低功耗藍牙技術）信號，功耗極低，通常使用兩三年才需要更換電池；微型iBeacon信標的直徑僅比一個硬幣稍大，便于攜帶，教師可以放入公文包或者隨身放到褲兜里。

自主簽到功能的流程如下：

1） 教師新建點名。教師填寫標題、節次、分鐘，如圖2（b） 所示。為了便于在手機快速操作，加了常用的“簽到”“簽退”兩個快捷鏈接；節次會根據系統時間自動顯示，也允許教師手動點“-”“+”按鈕進行修改，因為有可能因提前或延遲下課造成時間與節次不對應；分鐘默認為5分鐘，可通過“-”“+”按鈕微調。

2） 學生端從服務器獲取點名信息，包括上個步驟的信息以及iBeacon信息。

3） 學生端搜索iBeacon信號。如果有iBeacon信號，檢測其uuid是否正確；遍歷iBeacon對象列表，檢測其major、minor字段是否正確；計算距離，如果在預置的范圍外，則提示學生靠近教師，如果距離符合條件，則進入下一步驟。

4） 將點名信息傳給下一頁面。

小程序頁面間通信主要有三種方式：一是地址傳參，規則與Web應用一樣，即在URL后面加“？參數名稱1=參數值1&參數名稱2=參數值2……”，這種方式適合參數少的場景。二是EventChannel機制，即通過“派發事件”及“注冊事件監聽器”來實現基于事件的頁面通信，EventChannel是雙向的通信通道，但實現較煩瑣。三是將消息保存在全局變量里，約定存取規則，這種方式綜合了前兩者的優點，本系統采用的就是這種方式，封裝了一個傳參管理器，可以方便地使用全局變量傳參。

5） 學生簽到。簽到頁面讀取上個步驟保存的信息，顯示點名信息并倒計時，學生需在規定的時間內簽到，頁面如圖2（c） 所示。

3.5 掃碼簽到

掃碼簽到功能是后期迭代開發增加的功能，原因是發現有學生遇到自主簽到失敗的情況。由于自主簽到需要手機的硬件支持，要求學生打開定位、藍牙，接收iBeacon信號，有的配置低的手機，可能會發生無法接收iBeacon而造成簽到失敗的問題。

如果學生端掃教師端，教師端生成一個二維碼供多個學生掃碼，好處是效率高。但會有作弊漏洞，學生可拍下照片發給不在場的同學掃碼簽到。

如果教師端掃學生端，便可杜絕這種作弊方式，流程為：

1） 學生端向服務器發出申請。

2） 服務器根據學生的微信openid，檢測數據庫的scanApplication表是否有該學生的申請信息，如有則刪除舊記錄，然后新建一條申請記錄，字段包括“_id”（自動生成的隨機字符串）、姓名、學號、失效時間。

3） 學生端接收服務器返回的“_id”字段，并在canvas（畫布）組件上繪出二維碼。

微信小程序官方并未提供繪制二維碼的功能，本系統使用的是第三方提供的JS庫weapp-qrcode（官方地址：https：//github.com/yingye/weapp-qrcode） ，使用weapp-qrcode繪制二維碼非常簡便，調用它的drawQrcode（）方法，提供二維碼的寬高、畫布id、文本內容即可。

4） 教師端掃描二維碼，讀取申請id。

5） 教師端將申請id發送到服務器校驗。如scanApplication不存在此id，提示“申請記錄不存在”；如超出失效時間，提示“二維碼已失效”；讀取該學生的簽到表的記錄，如果簽到表的狀態字段為“已簽”，則不允許掃碼簽到。

6） 教師端顯示被掃碼學生的信息。

7） 教師點擊“代簽”按鈕，服務器更新該學生該課次的簽到記錄，將狀態設置為“代簽”、簽到時間設置為當前時間。

3.6 點名列表/歷史簽到

“點名列表”是教師端的菜單，顯示以往的點名列表，包含標題、周次、日期等摘要信息，點擊后顯示該次點名的詳情。

“歷史簽到”是學生端的菜單，以Tab菜單過濾顯示以往各個狀態的簽到情況。

3.7 統計

統計頁面顯示簽到、考試成績的詳細情況。教師端提供了“行政班”“姓名”“時間”等查詢條件；學生端只顯示本人的統計結果。

3.8 通知管理

通知管理是一個有確認狀態的新聞發布模塊。教師發布了通知，學生可在小程序里點擊確認按鈕，以防止重要的通知被疏忽，教師端可查看未確認的名單。通知的屬性有標題、發布時間、內容、狀態。教師端提供了查看、發布、修改、刪除功能，學生端僅可查看、確認。通知管理使用了rich-text（富文本）組件，rich-text可以渲染部分html標簽支持class和style屬性，可令文本有更豐富的表現方式，彌補了text組件在文本渲染上的不足。

3.9 成績管理

成績管理是教師端用于設置成績比例的工具。由于加權后的成績保存在用戶表里以加快速度，因此每次更新了成績或重新設置了比例，都需要重新計算所有學生的成績并更新用戶表。

4 系統后端的設計與實現

系統的后端采用了小程序的云開發技術。

4.1 微信小程序云開發簡介

微信小程序的云開發是Serverless的開發理念，開發者無須搭建服務器即可使用云端功能。云開發為開發者提供完整的原生云端支持和微信服務支持，弱化后端和運維概念，無須搭建服務器，使用平臺提供的API進行核心業務開發，即可實現快速上線和迭代，同時這一能力，同開發者已經使用的云服務相互兼容，并不互斥。

云開發提供了幾大基礎能力支持：

1） 云函數。開發者無須自建服務器，在云端運行的代碼，微信私有協議天然鑒權，開發者只須編寫自身業務邏輯代碼。

2） 數據庫。無須自建數據庫，一個既可在小程序前端操作，也能在云函數中讀寫的JSON數據庫。

3） 存儲。無須自建存儲和CDN，在小程序前端直接上傳/下載云端文件，在云開發控制臺可視化管理。

4） 云調用。原生微信服務集成，基于云函數免鑒權使用小程序開放接口的能力，包括服務端調用、獲取開放數據等能力。

4.2 數據庫設計

云開發提供了一個JSON數據庫，數據庫中的每條記錄都是一個JSON對象。JSON數據庫里的“集合”（collection） 對應于關系型數據庫的“表”（table） ，集合可看作一個JSON數組，數組中的每個對象就是一條記錄，記錄的格式是JSON對象。

4.3 后端業務處理

后端業務使用小程序的云函數編寫，小程序的云函數是一段運行在云端的代碼，它實際上是一個node.js的環境。使用云函數的優勢是：1） 無須管理服務器。2） 后端代碼與前端一起在微信開發者工具內編寫，就跟寫本地代碼一樣，一鍵上傳部署即可運行后端代碼。3） 獲取用戶的openid非常方便，無須維護復雜的鑒權機制。

云函數之間不能相互調用，如果寫多個云函數，通用的邏輯處理如數據庫查詢不能復用，會造成代碼管理維護上的不便。可以通過第三方庫tcb-router管理路由解決這個問題：所有的業務處理放在單個云函數里實現，將每一個請求處理函數分解到tcb-router的路由處理函數里。小程序向后端服務器發送請求時，需多加一個url作為路由標志。

將需要復用的函數，定義為云函數的內部函數，通過此方式達到了代碼復用的效果，項目中可復用的內部函數有：

loaduser（）：加載用戶信息；

loadStuclasses（）：加載學生的班級

loadTeacherClasses（）：加載教師的班級

queryAll（）：查詢所有記錄

pageQuery（）：分頁查詢

update（）：更新表

del（）：刪除記錄

myCount（）：個人統計摘要

getOpenid（）：獲取用戶的openid

5 結束語

本系統已經穩定運行了一年多，其間根據反饋進行了多次迭代升級，目前已經基本滿足師生的要求。系統的意義在于：一是大量減少了教師的工作量，讓教師有更多的時間投入在更有意義的課堂講授上；二是學生可查詢自己的平時成績，提高了便利性；三是杜絕了簽到的作弊情況；四是確保了課程通知的可靠性。

參考文獻：

[1] 李海燕，陳善柳.教務助手小程序的實現[J].電腦知識與技術，2022，18（13）：53-54.

[2] 李霞.基于微信小程序的高校新生預報到系統設計與實現[J].微型電腦應用，2022，38（7）：12-15.

[3] 閔慧，李鵬，劉婷，等.查寢打卡微信小程序的設計與實現[J].計算機時代，2022（8）：80-82.

[4] 張辰瑞，徐偉，祝曉龍，等.基于微信小程序的高?；鶎狱h建平臺開發與實現[J].軟件，2022，43（6）：76-81.

[5] 馬延立.基于微信小程序的在線考試系統設計與實現[J].信息記錄材料，2022，23（6）：151-154.

[6] 潘俊芳，侯振興.基于微信小程序的圖書館座位預約系統的設計[J].黑龍江工業學院學報（綜合版），2022，22（5）：66-71.

[7] 騰訊公司.騰訊公布二零二二年第一季業績[EB/OL].[2022-05-25].https：//static.www.tencent.com/uploads/2022/05/18/9a46878abd6009cacd79f241a814442b.pdf.

[8]北京阿拉丁未來科技有限責任公司.2022年H1小程序互聯網發展白皮書[EB/OL].[2022-08-10].https：//aldzs.com/viewpointarticle？id=16465.

【通聯編輯：謝媛媛】