# 頭像昵稱填寫

從基礎(chǔ)庫 2.21.2 開始支持

當(dāng)小程序需要讓用戶完善個(gè)人資料時(shí)，可以通過微信提供的頭像昵稱填寫能力快速完善。

根據(jù)相關(guān)法律法規(guī)，為確保信息安全，由用戶上傳的圖片、昵稱等信息微信側(cè)將進(jìn)行安全檢測，組件從基礎(chǔ)庫2.24.4版本起，已接入內(nèi)容安全服務(wù)端接口（mediaCheckAsync、msgSecCheck），以減少內(nèi)容安全風(fēng)險(xiǎn)對(duì)開發(fā)者的影響。

# 使用方法

# 頭像選擇

需要將 button 組件 open-type 的值設(shè)置為 chooseAvatar，當(dāng)用戶選擇需要使用的頭像之后，可以通過 bindchooseavatar 事件回調(diào)獲取到頭像信息的臨時(shí)路徑。

從基礎(chǔ)庫2.24.4版本起，若用戶上傳的圖片未通過安全監(jiān)測，不觸發(fā)bindchooseavatar 事件。

# 昵稱填寫

需要將 input 組件 type 的值設(shè)置為 nickname，當(dāng)用戶在此input進(jìn)行輸入時(shí)，鍵盤上方會(huì)展示微信昵稱。

從基礎(chǔ)庫2.24.4版本起，在onBlur 事件觸發(fā)時(shí)，微信將異步對(duì)用戶輸入的內(nèi)容進(jìn)行安全監(jiān)測，若未通過安全監(jiān)測，微信將清空用戶輸入的內(nèi)容，建議開發(fā)者通過 form 中form-type 為submit 的button 組件收集用戶輸入的內(nèi)容。

在開發(fā)者工具上，input 組件是用 web 組件模擬的，因此部分情況下并不能很好的還原真機(jī)的表現(xiàn)，建議開發(fā)者在使用到原生組件時(shí)盡量在真機(jī)上進(jìn)行調(diào)試。

# 代碼示例

在開發(fā)者工具中預(yù)覽效果

<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
  <image class="avatar" src="{{avatarUrl}}"></image>
</button> 
<input type="nickname" class="weui-input" placeholder="請輸入昵稱"/>

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

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