何濤 楊振南 潘學(xué)文

摘要：該文通過WXML+WXSS+JavaScript等界面實現(xiàn)技術(shù)，結(jié)合WeUI動態(tài)視覺組件庫完成了定位打卡小程序的開發(fā)。小程序的主要功能分為登錄功能、按鈕跳轉(zhuǎn)功能、定位功能、提交功能，還可以在云數(shù)據(jù)庫查看打卡人的信息。系統(tǒng)能很好完成人員的信息匯報，減少收集信息人的工作量。

關(guān)鍵詞：小程序;打卡系統(tǒng);健康管理

中圖分類號：TN911-4;G434? ? ? ? 文獻(xiàn)標(biāo)識碼：A

文章編號：1009-3044（2021）10-0083-02

Abstract： In this paper， through the wxml + wxss + JavaScript and other interface implementation technology， combined with the weui dynamic visual component library to complete the development of the health punch. The main functions of the applet are login function， button jump function， positioning function and submission function. You can also view the information of the punch in the cloud database， and export the information from the database if you need it. The system can well complete the personnel information report， reduce the workload of information collection.

Key words： Wechat applet; punch system; health management

1 引言

近年來我國移動網(wǎng)絡(luò)用戶飛速增長，達(dá)到數(shù)億，到2015年，我國移動網(wǎng)絡(luò)4G用戶預(yù)計將達(dá)到7.1億人。由于細(xì)分市場的勢頭和新的服務(wù)創(chuàng)新，到2020年，中國用移動互聯(lián)網(wǎng)的人，將會急劇增長，市場占有將會有幾千億[1-2]。產(chǎn)業(yè)發(fā)展離不開用戶的基數(shù)，用戶的基數(shù)在移動互聯(lián)網(wǎng)開發(fā)初期尤為重要，用戶基礎(chǔ)已成為左右產(chǎn)業(yè)發(fā)展的重要因素[3]。

在移動應(yīng)用程序中，App和小程序相比開發(fā)時間長，新人上手慢，成本高[4-5]。而新一代的移動互聯(lián)應(yīng)用發(fā)展的主要方向是“微，小，輕”，騰訊公司發(fā)布其微信生態(tài)圈的輕應(yīng)用框架——微信小程序。小程序開發(fā)時間短，新人上手快。在移動互聯(lián)網(wǎng)高速發(fā)展時代，充分利用信息技術(shù)，加上微信的普及程度，設(shè)計一個微信健康打卡系統(tǒng)，可以快速地推廣，迅速獲取廣大人民群眾的健康信息。

2 需求分析

健康管理的內(nèi)容主要包括：體溫，是否感冒，咳嗽，乏力，腹瀉，呼吸困難等體征。此外還有出行記錄管理，家人的健康狀況等。對于大學(xué)生還需要統(tǒng)計心理健康狀況等。

一方面，需要人民群眾上報這些信息，另一方面，還需要進(jìn)行匯總和統(tǒng)計，找出異常狀態(tài)，區(qū)分異常等級。這些工作依靠人工完成，將是非常巨大的工作量，在有限的時間內(nèi)，甚至是無法完成的。

系統(tǒng)功能分析如圖1所示。包括前臺和后臺兩部分。前端分為三個功能分別是用戶管理，健康打卡，還有定位功能。

用戶管理功能：包括用戶注冊，用戶登錄等功能。可以查看用戶是否登錄過。此功能需要微信授權(quán)，如果你拒絕微信授權(quán)就出現(xiàn)警告返回頁面，如果接受授權(quán)就跳轉(zhuǎn)你所設(shè)置小程序的首頁。

健康打卡頁面：這個頁面由按鈕組件構(gòu)成，用戶只需要根據(jù)提示進(jìn)行健康信息的填寫，其中大部分功能做成了選擇題的模式，填寫簡單。此頁面下，只需要輕輕點擊就能跳轉(zhuǎn)到定位輸入信息頁面。

定位功能：包含定位輸入信息頁面：進(jìn)入這個頁面你首先需要定位授權(quán)，只有同意了才能進(jìn)行定位，不同意就無法定位。無法定位時，需要手動輸入地址信息。此外，自動和手動輸入地址是可行的。

后臺數(shù)據(jù)庫主要是看用戶輸入地理位置的信息，看看有沒有感染風(fēng)險，看看有沒有感冒癥狀，有沒有接觸確診或疑似病例，家人有沒有感冒，近期有沒有去過武漢這些行為。后臺的數(shù)據(jù)還可以從系統(tǒng)導(dǎo)出。

3 系統(tǒng)設(shè)計及實現(xiàn)

3.1 總體設(shè)計

