微信小程序页面添加水印

背景

小程序需要做一个内部工具，但敏感信息为了防止工作人员随意截屏转发，需要在页面添加水印标识员工工号

实现

wxml:

<view class="watermark">
  <block wx:for="{{30}}">
    <view class="watermark-row">
      <span class="watermark-col" wx:for="{{5}}">{{userId}}</span>
    </view>
  </block>
</view>

css:

.watermark {
  position: fixed;
  width: 200vw;
  height: 150vh;
  top: -20vw; 
  left: -50vw; 
  color: gray;
  font-size: 14px;
  opacity: 0.1;
  z-index: 1000000; // 放在顶层
  pointer-events: none; // 点击穿透，不影响页面交互
  transform: rotate(-20deg); // 水印倾斜角度
}

.watermark-col {
  display: inline-block;
  padding: 50rpx 40rpx;
}

.watermark-row {
  white-space: nowrap;
}

.watermark-row:nth-child(2n+1) {
  transform: translateX(10%); // 奇偶数行水印错开
}

效果