uniapp加上全局水印

• 前言：uniapp页面加水印你还在傻乎乎的一个个页面加吗，今天教你一招，一步到位

一、效果图

• 未登录效果
  

• 登录后效果
  

二、创建watermark.js文件

这里的水印因为我是为了显示store中的用户名字（user.name）和账号（user.userno），所以用了store，切记，这里的user.name和user.userno要换成自己的内容,我做了一个判断，如果是登录页面或者是忘记密码啊等等不用登录就能访问的页面，我都统一显示“请登录”，还有的页面不需要显示的，就给他过滤掉，其余的页面就正常显示用户姓名和编号，所以这里做了一个判断

/*** uniapp全局水印插件（支持排除特定页面）*/
import store from '@/store/index.js'
export default {install(app, options = {}) {// 默认配置const defaultOptions = {defaultContent: '未登录',width: 170, // 水印宽度height: 130, // 水印高度fontSize: 14, // 字体大小color: 'rgba(0, 0, 0, 0.1)', // 水印字体颜色及透明度rotate: -15, // 旋转角度zIndex: 999, // 在哪一层loginPaths: ['/pages/login', '/pages/forgetpwd'], // 登录相关页面路径（水印为请登录）excludePaths: ['/pages/common/webview/unindex'] // 需要排除水印的页面路径};const opts = { ...defaultOptions, ...options };let watermarkEl = null;let currentContent = '';// 获取当前页面路径function getCurrentPagePath() {const pages = getCurrentPages();if (pages.length) {const currentPage = pages[pages.length - 1];return `/${currentPage.route}`;}return '';}// 检查是否为需要排除水印的页面function isExcludedPage() {const currentPath = getCurrentPagePath();return opts.excludePaths.some(path => currentPath.includes(path));}// 检查是否为登录相关页面function isLoginPage() {const currentPath = getCurrentPagePath();return opts.loginPaths.some(path => currentPath.includes(path));}// 创建水印元素function createWatermark(content) {const canvas = document.createElement('canvas');canvas.width = opts.width;canvas.height = opts.height;const ctx = canvas.getContext('2d');ctx.rotate(opts.rotate * Math.PI / 180);ctx.font = `${opts.fontSize}px sans-serif`;ctx.fillStyle = opts.color;ctx.textAlign = 'left';ctx.textBaseline = 'middle';ctx.fillText(content, canvas.width / 10, canvas.height / 2);return canvas.toDataURL('image/png');}// 更新水印function updateWatermark(force = false) {// 如果是排除的页面，隐藏水印if (isExcludedPage()) {if (watermarkEl) watermarkEl.style.display = 'none';return;}// 确保水印元素存在if (!watermarkEl) {watermarkEl = document.createElement('div');watermarkEl.className = 'global-watermark';watermarkEl.style.cssText = `position: fixed;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;z-index: ${opts.zIndex};`;document.body.appendChild(watermarkEl);} else {watermarkEl.style.display = 'block';}const user = store?.state?.user || {};const newContent = isLoginPage() ? opts.defaultContent : ((user.name+' '+user.userno) || opts.defaultContent);if (newContent !== currentContent || force) {currentContent = newContent;const watermarkUrl = createWatermark(newContent);watermarkEl.style.backgroundImage = `url("${watermarkUrl}")`;}}// 初始化路由监听function initRouteWatcher() {// 轮询检查页面变化let lastPagesLength = 0;setInterval(() => {const pages = getCurrentPages();if (pages.length !== lastPagesLength) {lastPagesLength = pages.length;updateWatermark();}}, 300);}// 全局混入app.mixin({onLoad() {this.$nextTick(updateWatermark);},onShow() {updateWatermark();},mounted() {// 监听用户状态变化this.userWatcher = store?.watch((state) => state.user?.name,() => updateWatermark());},beforeUnmount() {// 清理监听器if (this.userWatcher) {this.userWatcher();}}});// 初始化initRouteWatcher();setTimeout(updateWatermark, 100);}
};    

三、在main.js中引入

import watermark from './watermark';
// 使用水印插件，可传入自定义配置
Vue.use(watermark, {loginPaths: ['/pages/login',  // 登录页'/pages/forgetpwd' // 忘记密码页面],defaultContent: '请登录'
});App.mpType = 'app';const app = new Vue({store,...App
})

四、运行

做完这几个步骤后，运行就可以显示出自己想要的效果了