微信小程式獲取使用者頭像和暱稱能力調整！新的代替方案！

TANKING發表於2022-06-22
微信小程式

介面調整公告

前段時間，微信釋出《小程式使用者頭像暱稱獲取規則調整公告》稱實踐中發現有部分小程式，在使用者剛開啟小程式時就要求收集使用者的微信暱稱頭像，或者在支付前等不合理路徑上要求授權。

如果使用者拒絕授權，則無法使用小程式或相關功能。在已經獲取使用者的 openId 與 unionId 資訊情況下，使用者的微信暱稱與頭像並不是使用者使用小程式的必要條件。為減少此類不合理的強迫授權情況，小程式 wx.getUserProfile 介面將被收回，wx.getUserInfo 介面獲取使用者暱稱頭像將被收回。

新的替代方案

為了解決這個問題，小程式官方提供了一個頭像暱稱填寫能力。當小程式需要讓使用者完善個人資料時，可以通過微信提供的頭像暱稱填寫能力快速完善。

當你點選頭像的時候可以直接將頭像的臨時地址獲取到，當你點選輸入框的時候，可以獲取到你的微信暱稱，可以將微信暱稱直接填入輸入框。

index.wxml

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

index.js

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

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

index.wxss

.avatar{
      width: 80px;
      height: 80px;
      padding:0;
      background: none;
}
.avatar image{
      width: 80px;
      height: 80px;
      border-radius: 100px;
}
.weui-input{
      width: 90%;
      height: 60px;
      margin:20px auto;
      background: #eee;
      border-radius: 5px;
      padding-left: 15px;
}

通過這種方法就可以杜絕那些強制授權獲取頭像和暱稱的小程式了。不過這麼閹割這個功能，還是降低了使用者體驗。

這裡要注意的是：獲取到的頭像是臨時地址，不要存進資料庫，臨時地址會失效，準確的做法就是通過wx.uploadFile這個介面將臨時地址的頭像上傳到你伺服器進行儲存，獲取永久地址。

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

Page({
  data: {
    avatarUrl: defaultAvatarUrl,
  },
  onChooseAvatar(e) {
    const { avatarUrl } = e.detail 
    this.setData({
      avatarUrl,
    })
    //  將頭像上傳到伺服器
    wx.uploadFile({
      url: 'https://example.weixin.qq.com/upload',
      filePath: tempFilePaths[0],
      name: 'file',
      success (res){
        const data = res.data
        //do something
      }
    })
  }
})

Author:TANKING
WeChat:sansure2016
如需深入學習，可以聯絡我！

相關文章