基于微信小程序的體溫自助上報系統的設計與實現

秦鵬程

（吉林省廣播電視技術中心臺，吉林 長春 130021）

0 引 言

2020年初，全國爆發“新冠肺炎”疫情，1月20日習近平總書記對新型冠狀病毒感染的肺炎疫情作出重要指示，指出要把人民生命安全和身體健康放在第一位，堅決遏制疫情蔓延勢頭。在來勢洶洶的疫情面前，時間緊，任務重，如何高效、快捷、安全地完成每日工作人員的體溫采集工作成了第一個需要解決的問題，于是本平臺應運而生。本平臺基于微信小程序公眾平臺，使用JavaScript、MySQL 等框架編寫，主要功能包括用戶管理、體溫信息上報、數據匯總。后端管理主要包括管理員對數據進行歸納、匯總功能。該平臺可以無接觸的進行體溫上報工作，解決了對于每日工作人員健康情況采集工作的燃眉之急。

1 需求分析

本文的研究目的是開發一款體溫自助上報程序，建立一款可以做到讓使用者易學易用，安全無接觸的系統，隨著微信小程序使用范圍的拓展和熱度的提高，越來越多的人把注意力放在這個平臺，微信小程序基于人人都在使用的微信軟件的優勢，用戶只需要掃碼或點擊分享鏈接即可進入程序，避免了傳統應用程序下載注冊等煩瑣程序和在手機上占用手機內存、安裝過多軟件等問題。因此微信小程序所具有的易分發和易學習的特點讓其成為最終選擇。

本平臺的設計分為前端用戶平臺和后端管理平臺兩部分，前端平臺分為用戶中心模塊和功能模塊，主要實現了用戶的注冊、登陸、身份識別、個人信息記錄、體溫數據上報、查詢匯總等功能。用戶模塊實現用戶的注冊/登錄，功能模塊實現數據采集上傳。后端平臺主要基于微信云平臺實現數據匯總、查詢、導出，人員信息歸納功能。在后臺可以實現對未上報用戶提醒，并可將數據按照部門分類匯總，便于工作開展，系統功能如圖1所示。

圖1 系統功能圖

2 主要系統功能的設計

2.1 開發背景

微信小程序提供了完整的微信用戶端和后臺服務器，以及云服務、API 接口等擴展服務。非常適合目前的流行趨勢，后臺只要調用API 方法，就可以實現功能對接。微信小程序可以運行在三個平臺終端，分別是IOS、Android 和PC 端的IOS、WINDOWS（用于調試的開發者工具），在IOS 平臺上，小程序的javascript 是代碼運行在JavaScriptCore 中。

在Android 平臺上，小程序的javascript 代碼是通過騰訊公司開發的基于Webkit 的 X5 內核來解析；在PC 平臺上，小程序的javascript 代碼是運行在chrome 內核上。微信小程序包含一個描述整體程序的app 和多個描述各自頁面的page。一個小程序主體部分由三個文件組成，必須放在項目的根目錄：app.js 邏輯部分，即全局變量或者方法；app.json公共配置，包括頁面配置、頂部底部tab 的設置、背景顏色等；app.wxss 公共樣式表，可以被具體page 樣式覆蓋；app.json 公共信息目錄。app.json 公共信息目錄一般包括一下文件：.js頁面邏輯、wxml頁面結構、wxss頁面樣式表。css 的寫法并未完全支持.json頁面配置指定特定頁面的title 等元素，為了方便開發者減少配置項，規定描述頁面的這四個文件必須具有相同的路徑與文件名。微信小程序的表現語言類似HTML5，Js 腳本語言使用的是當下最好用的VUE 框架，小程序的各層分開，頁面的腳本邏輯是在JsCore 中運行，JsCore 是一個沒有窗口對象的環境，所以不能在腳本中使用window 等dom對象。所以類似jquery、zepto 等通過window 或者document來獲得dom 對象的庫是不能用來使用的。

小程序的后端開發采用JAVA 語言，JAVA 是一種面向對象的編程語言，它具備C++的優點，而JAVA 最重要的便是JDK，JDK 包含了JAVA 的運行環境、工具和核心庫。

本系統采用的是MySQL 數據庫，操作工具使用Navicat for MySQL，具有對數據的儲存、匯總、查詢、修改、刪除、導出功能。數據庫主要包括了用戶表、部門表、體溫表、時間表。

2.2 注冊登錄功能的設計

當用戶首次進入小程序，能看到注冊和登錄按鈕，點擊“注冊”按鈕進行注冊，需輸入賬號、口令。如已有賬號，可直接點擊“登陸”按鈕進入登錄頁面，如賬號口令正確則進入程序主頁，主頁如圖2所示。

圖2 程序主頁

2.3 自動更新功能的設計

當用戶打開小程序，小程序會自動檢查是否有可用更新，如檢測到有則彈出提示詢問是否進行更新，如沒有可用更新則什么都不做。

2.4 體溫上報功能的設計

