微信小程序实现页面加水印的功能

在页面上加上唯一标识，实现页面上添加属于自己的水印,可以使用自定义组件的方式实现。

1.自定义组件
wxml:

  
    
      {{text}}
    
  

wxss:

.water-mark-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  pointer-events: none; 
  flex:1;
}
 
.row{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.col{
  transform: rotate(-45deg);
  height: 200rpx;
}

js:

Component({
  data: {
    text: '请勿外传',
    color: 'rgba(0,0,0,0.1)',
    rows: [],
    cols: []
  },
  // 组件在页面上挂载时触发,注意如果页面没卸载过，该事件就不会触发第二次
  attached() {
    const { windowWidth, windowHeight } = wx.getSystemInfoSync();
    const rows = Math.ceil(windowWidth / (40 * this.data.text.length));
    const cols = Math.ceil(windowHeight / 120);
    const waterMark=wx.getStorageSync('waterMark')
    this.setData({
      rows: new Array(rows),
      cols: new Array(cols)
    });
  },
})

在需要的页面引入该组件即可。
效果图如下：

图片.png

喜欢这篇文章的话，关注下我吧。

006fCpcXly1g40vlz9cz6j30j60nyads.jpg