秦鵬程

（吉林省廣播電視技術(shù)中心臺(tái)，吉林 長(zhǎng)春 130021）

0 引 言

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

1 需求分析

本文的研究目的是開(kāi)發(fā)一款體溫自助上報(bào)程序，建立一款可以做到讓使用者易學(xué)易用，安全無(wú)接觸的系統(tǒng)，隨著微信小程序使用范圍的拓展和熱度的提高，越來(lái)越多的人把注意力放在這個(gè)平臺(tái)，微信小程序基于人人都在使用的微信軟件的優(yōu)勢(shì)，用戶(hù)只需要掃碼或點(diǎn)擊分享鏈接即可進(jìn)入程序，避免了傳統(tǒng)應(yīng)用程序下載注冊(cè)等煩瑣程序和在手機(jī)上占用手機(jī)內(nèi)存、安裝過(guò)多軟件等問(wèn)題。因此微信小程序所具有的易分發(fā)和易學(xué)習(xí)的特點(diǎn)讓其成為最終選擇。

本平臺(tái)的設(shè)計(jì)分為前端用戶(hù)平臺(tái)和后端管理平臺(tái)兩部分，前端平臺(tái)分為用戶(hù)中心模塊和功能模塊，主要實(shí)現(xiàn)了用戶(hù)的注冊(cè)、登陸、身份識(shí)別、個(gè)人信息記錄、體溫?cái)?shù)據(jù)上報(bào)、查詢(xún)匯總等功能。用戶(hù)模塊實(shí)現(xiàn)用戶(hù)的注冊(cè)/登錄，功能模塊實(shí)現(xiàn)數(shù)據(jù)采集上傳。后端平臺(tái)主要基于微信云平臺(tái)實(shí)現(xiàn)數(shù)據(jù)匯總、查詢(xún)、導(dǎo)出，人員信息歸納功能。在后臺(tái)可以實(shí)現(xiàn)對(duì)未上報(bào)用戶(hù)提醒，并可將數(shù)據(jù)按照部門(mén)分類(lèi)匯總，便于工作開(kāi)展，系統(tǒng)功能如圖1所示。

圖1 系統(tǒng)功能圖

2 主要系統(tǒng)功能的設(shè)計(jì)

2.1 開(kāi)發(fā)背景

微信小程序提供了完整的微信用戶(hù)端和后臺(tái)服務(wù)器，以及云服務(wù)、API 接口等擴(kuò)展服務(wù)。非常適合目前的流行趨勢(shì)，后臺(tái)只要調(diào)用API 方法，就可以實(shí)現(xiàn)功能對(duì)接。微信小程序可以運(yùn)行在三個(gè)平臺(tái)終端，分別是IOS、Android 和PC 端的IOS、WINDOWS（用于調(diào)試的開(kāi)發(fā)者工具），在IOS 平臺(tái)上，小程序的javascript 是代碼運(yùn)行在JavaScriptCore 中。

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

小程序的后端開(kāi)發(fā)采用JAVA 語(yǔ)言，JAVA 是一種面向?qū)ο蟮木幊陶Z(yǔ)言，它具備C++的優(yōu)點(diǎn)，而JAVA 最重要的便是JDK，JDK 包含了JAVA 的運(yùn)行環(huán)境、工具和核心庫(kù)。

本系統(tǒng)采用的是MySQL 數(shù)據(jù)庫(kù)，操作工具使用Navicat for MySQL，具有對(duì)數(shù)據(jù)的儲(chǔ)存、匯總、查詢(xún)、修改、刪除、導(dǎo)出功能。數(shù)據(jù)庫(kù)主要包括了用戶(hù)表、部門(mén)表、體溫表、時(shí)間表。

2.2 注冊(cè)登錄功能的設(shè)計(jì)

當(dāng)用戶(hù)首次進(jìn)入小程序，能看到注冊(cè)和登錄按鈕，點(diǎn)擊“注冊(cè)”按鈕進(jìn)行注冊(cè)，需輸入賬號(hào)、口令。如已有賬號(hào)，可直接點(diǎn)擊“登陸”按鈕進(jìn)入登錄頁(yè)面，如賬號(hào)口令正確則進(jìn)入程序主頁(yè)，主頁(yè)如圖2所示。

圖2 程序主頁(yè)

2.3 自動(dòng)更新功能的設(shè)計(jì)

當(dāng)用戶(hù)打開(kāi)小程序，小程序會(huì)自動(dòng)檢查是否有可用更新，如檢測(cè)到有則彈出提示詢(xún)問(wèn)是否進(jìn)行更新，如沒(méi)有可用更新則什么都不做。

2.4 體溫上報(bào)功能的設(shè)計(jì)

當(dāng)用戶(hù)在首頁(yè)點(diǎn)擊“體溫上報(bào)”按鈕進(jìn)入信息填寫(xiě)頁(yè)面，如圖3所示，用戶(hù)需填寫(xiě)正確的姓名、體溫、日期、時(shí)間。然后點(diǎn)擊“上報(bào)數(shù)據(jù)”按鈕，完成數(shù)據(jù)上報(bào)，填寫(xiě)的數(shù)據(jù)將傳送至后端服務(wù)器，上傳成功后提示成功文字，否則提示上傳失敗。

圖3 體溫上報(bào)頁(yè)面

