小程序页面加水印,防止用户截图分享隐私数据
发布于 2 年前 作者 rduan 1822 次浏览 来自 分享
为了防止用户将小程序内的隐私数据进行截图或者录屏分享导致信息泄露,我们会在小程序全局添加一个水印浮层。这样即使被截图或者拍照,也能轻松地确定泄露的源头。

小程序防止用户截屏的方法有很多,其中一种常见的方法就是在小程序的页面中添加水印。具体实现方法如下:

  1. 在小程序中的页面中添加水印浮层,一般通过绝对定位来实现,这样可以使水印在页面的最上层,无法被其他元素覆盖。
  2. 设计水印的样式和位置,通常可以在小程序的样式文件中设置,例如设置水印的位置为右下角,样式为半透明的字体,以免影响正常的内容展示。
  3. 对于不同类型的页面,可以根据需要添加不同的水印,例如在敏感信息页面添加比较醒目的水印,而在其他普通页面只添加轻微的水印。
  4. 如果需要防止用户截屏或者拍照,可以在小程序中添加截屏监听事件,并在用户进行截屏或者拍照操作时,自动添加水印。

总的来说,小程序防止用户截屏的方法还有很多,例如使用安全键盘等,但是添加水印仍然是最为常见的一种方法。通过添加水印,可以有效地防止用户截屏和分享敏感信息,保护用户和单位的信息安全。

下面是一个简单的示例,position选择固定定位fixed,固定定位会固定在浏览器窗口某个位置,不会随滚动条滚动。用z-index将元素的层级设置为最低,将view旋转45度,效果就出来啦

<view style="position: fixed;top: -10vh; left:-100vw;width: 250vw; height: 100vh; z-index: -999;transform: rotate(-45deg);">
  <block wx:for="{{30}}" wx:key="index" wx:if="{{userInfo}}">
    <view style="color:gray; margin:30rpx; padding:20rpx; opacity: 0.15;">
    {{userInfo.user_name + '  ' + userInfo.user_phone}}      {{userInfo.user_name + '  ' + userInfo.user_phone}}     {{userInfo.user_name + '  ' + userInfo.user_phone}}    {{userInfo.user_name + '  ' + userInfo.user_phone}}
    </view>
  </block>
</view>
2 回复

我也是css实现的,就是不知道会不会有问题

牛人啊____

回到顶部