微信小程序实现页面添加水印 waterMark

在你的项目目录中添加组件components目录（定义成组件方便项目调用）

组件

wxml：

<!--components/waterMark.wxml-->
<view class='water-mark'>
  <view class='row' wx:for="{{rows}}" wx:key="index">
    <view class='col' wx:for="{{cols}}" wx:key="index" style="color:{{color}};font-size:26rpx;">{{text}}</view>
  </view>
</view>

wxss：

/* components/waterMark.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;
}

json：

{
  "component": true
}

js：

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

组件调用

json：

{
  "navigationBarTitleText": "基本信息",
  "usingComponents": {
    "water-mark": "../../components/waterMark"
  }
}

wxml：

<!-- 水印组件 -->
<water-mark></water-mark>