微信小程序全局安全水印组件实践：支持动态更新、全局生效、自定义样式

eric*16882026-05-10 9:06

1、需求背景

很多企业内部小程序，都会有这样的需求：

页面显示员工姓名、工号
防止截图泄露
全局统一水印
动态切换水印内容
不影响页面交互

效果如下：

2、核心思路

本方案采用纯 WXML + CSS 水印方案，核心实现思路：

使用大量 <text>，大面积覆盖，避免 rotate 后边缘露白
overflow hidden，防止超出区域滚动
fixed固定定位覆盖页面，超高z-index
CSS rotate 倾斜
pointer-events:none 不阻塞点击
通过EventBus事件总线动态刷新

3、方案特点

全局水印
支持动态更新
支持自定义样式
不影响页面点击
使用简单
已封装为 npm 组件，真正做到开箱即用
性能稳定

4、项目地址

GitHub：miniprogram-watermark

npm：@ericbyliang/miniprogram

5、使用方法

5.1 安装组件

安装 npm 包：

npm install @ericbyliang/miniprogram

5.2 全局注册组件

在 app.json 中声明：

{

"usingComponents": {

"watermark": "@ericbyliang/miniprogram/watermark/index"

}

}

5.3 页面使用

在需要显示水印的页面：

<watermark />

5.4 全局设置水印文本

const { setWatermarkText } = require("@ericbyliang/miniprogram");

// 设置水印，比如登录后，设置一次即可

setWatermarkText("林俊杰 2000022");

// 取消水印，比如在登录页面

setWatermarkText("");

这意味着：

登录后可以设置员工信息
退出登录后可以清除
用户切换账号可动态刷新

5.5 动态设置水印文本&自定义水印样式

组件支持动态传参：

<watermark

text="周杰伦 2000021"

textSize="14"

textColor="rgba(80,80,80,0.08)"

rotate="-20"

gapX="120"

gapY="180"

/>

支持参数：

参数	说明
text	水印文本
textSize	字体大小（rpx）
textColor	水印颜色/透明度
rotate	旋转角度
gapX	水平间距
gapY	垂直间距