在實(shí)際使用中，加入了未登錄用戶(hù)的姓名自動(dòng)緩存功能，允許未登錄用戶(hù)手動(dòng)輸入姓名并可自動(dòng)保存，再次進(jìn)入頁(yè)面時(shí)可自動(dòng)填寫(xiě)；體溫?cái)?shù)值合法性判斷功能，在點(diǎn)擊提交時(shí)系統(tǒng)會(huì)判斷體溫?cái)?shù)值是否合法，填寫(xiě)的體溫?cái)?shù)值需在33～40范圍內(nèi)，如不合法將會(huì)彈出提示；自動(dòng)獲取服務(wù)器時(shí)間日期功能，在全局函數(shù)中獲取服務(wù)器時(shí)間并自動(dòng)填入；防止短時(shí)間內(nèi)重復(fù)上傳功能，在點(diǎn)擊上傳按鈕后將屏蔽上傳按鈕的使用直到重新刷新頁(yè)面，防止誤點(diǎn)擊導(dǎo)致的重復(fù)上傳。該模塊是本平臺(tái)的核心功能。

2.5 提醒功能設(shè)計(jì)

為了實(shí)現(xiàn)未提交體溫?cái)?shù)據(jù)用戶(hù)的提醒、異常信息預(yù)警功能，我們可以借助微信訂閱消息來(lái)實(shí)現(xiàn)，在微信小程序上申請(qǐng)一個(gè)訂閱消息模板，然后根據(jù)模板ID 在微信小程序中嵌入提醒功能模塊。然后在后臺(tái)通過(guò)邏輯功能實(shí)現(xiàn)訂閱提醒信息的發(fā)布。

在本系統(tǒng)中，當(dāng)出現(xiàn)當(dāng)日在崗人員未提交體溫信息時(shí)，于當(dāng)日11 時(shí)向管理員及本人發(fā)送提醒信息，當(dāng)出現(xiàn)體溫值超過(guò)37.2 的人員時(shí)，向管理員發(fā)送提醒信息。

2.6 后端管理平臺(tái)設(shè)計(jì)

在后端管理平臺(tái)的頁(yè)面上添加一個(gè)攔截，必須為管理員身份登錄的賬號(hào)才可以進(jìn)入管理平臺(tái)。在管理平臺(tái)中，管理員可以修改用戶(hù)的身份、所屬部門(mén)?？梢圆樵?xún)、修改、刪除、導(dǎo)出統(tǒng)計(jì)數(shù)據(jù)。

當(dāng)管理員進(jìn)行數(shù)據(jù)查詢(xún)時(shí)，系統(tǒng)首先會(huì)驗(yàn)證登錄狀態(tài)，驗(yàn)證成功后向后端發(fā)送請(qǐng)求信息并賦予查詢(xún)權(quán)限。可以根據(jù)姓名、部門(mén)、日期、時(shí)間段進(jìn)行查詢(xún)。并在頁(yè)面最下方提供了Excel 表格的獲取功能、方便管理者使用。

3 主要系統(tǒng)功能的實(shí)現(xiàn)

3.1 注冊(cè)登錄功能的實(shí)現(xiàn)

部分關(guān)鍵代碼為：

3.2 自動(dòng)更新功能的實(shí)現(xiàn)

部分關(guān)鍵代碼為：

3.3 體溫上報(bào)功能的實(shí)現(xiàn)

3.3.1 姓名緩存

在頁(yè)面載入時(shí)，使用onshow 函數(shù)，判斷wx.getStorageSync('userText')里面有沒(méi)有內(nèi)容，有內(nèi)容就填寫(xiě)到姓名欄，沒(méi)有則什么也不做，部分關(guān)鍵代碼為：

addName(event){

const self = this

const value = event.detail.value

if (value) {

wx.setStorageSync(‘userText’,value)}

name = event.detail.value}

3.3.2 時(shí)間日期自動(dòng)填寫(xiě)

調(diào)用全局函數(shù)util.js，代碼如下：

const app = getApp()

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

在全局函數(shù)util.js 中獲取當(dāng)前時(shí)間，代碼如下：

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}

當(dāng)上報(bào)頁(yè)面載入時(shí)使用onload 函數(shù)在頁(yè)面刷新時(shí)獲取new Date 內(nèi)的時(shí)間值，將數(shù)值保存到stime 內(nèi)，并分別寫(xiě)入時(shí)間選擇器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 發(fā)送選擇改變，攜帶值為',e.detail.value)

date = e.detail.value

this.setData({

date: e.detail.value})},

bindTimeChange: function (e) {

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

time = e.detail.value

this.setData({

time: e.detail.value})},

4 結(jié) 論

針對(duì)“新冠肺炎”疫情背景下的體溫采集等工作要求，本文提出了一種基于微信小程序平臺(tái)開(kāi)發(fā)了體溫自助上報(bào)系統(tǒng)，滿(mǎn)足疫情防控工作的要求，可每日對(duì)工作人員體溫情況進(jìn)行無(wú)接觸式采集管理，數(shù)據(jù)按人員、部門(mén)、日期、時(shí)間分類(lèi)，用戶(hù)免去了煩瑣的下載安裝步驟，管理者節(jié)約了大量的統(tǒng)計(jì)時(shí)間，經(jīng)過(guò)兩年的使用，該平臺(tái)工作穩(wěn)定可靠。隨著我們的生活信息化步伐加快，相信伴隨著技術(shù)的基本，本系統(tǒng)將有更好的應(yīng)用前景。