基于微信小程序的数字化安全检查平台的设计与实现

马立刚

中国石油化工股份有限公司中原油田分公司物探研究院，河南濮阳，457001

0 引言

安全检查工作对石油企业的发展具有重要的意义，而做好日常安全检查工作是安全检查工作的关键环节。在国家、集团公司、油田单位大力推行数字化转型的背景下，充分利用数字技术实现安全检查业务在线化是安全监管工作转型的必由之路，安全检查的数字化也是推动安全工作实行高质量发展的关键环节[1-2]。在贴合数字化转型大背景下，同时立足本院安全检查工作，本文提出了数字化安全检查平台建设项目。通过安全检查业务数字化赋能切实地提高安全检查工作效率与运行实效，进而解决以信息化视角审视传统检查方式中存在的不足之处，如检查标准不一、对规范的掌握因人而异；手工记录效率较低、检查实效不便评估；检查的信息依赖人工传送，效率不高；问题整改线下运行不便监督落实等问题[3]。

1 项目相关技术及开发工具介绍

1.1 Node.js

本项目后端服务器程序由Node.js编写。关于Node.js，简单来说就是运行在服务端的JavaScript，是一个开源、跨平台的JavaScript运行时环境。它基于Chrome V8引擎，同时使用事件驱动、非阻塞I/O的模式，这就使得Node.js编写的服务端程序轻量又高效。

1.2 NPM

NPM即Node Package Manager，是一个Node.js默认包管理和分发工具，可以对从NPM服务器上下载的框架进行管理，包括安装、卸载，添加依赖等。如本项目中使用到的web开发框架express，以及连接MySQL数据的框架等都是通过NPM进行下载的，对于开发者来说，极大地提高了开发效率。

1.3 MobX

MobX是一个状态管理库，它通过透明的函数响应式编程使得状态管理变得简单和可扩展。在项目开发中，通常涉及多个组件与页面共享相同数据的情况，如果按照常规方式一层一层地传递数据，则很容易引起数据管理的混乱，而MobX很好地解决了这个问题。在小程序中，需要配合使用MobX绑定辅助库来使用，分别是mobx-miniprogram模块与mobx-miniprogrambindings模块。前者为项目创建store对象，即要共享的数据或方法，后者将store中的共享数据或方法与相应的页面或组件进行绑定。

1.4 微信小程序

本平台基于微信小程序运行环境，微信小程序是由微信官方开发的基于微信平台的应用，由于微信小程序的运行环境是微信内置浏览器，所以不需要下载安装即可使用。同时由于它无需安装，占用非常小的内存，所以，在便捷性与传播性上具有非常好的表现[4]。用户通过扫描二维码或者搜索框查找即可找到对象的小程序，或者通过其他微信用户分享的链接打开，真正带来了“轻、快、好”的用户体验[5-6]。

1.5 微信开发者工具

在进行微信小程序开发时，需要使用集成开发环境，而微信开发者工具就是为开发微信小程序量身打造的集代码编辑、编译、运行、调试、模拟为一体的开发工具。内置Chrome DevTools和基本的移动调试模块，可以帮助开发者更方便、安全地开发和调试程序。工具的下载来源由微信官方文档提供。创建项目之前需要在微信开放平台申请AppID，后续诸多操作如request合法域名信息配置等都需要在开放平台上进行[7]。

2 需求分析与架构设计

2.1 需求分析

从功能性需求来讲，需要明确本应用的具体功能，这是项目开展的前提。首先由于该项目的提出是为了解决传统安全检查中存在的一些不足，所以对于该平台的定位是为本院安全检查进行数字化赋能，通过信息化改造，搭建一个集安全检查、整改和反馈于一体的数字化安全检查平台。在确定了本系统需要完成的功能后，要设计具体的功能模块以及数据在内部流转的流程。展开来说，安全检查流程为，首先检查人员手持移动设备现场巡检，对于发现的问题进行问题录入，包括文字描述与图片取证两种方式，获取到的数据上传服务器，后台自动录入数据库保存。同时，在服务器内部会将检查数据转入整改部分，整改部分会展示检查信息，整改人员对照问题进行整改。最后将检查结果与整改情况进行整合，供相关负责人线上实时查看，以及时了解本院整体安全情况。相关负责人除了可以查看检查内容与整改情况的详细信息外，还可以对相关检查及整改的处理结果通过留言的方式进行意见反馈。在使用之前，为了判断检查人员是否为单位内员工，需要进行身份验证操作，即输入员工账号与密码，通过数据库进行查询，比对成功后，则可以进入应用。为了简洁有效地描述用户与系统交互的关系，这里采用用例图进行展示，具体用例图如图1所示。

