更新记录

1.03（2020-05-28）

修改app端水印重叠的问题

1.02（2020-05-07）

新增更新水印方法

1.01（2020-04-10）

解决app端水印无法渲染的问题

平台兼容性

ly-watermark全局水印插件

·支持H5/APP，受uni-app限制，小程序没研究出来方法

·使用mixins方式混入到需要加载的页面中

·由于用到了uni的页面通讯机制，需要HBuilderX 2.0.0及以上版本支持

·如果是低版本，可以自行用bus方式修改

基本用法

·因为需要借助canvas生成图片，H5端直接插入标签，APP端需要定义一个canvas

·可以适当地修改样式，比如z-index:-1的方式将图层置下，让其他元素遮挡住，否则可能会造成片刻的闪烁

<template>
    <view>
        <!-- #ifdef APP-PLUS -->
        <canvas v-if="showCanvas" class="watermarkCans" canvas-id="watermarkCanvas"></canvas>
        <!-- #endif -->
        <view class="ly-padding">
            <button @tap="navigate">跳转至下一页</button>
        </view>
    </view>
</template>

<script>
    import watermark from '@/commons/watermark.js'

    export default {
        mixins: [watermark],
        data() {
            return {
                // 水印内容，请以这个命名为准
                canvasText: 'hruomei2020',
            }
        },
        // 注意一定要在mounted中调用！！否则可能会绘制无效（不同HbuilderX版本差异）
        mounted() {
            this.initWatermark(); // 可以在水印内容准备好后执行初始化
        },
        methods: {
            navigate() {
                uni.navigateTo({
                    url: "../other/page"
                })
            }
        }
    }
</script>

<style>
    .ly-padding{
        padding: 30rpx;
    }

    /* 请注意这里一定要设置宽高 */
    .watermarkCans {
        width: 250rpx;
        height: 250rpx;
        position: absolute;
        z-index: -1;
    }
</style>

切换隐藏/显示状态

·由于部分页面可能需要隐藏掉水印，比如登录页，可以在页面的onLoad中隐藏，在onUnload中显示

<script>
    export default{
        onLoad() {
            //触发水印隐藏
            uni.$emit('ly-hide-watermark');
        },
        onUnload() {
            //触发水印显示
            uni.$emit('ly-show-watermark');
        }
    }
</script>

Tips 一个简单的插件，希望可能帮助大家