本系統(tǒng)的總體設(shè)計如圖2所示?？傮w設(shè)計能夠很好滿足用戶的需求，設(shè)計時著重考慮系統(tǒng)界面簡潔，美觀，易于操作。系統(tǒng)采取分層次設(shè)計，使軟件系統(tǒng)的邏輯分界變得清晰。模塊化和封裝是任何面向?qū)ο箝_發(fā)的最終目標(biāo)，清晰的邏輯分界使這一目標(biāo)比較容易實現(xiàn)。

3.2 系統(tǒng)邏輯架構(gòu)設(shè)計

微信和html非常相似，用wxss和js來控制wxml，用邏輯層和渲染層一起組成的網(wǎng)頁，微信小程序有許多文件，app.js，app.wxml，app，json，app.wxss控制整個APP的交互，頁面樣式，頁面顯示還有控制單個頁面的文件，交互情況如圖3所示。微信app由單列組成，單列上面包含許多頁面，每個頁面包含wxml文件，json文件，wxss文件和js文件。

系統(tǒng)的邏輯框架如圖4所示。架構(gòu)的最上層是視圖層，視圖層是由小程序特有的組件構(gòu)成，組件通過屬性和邏輯交互，視圖層負(fù)責(zé)渲染頁面，其下面就是邏輯層，邏輯層能調(diào)用API，例如地圖，用戶設(shè)置，跳轉(zhuǎn)等。API下層就是設(shè)備底層，設(shè)備底層支持API的使用，API還可以從服務(wù)器調(diào)出，直接使用。

3.3 系統(tǒng)功能架構(gòu)設(shè)計

用戶需要登錄然后，點擊打卡按鈕，然后進(jìn)行定位打卡，在操作盡量設(shè)計的簡單，用戶輕松進(jìn)行操作。

1）登錄功能。用戶小程序通過wx.login向微信服務(wù)器獲取code，調(diào)用wx.request將code傳遞給后端，后端服務(wù)器通code向微信服務(wù)器換取openID和session_key，然后后端服務(wù)器將自建用戶身份標(biāo)識發(fā)送給小程序本地存儲，除了傳統(tǒng)登錄功能，還有云開發(fā)登錄功能。

2）定位輸入功能。定位功能的實現(xiàn)框圖如圖5所示。騰訊地圖WebService API 是基于HTTPS/HTTP協(xié)議的數(shù)據(jù)接口，開發(fā)者可以使用任何客戶端、服務(wù)器和開發(fā)語言，按照騰訊地圖WebService API規(guī)范，按需構(gòu)建HTTPS請求，并獲取結(jié)果數(shù)據(jù)（目前支持JSON/JSONP方式返回）。騰訊地圖API的調(diào)用，需要先到騰訊官方網(wǎng)站進(jìn)行注冊，獲取相關(guān)的KEY，下載調(diào)用API相關(guān)地圖文件，然后把地圖文件移動開發(fā)者工具中才能使用，然后在webserviceAPI添加相關(guān)的域名白名單servicewechat.com，在然后在小程序平臺配置域名https：//apis.map.qq.com，最后要在小程序平臺開啟騰訊位置服務(wù)路線規(guī)劃插件，準(zhǔn)備工作做好，然后就是具體設(shè)計，首先看看是否開啟定位，不開啟則不顯示定位，開啟先獲取經(jīng)緯度，再進(jìn)行逆向地址解析，最后輸出定位。

3）數(shù)據(jù)傳入數(shù)據(jù)庫。首先開啟云數(shù)據(jù)庫功能，然后需要將輸入的表單提交到數(shù)據(jù)庫當(dāng)中，在數(shù)據(jù)庫當(dāng)中可以查看。

4 結(jié)束語

經(jīng)在學(xué)校班級小范圍內(nèi)行了模擬測試，本文設(shè)計的微信健康打卡小程序能完成定位打卡功能，另外還可以收集個人及家人的健康信息，本人及家人是否發(fā)燒等信息。

參考文獻(xiàn)：

[1] 孫騰雷，畢昕宇，孫倩倩，等.基于微信小程序的疫情防控平臺的設(shè)計與實現(xiàn)[J].電子測試，2020（13）：77-79.

[2] 朱敏，尚鮮連，董廣濤，等.健身服務(wù)微信小程序開發(fā)——大學(xué)生創(chuàng)新項目實踐[J].科技創(chuàng)新導(dǎo)報，2020，17（15）：241-242，244.

[3] 蒲超.基于網(wǎng)站制作的Web前端開發(fā)技術(shù)與優(yōu)化[J].數(shù)碼世界，2020（4）：34.

[4] 王蕓琦，蔡建平.基于位置的簽到微信小程序開發(fā)[J].計算機時代，2019（11）：67-69，73.

[5] 張杭，朱紅梅，王婕，等.基于微信小程序的智慧農(nóng)藥信息管理系統(tǒng)的研究與實現(xiàn)[J].現(xiàn)代信息科技，2019，3（20）：85-87，92.

【通聯(lián)編輯：代影】