微信小程序：增加水印

通过封装组件的方式实现

html

    {{rows}}" wx:key="index">
      {{cols}}" wx:key="index" style="color:{{color}}">{{name}}
    
  

css

.water {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  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;
  font-size: 24rpx;
}

js

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

最后在相应要增加水印的页面增加组件即可