记录一下小程序某个页面禁止用户截图、录屏的实现方法

这周领导突然说为了不泄密及版权等问题，要求在小程序的某个页面里禁止用户进行录屏截图。 之前还没做过这种功能，听到这句话，内心第一句话就是哥哥做不到啊！

开完会后，赶紧打开微信小程序的文档查看了起来，好在文档有专门的api

这边就来介绍一下吧。

小程序禁止录屏的api是区分ios和安卓的

先来介绍一下ios的实现方法

`

# wx.getScreenRecordingState(Object object)   ios查询用户是否在录屏   其实还有两个相关的api有兴趣大家可以去看看
大概就是在onshow的生命周期调用一个方法，方法内是搞个定时器不断了检测是否有在录屏，如果有在录屏的话则弹窗提醒并强制用户跳转到非录屏页面
this.timer = setInterval(() => {
    wx.getScreenRecordingState({
        success: function(res) {
            if (res.state == "on") {								         uni.showModal({
                    content: "此页面不允许录屏!",
                    showCancel: false,		
                    success: function(res) {
			if (res.confirm) {
                            uni.switchTab({
				    url: "/pages/index/index"
                            })	
                        }
                    }
		})
	    }
        }
     })
}, 2000)

这里还要记得在onhide和onUnload的生命周期里清除一下这个定时器

` 然后就是安卓的实现方式

//禁止安卓机截屏
#wx.setVisualEffectOnCapture(Object object) 设置截屏/录屏时屏幕表现，仅支持在 Android 端调用
if(wx.setVisualEffectOnCapture){
    wx.setVisualEffectOnCapture({
        visualEffect: 'hidden',
        success:(res) => {
            console.log('success回调',res)
        },
    })
}
 当然这个记得也要在onhide和onUnload的生命周期里恢复可以截屏，不然其他的页面可能无法截屏
if(wx.setVisualEffectOnCapture){
    wx.setVisualEffectOnCapture({
        visualEffect: 'none',
        success:(res) => {
            console.log('success回调',res)
        },
    })
}

当时做到这里以为就可以禁止录屏了，但是测试的时候才发现这个只是禁止截屏而已，录屏功能还是可以正常使用。好家伙，我又去看了一遍文档没问题啊，后来又查了一下看看是怎么回事。结果发现查到的都是这样实现的，没有说其他方式。这里我不得不怀疑那些人是真的有实践使用过他们写的东西吗？

后面我又去看了一下别人安卓禁止录屏的方式，发现是安卓是可以录屏的，但他们录到的都是黑屏加声音这样。

不服气的我（被逼无奈）又去翻看了一下小程序的文档，偶然发现一个页面配置visualEffectInBackground，我们可以在pages.json这个文件里在需要禁止录屏的页面那里配置visualEffectInBackground：hidden。这样就可以实现在这个页面录屏只能录到黑屏了。