微信小程序防止截屏录屏

一、使用css添加水印

使用微信小程序原生的view和css给屏幕添加水印这样可以防止用户将小程序内的隐私数据进行截图或者录屏分享导致信息泄露,给小程序添加一个水印浮层。这样即使被截图或者拍照,也能轻松地确定泄露的源头。效果图如下:

代码片段 https://developers.weixin.qq.com/s/V9dcdgmc7mOy

wxml文件:

注意回车符"\n"只能被text标签识别view标签无法识别

XML 复制代码
  <navigation-bar title="Weixin" back="{{false}}" color="black" background="#ccc"></navigation-bar>
<view class="water_top" style="pointer-events: none;">
    <text class="water-text" wx:for="{{50}}">{{"小程序水印\n12345678910"}}</text>
</view>

css文件:

css 复制代码
.water_top{
  position: fixed;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  /* background: #999; */
  transform:rotate(-10deg);
  /* opacity: 0.9; */
  z-index: -999;
}
.water-text{
  float: left;
  width:375rpx;
  color: rgba(169,169,169,.2);
  text-align: center;
  font-size: 40rpx;
  margin: 100rpx 0;
}
.watermark {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: #eeeeee11;
  pointer-events: none;
  background-repeat: repeat;
  background-size: 50% auto;
}
.canvas {
  width: 200px;
  height: 200px;
  position: fixed;
  left: -200%;
}

二、使用微信小程序的api阻止用户截屏

使用wx.setVisualEffectOnCapture手机截屏或者录屏时,禁止调用,并提示无法截屏。

参数

属性 类型 默认值 必填 说明
visualEffect string none 截屏/录屏时的表现,仅支持 none / hidden,传入 hidden 则表示在截屏/录屏时隐藏屏幕
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行

注意:iOS 要求基础库版本为 3.3.0 以上,且系统版本为 iOS 16 以上

javascript 复制代码
  onLoad() {
    wx.setVisualEffectOnCapture({
      visualEffect: 'hidden',
      success:(res) => {
        console.log(res)
      },
      fail:(err) => {
        console.log(err)
      },
      complete:(res) => {
        console.log(res)
      }
    })
    wx.onUserCaptureScreen(function (res) {
      console.log('用户截屏了')
    })
  },
})

微信开发者文档wx.setVisualEffectOnCapture

相关推荐
WKK_1 小时前
uniapp自定义封装tabbar
前端·javascript·小程序·uni-app
老李不敲代码1 天前
榕壹云预约咨询系统:基于ThinkPHP+MySQL+UniApp打造的灵活预约小程序解决方案
mysql·微信小程序·小程序·uni-app·php
fakaifa1 天前
【最新版】西陆健身系统源码全开源+uniapp前端
前端·小程序·uni-app·开源·php·约课小程序·健身小程序
二J1 天前
管理100个小程序-很难吗
android·小程序
qq_357389631 天前
陪诊陪检系统源码,陪诊小程序,陪诊APP,陪诊服务,家政上门系统,居家护理陪护源码,医护小程序
小程序
橘猫云计算机设计2 天前
springboot-基于Web企业短信息发送系统(源码+lw+部署文档+讲解),源码可白嫖!
java·前端·数据库·spring boot·后端·小程序·毕业设计
跨时代科技2 天前
洗车小程序系统前端uniapp 后台thinkphp
小程序
依辰2 天前
小程序SAAS产品定制化需求解决方案
前端·javascript·微信小程序
fakaifa2 天前
【最新版】沃德代驾源码全开源+前端uniapp
前端·小程序·uni-app·开源·php·沃德代驾·代驾小程序
18538162800余。2 天前
NFC 碰一碰实现视频源码,网页与小程序协同
小程序