基于小程序的定位健康打卡系統

何濤 楊振南 潘學文

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

關鍵詞：小程序;打卡系統;健康管理

中圖分類號：TN911-4;G434? ? ? ? 文獻標識碼：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 引言

近年來我國移動網絡用戶飛速增長，達到數億，到2015年，我國移動網絡4G用戶預計將達到7.1億人。由于細分市場的勢頭和新的服務創新，到2020年，中國用移動互聯網的人，將會急劇增長，市場占有將會有幾千億[1-2]。產業發展離不開用戶的基數，用戶的基數在移動互聯網開發初期尤為重要，用戶基礎已成為左右產業發展的重要因素[3]。

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

2 需求分析

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

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

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

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

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

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

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

3 系統設計及實現

3.1 總體設計

本系統的總體設計如圖2所示。總體設計能夠很好滿足用戶的需求，設計時著重考慮系統界面簡潔，美觀，易于操作。系統采取分層次設計，使軟件系統的邏輯分界變得清晰。模塊化和封裝是任何面向對象開發的最終目標，清晰的邏輯分界使這一目標比較容易實現。

3.2 系統邏輯架構設計

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

系統的邏輯框架如圖4所示。架構的最上層是視圖層，視圖層是由小程序特有的組件構成，組件通過屬性和邏輯交互，視圖層負責渲染頁面，其下面就是邏輯層，邏輯層能調用API，例如地圖，用戶設置，跳轉等。API下層就是設備底層，設備底層支持API的使用，API還可以從服務器調出，直接使用。

3.3 系統功能架構設計

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

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

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

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

4 結束語

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

參考文獻：

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

[2] 朱敏，尚鮮連，董廣濤，等.健身服務微信小程序開發——大學生創新項目實踐[J].科技創新導報，2020，17（15）：241-242，244.

[3] 蒲超.基于網站制作的Web前端開發技術與優化[J].數碼世界，2020（4）：34.

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

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

【通聯編輯：代影】