微信小程序-增加水印（自定义内容）

最新推荐文章于 2025-07-02 19:02:06 发布

狸狸1009

最新推荐文章于 2025-07-02 19:02:06 发布

阅读量4.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：微信小程序

本文链接：https://blog.youkuaiyun.com/dongyang1124/article/details/124098482

本文记录了在微信小程序中增加水印组件的过程，包括新建watermark组件并分别编写.js、.json、.wxml和.wxss文件，以及如何在app.json中设置全局变量和在具体页面中引用该组件，展示如何显示自定义内容如登录者信息作为水印。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Number1 微信小程序增加水印

最近在整微信小程序，这里增加写自己最近用到的东西（仅为记录）
主要原则是增加一个水印的组件,新建components文件夹，在文件夹下面新建watermark组件
1、watermark.js源码

Component({
    /**   
  * 组件的属性列表   
  */
    properties: {    
      myValue: String  
     },
    data: {
      text: '内容自定义',
      // color: 'rgba(0,0,0,0.03)',
      color: 'rgba(0,0,0,0.5)',
      rows: [],
      cols: []
    },
    // 组件在页面上挂载时触发,注意如果页面没卸载过，该事件就不会触发第二次
    attached() {
      const { windowWidth, windowHeight } = wx.getSystemInfoSync();
      const rows = Math.ceil(windowWidth / (30 * this.data.text.length));
      const cols = Math.ceil(windowHeight / 100);
      this.setData({
        rows: new Array(rows),
        cols: new Array(cols)
      });
    },
  })

2、watermark.json

{
  "component": true,
  "usingComponents": {}
}

3、watermark.wxml

<view class='water-mark-mask'>
    <view class='row' w

最低0.47元/天解锁文章

200万优质内容无限畅学