微信小程序在某个页面防止用户截屏、录屏实现

好吧！好吧！项目~又来搞事情了，想在预览图片的时候监听图片长按菜单的“保存图片”操作，因为在这有个查询用户是否有保存图片的权限，没有的话就不能把图片保存到手机，但是查了半天，发现根本无法监听到长按菜单的对应操作（分享朋友、保存图片等等），干脆把菜单禁用，然后改为不能让用户在这截屏录屏

        wx.previewImage({
          current:urlList[index],
          urls: urlList,
          showmenu: false,
          success: function(res) {},
          fail: function(err) {}
        });

这里使用官方文档提供的api，就存在设备兼容问题：

设备 / 屏幕 / wx.setVisualEffectOnCapture (qq.com)

      if (/android/i.test(wx.getSystemInfoSync().system) && wx.setVisualEffectOnCapture) {
        wx.setVisualEffectOnCapture({
          visualEffect: 'hidden',
          complete: function (res) {}
        })
      }

这里遇到一个问题，就是我明明设置了  visualEffect: ‘hidden’，但是录屏之后查看内容还是能正常显示，这我就懵了~~~

还好在下面这篇文章找到了解决办法：在页面的xxx.json文件里配置visualEffectInBackground：hidden就可以了

记录一下小程序某个页面禁止用户截图、录屏的实现方法 – 掘金 (juejin.cn)

记得在隐藏和销毁页面的时候把防录屏的设置解除掉：

//android隐藏或销毁当前页面时释放相关设置
      if (wx.setVisualEffectOnCapture) {
        wx.setVisualEffectOnCapture({
          visualEffect: 'none',
          complete: function (res) {}
        })
      }

 IOS设备的查了资料，截屏暂时是没有解决方案的，但是录屏官方给出的方案是：

设备 / 屏幕 / wx.getScreenRecordingState (qq.com) 

设备 / 屏幕 / wx.getScreenRecordingState (qq.com)

具体实现就是查询用户是否在录屏，监听录屏动作，我这里是对页面做了遮挡操作

    //查询用户是否在录屏
    if (/ios/i.test(wx.getSystemInfoSync().system)&&wx.getScreenRecordingState) {
      wx.getScreenRecordingState({
        success: res => {
          if (res.state != 'off') {
            that.setData({
              isShow: false//页面遮挡
            })
          } else {
            that.setData({
              isShow: true
            })
          }
        }
      })
    }
    // 监听用户录屏事件
    if (/ios/i.test(wx.getSystemInfoSync().system)&&wx.onScreenRecordingStateChanged) {
      wx.onScreenRecordingStateChanged(res => {
        if (res.state == 'start') {
          that.setData({
            isShow: false//页面遮挡
          })
        
        } else {
          that.setData({
            isShow: true
          })
        }
      })
    }

同样的要在隐藏和销毁页面的时候把防录屏的设置解除掉：

      if (wx.offScreenRecordingStateChanged) {
        wx.offScreenRecordingStateChanged()
      }

基本就这些了，完结~~~撒花~~~~