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 | ✔️ |