原生小程序实现页面水印效果（自定义组件）

需求：
  小程序页面动态水印，水印内容是用户名+电话后四位。

思路：

1. 水印内容通过变量进行赋值，登录成功后，将用户名及手机号后四位拼接。
2. 均匀平铺在页面上，之前pc端是有多种方案实现，因为pc端和h5支持dom操作；小程序和uniapp等相关的框架不支持dom操作，编译不了。
3. 有想过让后端生成一个用户名和手机号的图，返回给前端，后端生成的快，前端生成较慢，尤其是进到页面就需要加载，影响用户体验。还是要前端自己做，该思路pass。
4. 有想过使用canvas画布，画布填充水印内容，未验证。看到有人说使用canvas的话，会影响页面上的普通标签，因为canvac的层级是最高的，使用z-index无法覆盖canvas。
5. 看到一篇文章微信小程序通过自定义组件给页面添加水印，以下则是通过该方案进行实现的水印效果。

步骤：

1. 在根目录创建components文件夹 在components下创建 watermark 文件夹 再在其下面创建page 得到 watermark.js watermark.json watermark.wxml watermark.wxss;
   

<!--components/watermark/watermark.wxml-->
<view class="water_top" style="pointer-events: none;">
    <view class="water-text">{{watermarkText}}</view>
    <view class="water-text">{{watermarkText}}</view>
    <view class="water-text">{{watermarkText}}</view>
    <view class="water-text">{{watermarkText}}</view>
    <view class="water-text">{{watermarkText}}</view>
    <view class="water-text">{{watermarkText}}</view>
    <view class="water-text">{{watermarkText}}</view>
    <view class="water-text">{{watermarkText}}</view>
</view>

// components/watermark/watermark.js
Component({
  data: {
    // 这里是一些组件内部数据
    watermarkText: '张三产品部'
  },
  attached() {
    // 在组件实例进入页面节点树时执行
    this.setData({
      watermarkText: (wx.getStorageSync('userInfo') || {}).name || '张三产品部'
    })
  },
  methods: {}
})

/* components/watermark/watermark.wxss */
/* 想要改水印大小或者稀疏通过样式调整即可 */
.water_top{
  position: fixed;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  /* background: #999; */
  transform:rotate(-10deg);
  /* opacity: 0.9; */
  z-index: 9;
}
.water-text{
  float: left;
  width:375rpx;
  color: rgba(169,169,169,.2);
  text-align: center;
  font-size: 15px;
  margin: 120rpx 0;
}

/* components/watermark/watermark.json */
{
  "component": true
}

2. 使用规则：在需要显示水印页面的json配置文件下配置 usingComponents 即可使用组件如下示例

{
  "usingComponents": {
    "canvas-watermark": "../../../components/watermark/watermark"
  }
}

3. 使用规则：在需要显示水印的wxml页面内使用标签即可实现自定义组件（页面水印）的使用;

// 直接将组件放在该wxml文件的最上面即可
<canvas-watermark></canvas-watermark>
<view class="headBox">
</view>
<view class="listBox">
</view>

参考文章：
小程序页面添加水印操作（自定义组件使用）
实现小程序页面水印