1、需求背景
很多企业内部小程序，都会有这样的需求：
- 页面显示员工姓名、工号
- 防止截图泄露
- 全局统一水印
- 动态切换水印内容
- 不影响页面交互
效果如下：
2、核心思路
本方案采用 纯 WXML + CSS 水印方案，核心实现思路：
- 使用大量
<text>，大面积覆盖，避免 rotate 后边缘露白 - overflow hidden，防止超出区域滚动
- fixed固定定位覆盖页面，超高z-index
- CSS rotate 倾斜
- pointer-events:none 不阻塞点击
- 通过EventBus事件总线动态刷新
3、方案特点
- 全局水印
- 支持动态更新
- 支持自定义样式
- 不影响页面点击
- 使用简单
- 已封装为 npm 组件，真正做到开箱即用
- 性能稳定
4、项目地址
GitHub：miniprogram-watermark
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 | 垂直间距 |