图1 系统用例图

在实现功能的前提下，系统软件的非功能性需求也是必须考虑在内的。虽然这与特定系统的行为没有直接关系，但与用户体验与软件质量息息相关。为了使系统简单易用，且运行稳定，本次开发从以下几方面入手。首先是易于使用，通过参考多个优秀产品，并结合小程序本身的特点，对UI界面进行特定化设计，使得操作简单易懂，无需额外培训即可上手。其次，对于可靠性的保证，通过严格按照代码规范进行编写、模拟器与真机的功能测试，并结合微信开发者工具中性能分析工具进行异常检测等手段，及时解决过程中遇到的问题，使系统稳定运行。最后，对于可维护性方面，本项目在重要代码上进行了详细的注释并设置相关开发文档，提升代码可读性的同时，也便于后期阅读维护。另外，为降低冗余性，做到高内聚低耦合，将工具性代码封装到小程序组件中，使得代码的使用简洁高效。

2.2 架构设计与实现

基于对该应用需求进行分析后，对客户端的总体功能模块可分为：登录模块、检查模块、整改模块、留言模块与缓存模块，具体架构如图2所示。

图2 系统架构图

良好的架构设计对于系统开发的效率与质量有非常重要的影响作用，同时也便于后期维护与扩展。基于以上对项目模块的划分，对系统目录结构进行相应整理，具体如图3所示。

图3 系统目录结构图

其中，components文件夹主要放置封装的组件，miniprogram_npm文件夹通过npm重构状态管理库MobX的辅助模块mobx-miniprogram与mobx-miniprogram-bindings模块。Pages文件夹包含按照模块划分的各个相关页面，每个页面都包含js文件、json文件、wxml文件与wxss文件[8]。Src文件是项目的资源文件。Store文件夹则存放数据共享实例store，包含需要共享的数据与方法。同时app.js、app.json与app.wxss为全局配置文件，其中在app.json文件的pages节点配置页面相关内容，window节点配置背景色、导航栏等相关内容，tabbar节点设置tab页面相关信息，以及using Components节点配置全局组件等。

3 系统功能的具体实现

整体来说，项目涉及多个功能模块，为了便于快速切换，这里采用移动应用中使用比较多的tabbar组件。Tabbar组件通过点击操作可以很方便地实现页面切换。关于tabbar组件的设置是在app.json文件中进行，包括背景色、选中及未选中时的图片路径以及文字颜色等。需要注意的是，被设置为tabbar的页面需要在pages节点中置于其他非tabbar页面的前面，另外tabbar的个数也有相应的限制，在2到5个之间。关于各个组件的详细使用说明，可通过微信小程序开发文档获取。

3.1 登录模块

在小程序启动后，会静默调用wx.login方法获取code，这个方法是用户无感知触发，同时，会涉及微信接口服务。开发者服务器获取code后，将其作为参数调用微信官方提供的接口对code进行验证，验证成功后获取一个session_key与openId，通过后台处理，生成一个自定义key值与session_key、openId进行关联，返回客户端，客户端在之后的每次请求都携带key值，后端服务器通过key值进行验证，但为确保员工登录，在首次登录时会要求员工提供账号与密码，用户身份获得验证后，此后无需再次提供。

3.2 检查模块

检查模块要实现检查人员信息录入与检查项目评估等功能，通过input控件设置输入框用于检查人员信息采集。同时，通过Date()方法获取当天检查日期。对于检查项目，由于涉及多条内容，相比逐项编写，更优的方法是使用wx:for语法。具体地，在data节点中添加数据列表，其中以js对象的形式存放数据。每个对象的内容包括采集信息的具体内容、是否存在问题标志、存在的问题内容以及图片等信息。最后通过在自定义的组件optionView上使用wx:for，会自动遍历列表，将组件添加到页面上。这样不仅方便，数据的获取与请求也将更容易。其中，自定义的组件optionView提取了项目条例的共性功能，即条例描述、是否存在问题选择器、textarea问题描述输入框、图片选择组件和整改按钮等。

3.3 整改模块

整改模块涉及检查日期与检查科室的选择问题，这里使用picker控件进行展示，默认情况下会获取登录人员所在科室的最近一次检查的内容。也可点击进行重新选择，会以底部出现滚动式选择器的方式呈现可选内容，在bindchange属性中监测内容的改变，从而重新从服务器获取新的数据。关于检查内容的展示，同样使用检查模块中使用到的optionView组件，不同的是，除了相关内容是不可编辑的外，会将整改按钮显示出来，通过内嵌navigator控件实现整改页面的跳转。整改页面包含整改人员信息、整改日期及整改内容等。成功提交整改内容后，整改首页的整改按钮会切换状态到查看整改详情。