當用戶在首頁點擊“體溫上報”按鈕進入信息填寫頁面，如圖3所示，用戶需填寫正確的姓名、體溫、日期、時間。然后點擊“上報數據”按鈕，完成數據上報，填寫的數據將傳送至后端服務器，上傳成功后提示成功文字，否則提示上傳失敗。

圖3 體溫上報頁面

在實際使用中，加入了未登錄用戶的姓名自動緩存功能，允許未登錄用戶手動輸入姓名并可自動保存，再次進入頁面時可自動填寫；體溫數值合法性判斷功能，在點擊提交時系統會判斷體溫數值是否合法，填寫的體溫數值需在33～40范圍內，如不合法將會彈出提示；自動獲取服務器時間日期功能，在全局函數中獲取服務器時間并自動填入；防止短時間內重復上傳功能，在點擊上傳按鈕后將屏蔽上傳按鈕的使用直到重新刷新頁面，防止誤點擊導致的重復上傳。該模塊是本平臺的核心功能。

2.5 提醒功能設計

為了實現未提交體溫數據用戶的提醒、異常信息預警功能，我們可以借助微信訂閱消息來實現，在微信小程序上申請一個訂閱消息模板，然后根據模板ID 在微信小程序中嵌入提醒功能模塊。然后在后臺通過邏輯功能實現訂閱提醒信息的發布。

在本系統中，當出現當日在崗人員未提交體溫信息時，于當日11 時向管理員及本人發送提醒信息，當出現體溫值超過37.2 的人員時，向管理員發送提醒信息。

2.6 后端管理平臺設計

在后端管理平臺的頁面上添加一個攔截，必須為管理員身份登錄的賬號才可以進入管理平臺。在管理平臺中，管理員可以修改用戶的身份、所屬部門。可以查詢、修改、刪除、導出統計數據。

當管理員進行數據查詢時，系統首先會驗證登錄狀態，驗證成功后向后端發送請求信息并賦予查詢權限。可以根據姓名、部門、日期、時間段進行查詢。并在頁面最下方提供了Excel 表格的獲取功能、方便管理者使用。

3 主要系統功能的實現

3.1 注冊登錄功能的實現

部分關鍵代碼為：

3.2 自動更新功能的實現

部分關鍵代碼為：

3.3 體溫上報功能的實現

3.3.1 姓名緩存

在頁面載入時，使用onshow 函數，判斷wx.getStorageSync('userText')里面有沒有內容，有內容就填寫到姓名欄，沒有則什么也不做，部分關鍵代碼為：

addName(event){

const self = this

const value = event.detail.value

if (value) {

wx.setStorageSync(‘userText’,value)}

name = event.detail.value}

3.3.2 時間日期自動填寫

調用全局函數util.js，代碼如下：

const app = getApp()

var util = require(‘../../utils/util.js’);

在全局函數util.js 中獲取當前時間，代碼如下：

const formatTime = date =＞ {

const year = date.getFullYear()

const month = date.getMonth() + 1

const day = date.getDate()

const hour = date.getHours()

const minute = date.getMinutes()

const second = date.getSeconds()

return [year,month,day].map(formatNumber).join(‘/’) + ‘‘ + [hour,minute,second].map(formatNumber).join(‘:’)}

const formatNumber = n =＞ {

n = n.toString()

return n[1]? n : ‘0’ + n}

const formatShijian = date =＞ {

const hour = date.getHours()

const minute = date.getMinutes()

return [hour,minute].map(formatNumber).join(‘:’)}

const formatRiqi = date =＞ {

const year = date.getFullYear()

const month = date.getMonth() + 1

const day = date.getDate()

return [year,month,day].map(formatNumber).join(‘/’)}

module.exports = {

formatTime: formatTime,

formatShijian: formatShijian,

formatRiqi: formatRiqi}

當上報頁面載入時使用onload 函數在頁面刷新時獲取new Date 內的時間值，將數值保存到stime 內，并分別寫入時間選擇器date，time，部分代碼為：

onLoad: function (t) {

stime = util.formatTime(new Date());

this.setData({

stime: stime});

time = util.formatShijian(new Date());

this.setData({

time: time});

date = util.formatRiqi(new Date());

this.setData({

date: date});},

bindDateChange: function (e) {

console.log('picker 發送選擇改變，攜帶值為',e.detail.value)

date = e.detail.value

this.setData({

date: e.detail.value})},

bindTimeChange: function (e) {

console.log('picker 發送選擇改變，攜帶值為',e.detail.value)

time = e.detail.value

this.setData({

time: e.detail.value})},

4 結 論

針對“新冠肺炎”疫情背景下的體溫采集等工作要求，本文提出了一種基于微信小程序平臺開發了體溫自助上報系統，滿足疫情防控工作的要求，可每日對工作人員體溫情況進行無接觸式采集管理，數據按人員、部門、日期、時間分類，用戶免去了煩瑣的下載安裝步驟，管理者節約了大量的統計時間，經過兩年的使用，該平臺工作穩定可靠。隨著我們的生活信息化步伐加快，相信伴隨著技術的基本，本系統將有更好的應用前景。