【微信小程序】实现微信小程序的水印

公司项目有一个需求，要在主要页面中添加一个水印，就像 用户名：注册手机号  这样的，用来追溯截图

这个内容可以修改data里面的 wm_text ~

新建一个组件，名字就叫water-mark

wxml

<view class="water_top" style="pointer-events: none;">
    <view class="water-text" wx:for="{{pageSetting.wm_num_array}}" wx:if="{{isShow}}">{{pageData.wm_text}}</view>
    
</view>

wxss

/*对于最外层大块的样式*/
.water_top{
  position: fixed;
  top:0;
  bottom: 0;
  left: -50vw;
  right: 0;
  /** 旋转角度 **/
  transform:rotate(-13deg); 
  z-index: 99999999;
  /*由于是设置了倾斜，所以，宽度给大点*/
  width: 200vw;
}

/*内部颜色的样式*/
.water-text{
  /*左侧浮动，就是一行一行的那种~*/
  float: left;
   /*设定每组文字的宽度~*/
  width:350rpx;
  /*水印字体的颜色，RGBA形式，最大是1*/
  color: rgba(182, 182, 182, 0.5);
  text-align: center;
  font-size:30rpx;
  /*上下的密度*/
  margin: 80rpx 0;
}

js（水印文字个数，只能透过生成数组来做了，实在想不到好办法了T^T）

// components/water-mark/index.js
Component({

  /**
   * 组件的属性列表
   */
  properties: {
    isShow:{
      type: Boolean,
      value:true
      
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    pageSetting:{
      wm_num_array:10
    },
    pageData:{
      wm_text:""
    }
  },
  ready(){
    let that=this;
    console.log('水印组件渲染完成~');
    console.log(that.data.isShow);
    const wm_count = 100; // 水文字印个数
    const wm_num_array = Array.from({ length: wm_count }, (item, index) => index);
    that.setData({"pageSetting.wm_num_array": wm_num_array});
    that.setData({"pageData.wm_text":"用户名：13333333333"});
    console.log(that.data.pageSetting.wm_num_array);
  },

  /**
   * 组件的方法列表
   */
  methods: {
    
  }
})

在app.json中引用这个组件

"usingComponents": {
    "water-mark":"/components/water-mark/index"
  },

在需要的地方引用就可以啦~（这个isShow是控制显示与否的~）

  <water-mark isShow="{{true}}"></water-mark>

微信扫码查看本文