给管理商场消防安全搭建消防安全培训小程序全过程

一、需求沟通

"我是管理商场消防安全的嘛,做这个的作用呢,1是商场的所有商户员工可以看平面或者视频随时自学,

2是我们定期培训必修课程、考试,这个需要留存他们的手签字的签到表确认我们讲给他们听了(免责很重要),然后考试可以多次反复考,考完只要不是满分都告诉商户员工错题是哪个,直到全都满分,同时我得知道哪些商户的那些人员没考试和没签名,

3是重要检查时的全员通知,重大节假日的全员通知,重大活动的全员通知;

4.是我们公司人员的培训,和商户流程基本一样,指示讲的课程不一样。"

二、需求分析

经过一轮的沟通,了解到他们想做个公司内部用的消防安全培训的小程序。大体上实现功能如下:

1.重要消防相关信息发布提醒;

2.培训课程库播放,文档的,加视频的;

3.题库、考试单选、多选、判断三类题 ;

4.考试成绩查询、输出表单 ;

5.单次培训:限时内完成,签到(手签名),限时内完成考试;

三、系统设计与搭建

1. 首页设计

首页采用卡片式布局,顶部为通知栏:

  • 消防安全通知轮播横幅
  • 重要信息提醒红点标识
  • 未读消息数量提示主要功能区分为四大模块:
  • 培训课程:展示最新/必修课程
  • 在线考试:显示待完成考试
  • 培训记录:个人培训完成情况
  • 成绩查询:考试成绩汇总

2. 培训课程页面

课程库采用列表式布局:

  • 顶部搜索栏
  • 课程分类标签筛选
  • 课程卡片展示(包含封面图、课程名称、时长、类型图标)
  • 支持三种形式课程:文档、视频、外部链接
  • 课程进度显示条
  • 完成状态标识

3. 考试系统页面

考试页面分为两个部分:

  • 考试列表: * 未完成考试提醒

    • 考试时间倒计时 * 考试类型标识 * 及格分数线显示
  • 试题界面:

    • 顶部进度条
    • 题型分类标签
    • 单选/多选/判断题展示区 * 答题卡浮动按钮 * 提交按钮

4. 签到考勤页面

单次培训签到界面:

  • 培训信息展示
  • 电子签名板
  • 签到时间记录
  • 培训倒计时提示
  • 考试入口(限时开放)

5. 成绩查询页面

成绩管理采用表格式布局:

  • 时间筛选器
  • 考试记录列表
  • 成绩详情展示
  • 导出表单按钮
  • 成绩分析图表

其他作品集

相关推荐
Jing_Rainbow4 小时前
【 Weapp-1 /Lesson18(2025-11-03)】# 微信小程序开发全解析:从项目结构到生态优势 🚀
微信·微信小程序·程序员
千寻技术帮4 小时前
50045_基于微信小程序的民宿预订管理系统
微信小程序·源码·ppt·项目文档·民宿
禁止摆烂_才浅6 小时前
Taro 小程序页面返回传参完整示例
react.js·微信小程序·taro
vx_dmxq21111 小时前
【微信小程序学习交流平台】(免费领源码+演示录像)|可做计算机毕设Java、Python、PHP、小程序APP、C#、爬虫大数据、单片机、文案
java·spring boot·python·mysql·微信小程序·小程序·idea
腾马科技12 小时前
小酒馆白酒饮料订单配送立即点餐存酒小程序源码
微信小程序·点餐小程序
学点程序13 小时前
AI辅助开发小程序的实践分享
小程序
vx_dmxq2111 天前
【PHP考研互助系统】(免费领源码+演示录像)|可做计算机毕设Java、Python、PHP、小程序APP、C#、爬虫大数据、单片机、文案
java·spring boot·mysql·考研·微信小程序·小程序·php
蹦极的考拉1 天前
夜间无法登录:ThinkPHP api接口 23:00 准时罢工的排查全纪录
小程序·thinkphp·api接口·无法登陆
vx_vxbs661 天前
【SSM电影网站】(免费领源码+演示录像)|可做计算机毕设Java、Python、PHP、小程序APP、C#、爬虫大数据、单片机、文案
java·spring boot·python·mysql·小程序·php·idea
我命由我123451 天前
微信开发者工具 - 模拟器分离窗口与关闭分离窗口
前端·javascript·学习·微信小程序·前端框架·html·js