OpenData
Displays WeChat open data.
Type
ComponentType<OpenDataProps>
Examples
- React
- Vue
class App extends Component {
render () {
return (
<OpenData type='userAvatarUrl'/>
)
}
}
<template>
<open-data type="userAvatarUrl" />
</template>
OpenDataProps
| Property | Type | Default | Required | Description |
|---|---|---|---|---|
| type | "groupName" | "userNickName" | "userAvatarUrl" | "userGender" | "userCity" | "userProvince" | "userCountry" | "userLanguage" | Yes | The type of the open data. | |
| openGid | string | No | The ID of the group. It is valid when type="groupName". | |
| lang | "en" | "zh_CN" | "zh_TW" | "en" | No | Specifies the language used to display userInfo. It is valid when type="user*". |
| defaultText | string | No | Default text when data is empty | |
| defaultAvatar | string | No | Default image when user avatar is empty, supports relative paths and network image paths. | |
| onError | BaseEventOrigFunction<any> | No | Triggered when the group name or user information is empty. |
Property Support
| Property | WeChat Mini-Program | H5 | React Native |
|---|---|---|---|
| OpenDataProps.type | ✔️ | ||
| OpenDataProps.openGid | ✔️ | ||
| OpenDataProps.lang | ✔️ | ||
| OpenDataProps.defaultText | ✔️ | ||
| OpenDataProps.defaultAvatar | ✔️ | ||
| OpenDataProps.onError | ✔️ |
type
type Valid values of type
| Value | Description |
|---|---|
| groupName | The name of the group |
| userNickName | The nickname of the user |
| userAvatarUrl | The profile photo of the user |
| userGender | The gender of the user |
| userCity | The city where the user is located |
| userProvince | The province where the user is located |
| userCountry | The country where the user is located |
| userLanguage | The language used by the user |
lang
Valid values of lang
| Value | Description |
|---|---|
| en | English |
| zh_CN | Simplified Chinese |
| zh_TW | Traditional Chinese |
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|---|---|---|
| OpenData | ✔️ |