在页面上加上唯一标识，实现页面上添加属于自己的水印,可以使用自定义组件的方式实现。
1.自定义组件
wxml:
<view class='water-mark-mask'>
<view class='row' wx:for="{{rows}}" wx:key="index">
<view class='col' wx:for="{{cols}}" wx:key="index" style="color:{{color}};font-size:28rpx;">{{text}}</view>
</view>
</view>
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;
}
js:
Component({
data: {
text: '请勿外传',
color: 'rgba(0,0,0,0.1)',
rows: [],
cols: []
},
// 组件在页面上挂载时触发,注意如果页面没卸载过，该事件就不会触发第二次
attached() {
const { windowWidth, windowHeight } = wx.getSystemInfoSync();
const rows = Math.ceil(windowWidth / (40 * this.data.text.length));
const cols = Math.ceil(windowHeight / 120);
const waterMark=wx.getStorageSync('waterMark')
this.setData({
rows: new Array(rows),
cols: new Array(cols)
});
},
})
在需要的页面引入该组件即可。
效果图如下：
图片.png
006fCpcXly1g40vlz9cz6j30j60nyads.jpg
