# Avatar Nickname Fill

From the base library 2.21.2 Start support

When a Mini Program needs to allow users to improve their personal information, it can be quickly improved through the ability to fill in the avatar nickname provided by WeChat.

In accordance with relevant laws and regulations, in order to ensure information security, information such as pictures and nicknames uploaded by users will be checked by WeChat. The components have been connected to the content security server interface (mediaCheckAsync、[msgSecCheck ](https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/sec-center/sec-check/msgSecCheck .html)) to reduce the impact of content security risks on developers.

# Methods of Use

# Avatar Selection

The need to button assembly open-type The value of the chooseAvatar, when the user selects the avatar that they want to use, they can use the bindchooseavatar Event callback gets the temporary path to avatar information.

Starting from Base Library version 2.24.4, if the user uploads an image that does not pass the security monitoring, it will not triggerbindchooseavatar Events.

# Nickname Fill

The need to input assembly type The value of the nicknameWhen the user enters this input, the WeChat nickname will be displayed above the keyboard.

Starting with the base library version 2.24.4, in theonBlur When the event is triggered, WeChat will asynchronously monitor the content entered by the user. If the security monitoring is not passed, WeChat will empty the content entered by the user. form inform-type forsubmit ofbutton Component collects user input.

On the developer tools, input Components are made with web Component simulation, so in some cases can not restore the performance of the real machine very well, it is recommended that developers try to debug on the real machine when using the native components.

# Code Examples

{% Minicode ('AHlLS9mn7Izb') %}

<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
  <image class="avatar" src="{rcUrl}}"></image>
</button> 
<input type="nickname" class="weui-input" Placeholder = "Please enter a nickname"/>

const defaultAvatarUrl = 'https://mmbiz.qpic.cn /mmbiz /icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'

Page({
  data: {
    avatarUrl: defaultAvatarUrl,
  },
  onChooseAvatar(e) {
    const { avatarUrl } = e.detail 
    this.setData({
      avatarUrl,
    })
  }
})