uni-app 小程序怎么全局添加水印

在uni-app小程序中全局添加水印，可以通过自定义组件和应用生命周期钩子来实现。下面是一个简单的实现案例：

1. 创建水印组件

首先，创建一个名为 Watermark 的自定义组件。在 components 目录下新建 Watermark.vue 文件，内容如下：

<template>
  <view class="watermark-container" :style="containerStyle">
    <view v-for="(text, index) in texts" :key="index" class="watermark-text" :style="textStyle(text)">
      {{ text }}
    </view>
  </view>
</template>

<script>
export default {
  props: {
    texts: {
      type: Array,
      default: () => ['水印文字']
    },
    textStyle: {
      type: Object,
      default: () => ({
        color: 'rgba(180, 180, 180, 0.3)',
        fontSize: '16px',
        transform: 'rotate(-30deg)',
        margin: '10px',
      })
    },
    containerStyle: {
      type: Object,
      default: () => ({
        position: 'fixed',
        top: 0,
        left: 0,
        width: '100%',
        height: '100%',
        pointerEvents: 'none', // 防止水印阻挡事件
        zIndex: -1000, // 保证水印在最底层
      })
    }
  }
}
</script>

<style scoped>
.watermark-container {
  position: relative;
  overflow: hidden;
}
.watermark-text {
  position: absolute;
  white-space: nowrap;
}
</style>

2. 在页面或全局引入水印组件

为了全局添加水印，可以在 App.vue 中引入并使用该组件：

<template>
  <view>
    <Watermark :texts="['全局水印', '防止截图']"/>
    <router-view/>
  </view>
</template>

<script>
import Watermark from '@/components/Watermark.vue';

export default {
  components: {
    Watermark
  }
}
</script>

3. 调整水印样式和内容

你可以根据需要调整水印的样式和内容。例如，可以通过计算属性生成多个随机位置的水印文本，或者从服务器获取水印信息。

4. 注意事项

• 性能：水印组件会覆盖整个页面，如果水印内容复杂或数量过多，可能会影响性能。
• 安全性：水印并不能完全防止截图，只是一种视觉上的警示。
• 兼容性：确保水印样式在不同设备和屏幕尺寸上都能正常显示。

通过上述步骤，你可以在uni-app小程序中实现全局水印功能。根据实际需求，你还可以进一步优化和扩展水印组件的功能。