微信小程序使用组件用例

要在微信小程序的所有页面中都添加这个水印功能，你可以创建一个全局的公共组件（例如命名为 watermark.wxml 和 watermark.wxss），然后在需要添加水印的每个页面的 json 配置文件中引入并使用这个公共组件。

以下是你可能的操作步骤：

1. 创建公共组件 watermark：

• 在 /components/watermark 目录下创建 watermark.wxml 文件，内容如下：

<!-- components/watermark/watermark.wxml -->
<view class="watermark">
  <block wx:for="{{rows}}">
    <view class="watermark-row">
      <span class="watermark-col" wx:for="{{cols}}" wx:key="*this">{{content}}</span>
    </view>
  </block>
</view>

• 在 /components/watermark 目录下创建 watermark.wxss 文件，内容就是你给出的样式。
• 在 /components/watermark 目录下创建 watermark.js 文件，用于设置属性和数据（如 rows, cols, content 等）。

// components/watermark/watermark.js
Component({
  properties: {
    rows: {
      type: Number,
      value: 30
    },
    cols: {
      type: Number,
      value: 5
    },
    content: {
      type: String,
      value: '开发者社区123123123'
    }
  }
})

2. 引入并使用公共组件：

• 在需要添加水印的每个页面的 json 配置文件中引入此组件：

// pages/index/index.json 或其他页面的json配置文件
{
  "usingComponents": {
    "watermark": "../components/watermark/watermark"
  }
}

• 在 wxml 页面布局文件中添加组件：

<!-- pages/index/index.wxml 或其他页面的wxml文件 -->
<watermark rows="30" cols="5" content="开发者社区123123123" />

这样，在你引入了 watermark 组件的每个页面上都会显示水印效果了。