前言：

在当今数字化转型的浪潮中，微信小程序在线考试因其便捷性和高效性受到了广泛的关注和应用。然而，为了保证考试的公正性和严肃性，对考生的行为进行有效的监控至关重要。其中，考生的切屏行为就是一个需要重点关注的方面。

在本文中，主要介绍如何在微信小程序在线考试中实现对切屏次数的监听，通过弹窗提醒考生规范考试行为，并在达到预设的切屏限制上限后自动交卷的功能。

一、背景

最近做的微信小程序项目中，有在线考试的需求，该需求的目的是考察员工是否掌握了所学课程的内容。
当考生在考试过程中频繁切屏时，通过弹窗提醒其遵守考试规则，若达到预设的切屏限制上限，则自动交卷，以确保考试的正常秩序和质量。

该答题页面要求：

1. 不支持切屏，用户切屏留在当前界面，提示用户：“切屏超过三次将会强制交卷！”。
2. 切屏超过三次强制提交试卷，显示考试结果。

二、实现的效果

下面按照步骤进行展示：

三、实现思路

• 首先要明确微信小程序的生命周期：

这里要用到生命周期函数onShow-- 监听页面显示，监听小程序启动或切前台。

onShow是每次页面显示都会触发，那分别有哪几种情况呢？

1. 刚进入页面时会触发一次当前页面的onShow；
2. 当用户从小程序的A页面进入B页面，再返回A页面时，会触发A页面的onShow；
3. 点击右上角的小圆圈胶囊，退出小程序，然后再次打开时会触发；
4. 直接切换其他app，再切回来时会触发；
5. 回到手机home页，再打开小程序时会触发；

• 然后考虑切屏有哪几种情况：

大概上面触发onShow的几种情况都包括切屏所需要考虑的了。

四、实现方案

1. 首先需要存储一个全局数据enterExamPageNum，用来记录切屏次数；

		

			
			

				
				

					
				
js
			

			

				
				

					复制代码
				

			

		
globalData: {  enterExamPageNum: 0, // 记录切屏次数 } 

这里我将该数据存储在app.js文件中的全局对象globalData中，这个对象用于存储全局共享的数据。初始值设置为0。

注：此处可以根据自己项目情况，存储的方式可以用本地存储（wx.setStorageSync）或者其他方式。

1. 在答题页面的onShow生命周期中获取和记录切屏次数，并提示用户已记录的次数；当在切屏第四次时，提示用户 “切屏已3次，将强制交卷”，然后直接交卷：

附上代码：

		

			
			

				
				

					
				
js
			

			

				
				

					复制代码
				

			

		
 onShow: function () {  const that = this;  let enterExamPageNum = app.globalData.enterExamPageNum;  app.globalData.enterExamPageNum = enterExamPageNum + 1;  if (app.globalData.enterExamPageNum < 2) {  return  }  wx.showModal({  title: '提示',  content: `答题中切勿切屏，已记录${enterExamPageNum}次！`,  showCancel: false,  })  if (enterExamPageNum === 4) {  wx.showModal({  title: '提示',  content: `切屏已3次，将强制交卷`,  showCancel: false,  success: function (res) {  if (res.confirm) {  that.getExamAdd(); // 交卷  }  }  })  }  }, 

五、总结

本文介绍了微信小程序在线考试中切屏监控、弹窗提醒以及达到切屏限制上限后自动交卷功能的实现。想为开发类似的在线考试功能的朋友提供一些参考。

以上，希望对大家有帮助！