3.4 留言模块

在整改页面中，针对不同科室检查及整改情况，单位负责人都可以留言进行评价或给出指导性意见。具体地，在选择检查日期与科室后，同时更新留言内容。留言内容以列表的形式展示，同样使用wx:for语法进行渲染，主要内容包括留言内容、留言人姓名与时间等。在留言列表上方添加留言按钮，点击跳转到留言输入页面。留言输入页面用来采集留言人信息与留言内容等。保存后会自动回退到前一页，同时刷新留言列表展示最新留言信息。同时，由于涉及多条留言信息加载与刷新操作，这里使用在移动端常用的下拉刷新与上拉加载操作。

下拉刷新是指手指触摸屏幕下拉滑动操作，从而重新加载页面刷新数据的行为。在小程序中默认情况下是不启用下拉刷新功能的，为了启动下拉刷新需要进行相应的设置。这里包含两种设置，一个是开启全局下拉刷新操作，即通过在app.json文件中的window节点设置enablePullDownRefresh的值为true，就可以为小程序中所有页面开启下拉刷新操作。但通常情况下，并非所有页面都会涉及此操作，所以并不推荐这样使用。另一种方式就是局部开启下拉刷新操作，即在使用到的页面的json配置文件中，将enablePullDownRefresh的值设置为true就可为此页面单独开启下拉刷新操作。另外在json文件中，还可以添加backgroundColor与backgroundTextStyle节点来设置下拉刷新窗口的背景颜色以及下拉刷新loading样式。关于下拉刷新具体的执行操作，在页面js文件中，通过onPullDownRefresh()函数来监听当前页的下拉刷新事件，执行相关刷新代码。值得注意的是，在真机上预览下拉刷新效果，会发现下拉后loading效果会一直显示不会自动消失。这里就需要手动隐藏loading效果。具体地，在onPullDownRefresh()函数中执行完相关刷新操作后，可通过调用wx.stopPullDownRefresh()函数使当前页的下拉刷新停止加载。

上拉加载是指通过手指在屏幕上向上滑动，从而加载更多数据的行为。在实际开发中，上拉处理更多是为了实现数据分页加载，即每次加载一部分数据，直到数据全部加载完。监听下拉加载更多事件，同样是通过在当前页面的js文件中的onReachBottom()函数来实现的。在上拉加载更多中涉及一个上拉触底距离的概念，指的是触发上拉加载更多操作时，滚动条距离页面底部的距离。当达到这个距离时，才会触发加载事件。默认为50px，可通过json文件中的onReachBottomDistance节点进行设置。具体数值可根据项目需求进行相应设置，在本项目中使用的是小程序的默认值。在每次进行数据加载的同时，会使用toast组件进行加载提示，加载完成后会将请求来的新数据添加进data数据中。当数据全部加载完后，再次上拉会给出相应提示。另外需要注意的是，当在加载数据过程中，反复上下滑动会多次触发onReachBottom()事件，这是需要避免的情况，为此这里进行节流限制以防止多次被触发。

3.5 缓存模块

关于小程序中的缓存操作，主要使用wx.set Storage与wx.getStorage方法，会将临时认证信息以及所填写内容进行缓存。缓存模块主要对检查整改内容进行缓存，由于涉及多条检查项目，这里将缓存方法进行扩展与封装，同时为缓存字段添加watch监听属性。在每次数据发生改动时，都将对改动后的内容进行缓存。

4 测试

本应用的测试主要分为本地测试与真机测试，在微信开发者工具中提供了本地测试的三个功能区，分别为模拟器、调试工具与小程序操作区。通过模拟器可以实时查看界面排版与功能实现情况。调试工具具有六大功能模块，包括Wxml、Console、Sources、Network、Appdata、Storage，可分别对页面、脚本文件、网络请求、数据存储情况及代码调试进行分析。而小程序操作区可以帮助开发者模拟一些客户端环境，如唤起聊天窗口、触发后台api等。真机调试允许通过扫码将小程序安装到自己的手机上进行测试。经过本地测试与真机测试，本应用满足应用需求，可实现安全检查业务。

5 结语

本应用实现了基于微信小程序的数字化安全检查平台的搭建。在全面进行数字化转型的趋势下，选择微信小程序为平台载体，针对传统安全检查方式的缺点，通过合理设计UI界面、交互方式，充分发挥数字化的优势等来解决对应的问题。通过全链条在线化实现安全检查及问题整改的规范化、数字化，在保证功能完备的同时，也充分考虑到了应用的稳定性、实用性等非功能性需求，从而切实提升安全检查效率，消除安全隐患。