ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

基于uni-app的疫情居家检测小程序开发实践

基于uni-app的疫情居家检测小程序开发实践

1. 项目背景与需求分析

2020年以来的特殊时期催生了大量数字化防疫需求,其中居家健康监测成为基层管理的核心痛点。传统纸质登记存在数据滞后、统计困难、易造假等问题,而基于微信小程序的解决方案具有天然优势:无需安装、即用即走、用户覆盖率高。这正是我选择"疫情居家检测管理系统"作为毕业设计课题的现实意义。

从技术角度看,该系统需要实现三个核心功能模块:

  • 居民端:健康打卡、异常申报、核酸结果上传
  • 社区端:数据看板、预警通知、统计导出
  • 管理端:权限分配、区域配置、审核流程

特别值得注意的是,微信小程序在疫情期间开放了特殊接口权限,如获取用户实名信息、调用卫健委核酸数据等,这为系统开发提供了官方支持。同时,uni-app跨端框架的成熟,使得一套代码同时适配小程序和H5成为可能,这对毕设的完整性和扩展性都是加分项。

2. 技术选型与架构设计

2.1 前端技术栈决策

经过对比测试,最终选择uni-app+Vue3组合而非原生小程序开发,主要基于以下考量:

  1. 开发效率:使用熟悉的Vue语法比学习WXML/WXSS更高效
  2. 跨端能力:通过条件编译可同时输出H5版本(实测打包差异仅增加约200KB)
  3. 组件生态:uView组件库提供现成的表单、图表等组件

关键配置示例(manifest.json):

{ "mp-weixin": { "appid": "wx你的appid", "usingComponents": true, "permission": { "scope.userLocation": { "desc": "用于自动填充社区信息" } } } }

2.2 后端服务搭建

考虑到毕设周期和答辩演示需求,采用Node.js+MySQL轻量级方案:

  • 使用Koa2框架而非Express,因其更优雅的中间件机制
  • 数据库选用MySQL5.7而非MongoDB,因防疫数据需要严格的事务支持
  • 部署方案:本地测试用PM2守护进程,演示时使用腾讯云基础版CVM

典型API接口设计:

// 健康打卡提交接口 router.post('/api/checkin', async (ctx) => { const { temperature, symptoms } = ctx.request.body if (!temperature || temperature > 37.3) { ctx.body = { code: 400, msg: '体温异常' } return } // 数据库操作... })

3. 核心功能实现细节

3.1 居民健康打卡模块

采用微信表单组件+自定义校验规则,关键实现点:

  1. 体温输入框增加0.1℃步进控制
<input type="number" step="0.1" @blur="checkTemp" />
  1. 症状选择使用多级联动(参考卫健委标准分类)
  2. 地理位置自动填充(需处理用户拒绝授权的情况)

实测中发现的问题及解决方案:

在华为机型上,连续快速提交会导致表单数据丢失。通过添加防抖函数和提交状态锁解决:

let isSubmitting = false const submitForm = debounce(() => { if (isSubmitting) return isSubmitting = true //...提交逻辑 }, 500)

3.2 社区数据看板开发

使用ECharts微信小程序版实现可视化,特别注意:

  1. 数据聚合策略:按楼栋/单元分级统计
  2. 性能优化:对超过1000条记录启用分页查询
  3. 缓存机制:首页数据本地缓存2小时

典型图表配置:

option = { dataset: { source: [ ['单元', '正常', '异常'], ['1单元', 45, 2], ['2单元', 38, 5] ] }, series: [ { type: 'bar', encode: { x: '单元', y: '正常' } } ] }

4. 项目难点与解决方案

4.1 实名认证对接

微信小程序实名信息获取流程:

  1. 前端调用wx.getWeRunData获取encryptedData
  2. 后端使用session_key解密数据
  3. 与公安库比对(使用第三方服务如阿里云实名认证API)

遇到的坑:

初期直接在前端解密导致敏感信息暴露,后改为后端解密并立即脱敏存储。同时发现iOS和Android的解密结果格式不一致,需要做平台判断处理。

4.2 高并发提交处理

在模拟压力测试时(1000次/分钟打卡),出现数据库连接池耗尽问题。通过以下优化解决:

  1. 使用Knex连接池(配置提升到20个连接)
  2. 对打卡记录采用批量插入(每次最多50条)
  3. 添加Redis缓存层减轻数据库压力

优化前后对比:

指标优化前优化后
平均响应时间1200ms300ms
错误率23%0.5%
CPU占用85%40%

5. 项目扩展与答辩建议

5.1 可扩展方向

  1. 物联网集成:通过蓝牙连接智能体温计自动上传数据
  2. 消息推送:对接模板消息实现异常预警
  3. 数字孪生:结合三维楼宇模型展示疫情分布

5.2 答辩注意事项

根据个人答辩经验,建议重点准备:

  1. 演示时准备两个账号(居民/管理员)随时切换
  2. 提前录制异常情况处理视频(如网络中断时的本地缓存机制)
  3. 打印关键代码片段(如解密算法)供评委查阅

实际开发中,我发现微信小程序的scroll-view组件在渲染长列表时性能较差,最终改用recycle-view实现虚拟滚动,这使得居民历史记录查询页面的渲染时间从3秒降至0.5秒。这种具体问题的解决过程往往是答辩加分项。

返回列表