摘" 要：为顺应移动互联网的发展，充分发挥移动互联网技术和数字化技术在煤矿安全培训教育工作中的作用，以微信小程序为媒介，搭建移动学习平台。首先介绍了煤矿安全培训平台的设计原则和总体框架，其次介绍了平台界面、功能及数据库的设计，最后使用微信开发者工具完成了前端功能的搭建。用户可以在此平台上进行答题练习、资料学习、在线模拟考试等，此平台可以满足不同用户的个性化学习需求。
关键词：微信小程序；煤矿安全培训；前台功能设计；个性化
中图分类号：TP311" 文献标识码：A" 文章编号：2096-4706（2024）09-0097-05
Design and Implementation of Coal Mine Security Training Platform Front End Based on WeChat Mini Program
PENG Yan， LIU Fenghua， ZHU Yiwen， TAO Xingyu
（School of Mathematics and Statistics， Xuzhou University of Technology， Xuzhou" 221018， China）
Abstract： In order to comply with the development of mobile Internet and give full play to the role of mobile Internet technology and digital technology in coal mine security training and education， a mobile learning platform is built with WeChat Mini Program as the medium. Firstly， the design principles and overall framework of the coal mine security training platform are introduced. Secondly， the design of the platform interface， functions， and database is introduced. Finally， the front-end functionality is built using the WeChat developer tool. Users can practice answering questions， learn materials， and take online mock exams on this platform， which can meet the personalized learning needs of different users.
Keywords： WeChat Mini Program; coal mine security training; front end function design; personalization
0" 引" 言
党的十八大曾提出“强化公共安全体系和企业安全生产基础建设，遏制重特大安全事故”，煤矿产业作为高危产业，更应贯彻落实好安全工作的开展[1]。
煤矿安全事故时有发生[2]，但现有的培训模式存在着诸多弊端，集中安全培训、考试评估模式存在成本高、难度大，人工阅卷模式效率低、强度大等问题。煤矿培训系统老化落后，功能缺失或过于简单，平台设施陈旧，根本无法满足学员移动互联网下的碎片化学习需求[3]。受培训中心人员不足、专业能力以及时间所限，煤矿专业性学习内容更新滞后，煤矿自有和自建培训内容、考练题库等制作不足、更新不及时，也无法满足员工安全学习需求。如今，发挥科技在培训教育工作中的作用，实现培训移动化和定制化，才能更好地解决现有模式下所存在的问题。
本文将详细介绍这款针对煤矿安全开发定制的移动在线学习小程序前端的设计与开发。
1" 设计原则与框架设计
1.1" 设计原则
本培训平台是基于微信小程序开发的，目标是解决当前煤矿安全培训模式落后、培训系统老化、内容更新滞后等困扰，充分利用微信小程序移动化、便捷化等优点，让学员利用碎片化时间，随时随地的学习练习，缓解工学矛盾，降低培训成本，提高培训学习效率[4]。因此本培训平台的设计需要满足以下几个条件：
1）便捷的移动练习系统，无须下载安装，扫码即可登录使用系统，易推广，方便快捷，操作便捷。
2）仅通过手机学习，操作简单，让学员容易上手，整体操作流畅。
3）具备完整的数据库，让学员了解更多煤矿安全方面的知识。
4）主题色彩统一，方便用户分辨当前所在位置，有利于提高页面的观赏性。
1.2" 总体框架
煤矿安全培训小程序的前端采用了微信官方提供的微信开发者工具进行开发，使用小程序开发框架，该框架提供了基于JavaScript的逻辑层框架以及wxml和wxss视图层语言，并在视图层和逻辑层之间提供了数据传输和事件交互[5]。
通过小组成员不断的讨论，总结出煤矿安全培训平台的前台模块由首页、资料、视频、动态、我的组成，主要功能包括课程学习、题库练习、用户信息等[6]。其主要功能框架如图1所示。
2" 界面设计及功能实现
2.1" 首页模块
本平台的首页设置了搜索功能，可以根据用户的需求进行资料的搜索，以“轮播图”和“scroll-view滚动视图”的形式进行新闻资讯的实时更新推送，并且将平台中的关键常用功能以宫格的形式创建在首页，包括每日一题、随机练习、抽考考试、课程学习等，方便用户的使用。在首页的页脚设置了快捷切换界面的导航按钮，包括首页、资料、视频、动态、我的，点击即可实现5个界面的切换。首页界面设计如图2所示。
2.2" 资料模块
该模块主要针对煤矿培训消息滞后、更新速度慢、资料体系庞杂等之前存在的弊端，在资料模块的上端设置了快捷切换界面的导航按钮，分为政策法规、事故案例、专业知识和题库复习4个板块，学员可根据自身需求，选择内容进行学习，可利用碎片化时间学习了解有关讯息，有效地避免浪费时间、做无用功。资料模块的页面具体效果图如图3所示。
2.3" 视频模块
该模块主要为参培人员提供学习视频，组织培训者可以上传安全教育微视频、工种操作视频、网络教学等视频资料和事故案例警示教育课程等。本模块分为8个板块，分别是公开课堂、专家讲堂、操作技能、事故案例、应急救援、安全常识、灾害防治和安全法规，涵盖了煤矿安全培训所需要的各个教学资料视频模块。视频模块的页面具体效果图如图4所示。
2.4" 动态模块
为解决煤矿培训系统老化，煤矿类的实时新闻、最新科技成果不能及时告知学员的问题，特设立动态模块。该模块分为新闻资讯、事故快报、通知公告和科技前沿4个部分，内容涵盖各个平台所收集的最新资讯、法规及公告等。通过本模块，学员可以毫不费力地了解各种实时资讯，开阔眼界，更好更安全地进行煤矿工作，有效规避事故风险。动态模块的页面具体效果图如图5所示。
2.5" 我的模块
用户在煤矿安全培训微信小程序中点击我的，可以看到自己在学习过程中所遇到的一些错题，通过学习积分了解到自身对知识把握程度；通过一期一档、一人一档更清晰地展示用户自身对知识的情况，更好地查漏补缺；同时也可以向平台反映自己对该小程序的相关建议，为自己创造一个更好地学习平台。我的详细界面如图6所示。
3" 数据库设计
本系统采用SQL Server 2012数据库，存储相关题库信息、用户登录信息、错题信息、收藏信息等数
据。首先通过分析系统功能定义出系统有哪些实体[7]。然后根据实体以及实体之间的关系绘制出E-R图，根据绘制出的E-R图来构建物理模型。数据库E-R如图7所示。
最后根据模型定义数据库，通过后台对数据进行维护和更新。数据库中的表包含题干、题支、正确选项等列。使用者点击答案后，后台通过逻辑判断，和正确答案进行比对，在数据库中生产成一条记录，如果正确，数据库便会存储分数；如果错误，数据库将本题存入错题本中[8]。
数据库包含用户信息表、题库信息表、考试信息表、资料信息表、管理员信息表、课程信息表、分数信息表等[9]，如表1所示。
4" 关键代码
4.1" 轮播图
轮播图为用户提供更直观的信息推荐或导航，带来更加丰富的视觉体验。本平台中首页轮播图的代码截取片段如下：
lt;swiper" class=\"swiper-container\" indicator-dots indicator-color=\"gray\"
indicator-active-color=\"blue\"
autoplay=\"true\" interval=\"2000\" circular=\"true\"gt;
lt;swiper-itemgt;
lt;image src=\"../../images/pic1.png\" style=\"width：
100%;\"gt;
lt;/imagegt;
lt;/swiper-itemgt;
lt;/swipergt;
swiper组件是滑动视图容器，仅能放置swiper-item组件，其中indicator-dots属性控制滚动小圆点的显示，把autoplay设置为true即可控制swiper自动切换滚动，interval属性可以设置自动切换的时间，circular属性为true可以实现衔接滑动。
4.2" window配置及tabBar设置
window用于设置小程序的状态栏、导航栏、标题样式、窗口背景色等，而tbBar用于设置底部导航。在app.json中对window窗口和tabBar底部导航栏进行相应的配置[10]。平台中首页window配置及tabBar设置的代码截取片段如下：
“window”：{
“navigationBarBackgroundColor”：“#4947f0”，
“navigationBarTextStyle”：“white”，
“navigationBarTitleText”：“煤矿安全”，
“backgroundTextStyle”：“light”}，
“tabBar”：{
“color”：“#707070”，
“selectedColor”：“#2d78f”，
“borderStyle”：“black”，
“position”：“bottom”，
“list”：[ {
“pagePath”：“pages/shouye/shouye”，
“iconPath”：“images/shouye.png”，
“selectedIconPath”：“images/shouye_selected.png”，
“text”：“首页”}，]，}
window中navigationBarBackgroundColor和navigationBarTitleText属性分别可以设置导航栏的背景颜色和标题文字内容。navigationBarTextStyle属性可以设置导航栏标题颜色，仅支持black或white。tabBar中的list是一个数组，只能配置最少2个，最多5个tab，tab按照数组的顺序排列。
4.3" scroll-view滚动视图
scroll-view滚动视图可以用于制作水平或垂直滚动的内容效果，滚动视图允许用户浏览比可见区域大的内容。本平台中动态页面的滚动视图的代码截取片段如下：
lt;view id=\"content\"gt;
lt;scroll-view scroll-y=\"true\" bindscrolltolower=\"scrolltolower\"gt;
lt;view wx：for=\"{{list}}\" wx：key=index class=\"item-list\"gt;
lt;view class=\"news-text\"gt;
lt;view class=\"pic-words\"gt;
lt;view class=\"news-title title-words\"gt;{{item.title}}lt;/viewgt;
lt;image class=\"news-image\" src=\"{{item.image}}\"gt;lt;/imagegt;
lt;/viewgt;
lt;view class=\"publish\"gt;lt;view class=\"read\"gt;{{item.read}}lt;/viewgt;
lt;view class=\"create-time\"gt;{{item.release_time}}lt;/viewgt;
lt;/viewgt;
lt;/viewgt;
lt;/viewgt;
lt;/scroll-viewgt;
lt;/viewgt;
scroll-view滚动视图中scroll-y控制视图的纵向滚动。bindscrolltolower是小程序中的一个事件，当页面滚动到底部时触发。scroll-view与bindscrolltolower一起使用可以实现下拉加载更多信息的效果。
4.4" 搜索功能
为了方便用户查阅资料、视频等内容，在首页界面中设置了搜索导航栏，用户可以通过搜索框输入关键词，及时查询到相应的内容，以下为搜索功能模块中的部分代码：
clearHistory（）{
this.setData（{
list：[]
}）
wx.removeStorageSync（search_history）
}，
getSearchOne（e）{
let {index}=e.currentTarget.dataset，{list}=this.data;
let va=list[index]
this.setData（{
search：va
}）
this.data.list.forEach（（item， index）=gt;{
if （item==va）{
this.data.list.splice（index， 1）;}
}）
this.data.list.unshift（va）;
this.setData（{
list：this.data.list.slice（0，15）
}）
console.log（this.data.list）
wx.setStorageSync（search_history， JSON.stringify（this.data.list））
}
以上是搜索功能模块中关于清空历史记录的截取代码，用户在搜索框中输入查询内容并进行查询后即可生成对应的历史记录，点击清空按钮历史记录即可清除。
5" 结" 论
微信小程序的优势日益凸显，跨平台访问使得受众面积更加广泛，快速访问给人们带来了更完美的使用体验，而且无须下载即可进行使用，操作简便。基于小程序搭建的安全培训平台加速了企业学习培训的创新，促使用户更加高效地利用碎片化时间进行学习，满足了个性化学习需求。本文主要介绍了煤矿安全培训平台前台包含的基本功能模块，阐明了基于微信小程序的煤矿安全培训前台的基本框架结构和设计方案，针对关键代码进行深入分析研究。利用微信小程序进行培训平台的开发，为安全培训打开了新思路，创建出以移动式学习为主导、线上线下混合式学习的模式。在此程序中，用户可以通过首页、资料、视频等功能模块进行答题练习、资料学习、在线模拟考试等，起到以练促学、以考促学的作用。同时通过一人一档、错题集等功能提高用户的学习效率；当然，该程序有待补充和更新，各个功能模块有待加强，希望今后继续开发出更强更好更多有关该方面的小程序。
参考文献：
[1] 陈煜朋，秦玉金，任少魁，等.我国煤矿安全标准统计分析 [J].煤矿安全，2021，52（4）：246-249+254.
[2] 崔阳.关于煤矿安全技术管理存在的问题及应对策略 [J].矿业装备，2023（5）：123-125.
[3] 段金红，马新根，贺永强，等.基于全流程可追溯的煤矿安全智慧管控云平台 [J].煤矿安全，2023，54（6）：223-228.
[4] 黄寿孟，刘小飞，韩强，等.基于微信小程序的计算机类课程混合式教学设计与实践 [J].现代信息科技，2023，7（11）：186-189.
[5] 马若鹏.基于微信小程序的实验室考勤管理系统的设计与实现 [D].武汉：华中科技大学，2021.
[6] 李梦雪，宋艳.基于数据库的数据挖掘实验平台设计与实现 [J].科技创新与应用，2023，13（24）：46-50+55.
[7] 林仙土.基于微信小程序的实验室安全教育系统研究 [J].吉林大学学报：信息科学版，2021，39（2）：223-228.
[8] 邹军华，张涵.基于微信小程序的初中语文练习题库设计与实现 [J].中国教育技术装备，2021（18）：29-31.
[9] 郑筱钒.基于三方效能理论的体育教学微信小程序的设计与应用研究 [D].武汉：湖北大学，2021.
[10] 龙政.基于微信小程序的图书推荐前台设计与实现 [J].内蒙古科技与经济，2018（8）：71-73.
作者简介：彭艳（2003—），女，汉族，江苏盐城人，本科在读，研究方向：计算机科学与技术；通讯作者：刘风华（1976—），女，汉族，河南永城人，副教授，硕士，研究方向：信息安全、大数据应用技术；朱伊雯（2002—），女，汉族，江苏南通人，本科在读，研究方向：计算机科学与技术；陶星聿（2002—），女，汉族，江苏常州人，本科在读，研究方向：计算机科学与技术。
