微信小程序-增加水印（自定义内容）

Number1 微信小程序增加水印

最近在整微信小程序，这里增加写自己最近用到的东西（仅为记录）
主要原则是增加一个水印的组件,新建components文件夹，在文件夹下面新建watermark组件
1、watermark.js源码

Component({
    /**   
  * 组件的属性列表   
  */
    properties: {    
      myValue: String  
     },
    data: {
      text: '内容自定义',
      // color: 'rgba(0,0,0,0.03)',
      color: 'rgba(0,0,0,0.5)',
      rows: [],
      cols: []
    },
    // 组件在页面上挂载时触发,注意如果页面没卸载过，该事件就不会触发第二次
    attached() {
      const { windowWidth, windowHeight } = wx.getSystemInfoSync();
      const rows = Math.ceil(windowWidth / (30 * this.data.text.length));
      const cols = Math.ceil(windowHeight / 100);
      this.setData({
        rows: new Array(rows),
        cols: new Array(cols)
      });
    },
  })

2、watermark.json

{
  "component": true,
  "usingComponents": {}
}

3、watermark.wxml

    
      {{myValue}}
    
  

4、watermark.wxss

.water-mark-mask {
    position: fixed;
    top: 13%;
    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;
  }
  

5、组件引用
可以放在具体引用的json或者app.json中做全局变量
我这里是放在app.json中做全局变量

"usingComponents": {
        "watermark": "/components/watermark/watermark"
    }

6、具体页面whtml引用

{{watermark}}为自定义内容可以后台获取，或者写固定值，一般都是登录者信息