微信小程序防止截屏录屏

这篇具有很好参考价值的文章主要介绍了微信小程序防止截屏录屏。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、使用css添加水印

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

微信小程序防止截屏录屏,微信小程序,小程序

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

wxml文件:

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

  <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文件:

.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 以上

  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文章来源地址https://www.toymoban.com/news/detail-798443.html

到了这里,关于微信小程序防止截屏录屏的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序防录频截屏ios+android

    安卓录频截屏代码 可以写在onshow中 但是要注意的是,一定不能只开启监听,也要卸载监听 ios防录频 这里当然也要卸载

    2024年02月12日
    浏览(36)
  • 微信小程序防止重复提交

    微信小程序在真机测试时,遇到这样一种情况:当网络条件差或卡顿的情况下,进行某项操作时,使用者会认为点击无效而进行多次点击,致使多次跳转页面或多次上传同一表单,导致函数或接口被多次调用,实际上使用者只想调用函数和接口一次。 添加节流阀,即按下按钮

    2024年02月13日
    浏览(47)
  • 【微信小程序系列:二】小程序常用功能:跳转地图、扫一扫、人脸识别、拍照、拨打电话、调整屏幕亮度、文字可复制、监听截屏...

    (~ ̄▽ ̄)~,hello,微信小程序系列第二篇,介绍下小程序里的 前端常用功能api ,可以快速copy使用~ 小程序页面里的文字默认是没有长按复制功能的,需要套个标签来实现:跳转官方文档 点击按钮,直接复制文本,直接调用微信方法: 有时显示一些地址需要在地图显示,

    2023年04月09日
    浏览(74)
  • Android禁止截屏和录屏

    只需要简单的一行代码:放在activity中的setContentView之前。

    2024年02月07日
    浏览(48)
  • adb详细教程(五)-复制文件、截屏、录屏

    adb对于安卓移动端来说,是个非常重要的调试工具。 在进行安卓端的开发或测试过程中,有时需要了截屏或录屏,在设备上操作完成后再将文件导入电脑非常繁琐。 ​如果使用adb指令在进行截屏或录屏则会便捷许多。 此篇文章介绍了如何使用adb指令进行文件传输、截屏、录

    2024年01月25日
    浏览(41)
  • 安卓系统下的截屏和录屏

    可以抓取手机屏幕画面(屏幕截图),也可以录制屏幕画面视频。拍摄屏幕后,可以查看、编辑和分享所拍的图片或视频。 打开要抓取的屏幕。 视手机情况执行下列一个操作,3种方法看你手机有效的: 同时按 电源 和 音量调低 按钮。 按住 电源 按钮几秒钟。然后点按 屏幕

    2024年02月02日
    浏览(42)
  • Android 9.0 系统禁用截屏和录屏功能

     在9.0的系统rom产品开发中,在对于一些产品开发需求中,对系统截屏和录屏功能 要求去掉这些功能,不让用户截屏和录屏 保护 一个app的资源,所以就需要在系统中做限制不让截屏录屏,接下来具体实现相关功能 ActivityThread 是一个非常重要的组件,它的作用就像是 Android 应用

    2024年01月24日
    浏览(54)
  • Android 10.0 系统禁用截屏和录屏功能

     在10.0的产品开发中,在对于一些产品开发需求中,对系统截屏和录屏功能 要求去掉这些功能,不让用户截屏和录屏 保护 一个app的资源,所以就需要在系统中做限制不让截屏录屏  在系统中可以在app中禁用录屏和截屏功能,同时也可以通过在系统源码中禁止截屏和录屏的功

    2024年02月10日
    浏览(47)
  • 防止Android截屏

    一、背景介绍 对于涉及用户个人隐私的应用,比如银行、支付、社交等应用,其界面中可能会涉及到用户的个人信息,比如手机号、身份证号码、交易记录等。如果这些信息被人截屏,就可能会造成用户个人隐私的泄露。 另外一方面,一些企业和开发者可能会开发一些自己

    2024年02月08日
    浏览(36)
  • Android App保护用户隐私————禁止应用截屏或录屏

           相信大家在使用某些平台应用的时候,都会有 限制的规定 。        通常情况下,录屏、截图软件都可以在手机的运行过程中进行录屏、截图,普通的平台也不会阻止录屏、截图软件运行。        但是在某些比较 敏感 的平台上面,有可能出于 保密 的原因

    2024年02月02日
    浏览(75)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包