# reward

> 基础库 3.17.5 开始支持，低版本需做[兼容处理](1003706)。

> __微信 Windows 版__：支持
> 
> __微信 Mac 版__：支持
> 
> __微信 鸿蒙 OS 版__：支持

渲染框架支持情况：Skyline （使用最新 [Nightly](/miniprogram/dev/devtools/nightly.html) 工具调试）、WebView

## 功能描述

「喜欢开发者」组件。展示喜欢当前公众号作者的用户头像墙与喜欢人数，读者可点击表达喜欢，点击人数可查看喜欢的用户列表。作者标识、头像、人数、跳转链接等业务数据全部由后台按用户身份下发，前端零配置。组件自包含全部交互，不向页面抛事件。

## 属性说明

| 属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
| ---- | ---- | ------ | -------- | ---- | -------- |
| theme | string | transparent | 否 | 配色。`transparent` 无背景（默认）；`white` 白底（`#FFFFFF`）；`black` 深底（`#2C2C2C`）。`light` / `dark` / `plain` 为同义写法。 | [3.17.5](1003706) |
| width | number |  | 否 | 卡片宽度，占可用宽度的百分比，取值 85～100。低于 85 时整卡不展示。不传时满屏容器默认约为屏宽的 96%。 | [3.17.5](1003706) |

## 示例代码

```html
<reward />
```

```html
<reward theme="black" />
```

```html
<reward theme="transparent" />
```

## Bug & Tip

1. `tip`: 组件不需要任何业务参数，作者标识/头像/人数/跳转链接均由后台下发，页面直接放置即可。
1. `tip`: 还没有人喜欢时，组件只展示按钮，人数行与头像墙都不渲染。
1. `tip`: 点击人数行会由基础库拉起半屏喜欢列表，页面无需提供容器，也无需监听事件。
1. `tip`: webview 与 skyline 两种渲染路径均可用，半屏喜欢列表由基础库统一绘制，两端表现一致。
1. `tip`: 一个页面只能放置一个 `<reward />` 组件。同一页面放置多个时，本页赞赏组件将不展示。
1. `tip`: 同一个小程序内，只允许一个页面放置 `<reward />` 组件。即使多个页面都放入了组件，也只在第一个展示的页面渲染，其他页面的组件将不展示。
1. `tip`: `width` 是占**可用宽度**的百分比，不是 CSS 像素。取值不能低于 85；换算后小于 `max(屏宽 × 85%, 216px)` 时整卡不展示。
1. `tip`: `width` 大于 100 时按 100 封顶。