基于微信小程序的煤礦安全培訓平臺前端設計與實現

摘" 要：為順應移動互聯網的發展，充分發揮移動互聯網技術和數字化技術在煤礦安全培訓教育工作中的作用，以微信小程序為媒介，搭建移動學習平臺。首先介紹了煤礦安全培訓平臺的設計原則和總體框架，其次介紹了平臺界面、功能及數據庫的設計，最后使用微信開發者工具完成了前端功能的搭建。用戶可以在此平臺上進行答題練習、資料學習、在線模擬考試等，此平臺可以滿足不同用戶的個性化學習需求。

關鍵詞：微信小程序；煤礦安全培訓；前臺功能設計；個性化

中圖分類號：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—），女，漢族，江蘇常州人，本科在讀，研究方向：計算機科學與技術。