微信小程序怎么实现界面水印印板

创建component文件

在component文件里创建watermark文件以及watermark.json,watermark.js,watermark.wxml,watermark.wxss

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 class="water-text">{{watermarkText}}</view>
</view>

watermark.wxss:

.water_top{
	position: fixed;
	top:0;
	bottom: 0;
	left: 0;
	right: 0;
	transform:rotate(-12deg); /** 旋转 可自己调整 **/
	z-index: 9999;
  }
  .water-text{
	float: left;
	width:375rpx;
	color: rgba(169,169,169,.2);
	text-align: center;
	font-size: 95%;
	margin: 100rpx 0; /** 间距 可自调 **/
  }
  

watermark.js:

// components/watermark/watermark.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {
      name:String
    },
  
    /**
     * 组件的初始数据
     */
    data: {
      watermarkText:'微信用户'
    },
  
    /**
     * 组件生命周期声明对象，组件的生命周期
     * ：created、attached、ready、moved、detached 
     * 将收归到 lifetimes 字段内进行声明
     * 原有声明方式仍旧有效，如同时存在两种声明方式
     * 则 lifetimes 字段内声明方式优先级最高
     */
    lifetimes:{
      attached(){
        this.setData({
          watermarkText:this.data.watermarkText + this.properties.name
        })
      }
    },
  
    /**
     * 组件的方法列表
     */
    methods: {
  
    }
  })
  
  

app.json 全局引用

"usingComponents": {
   "watermark":"/component/watermark/watermark"
},

界面使用组件 index.wxml

<watermark></watermark>