Wechat applet gets user avatar and nickname ability adjustment! A new alternative!

Interface Adjustment Announcement

Some time ago, WeChat released the "Announcement on Adjustment of the Rules for Obtaining User Avatars and Nicknames in Mini Programs" . In practice, it was found that some Mini Programs require the collection of users' WeChat nicknames and avatars when users first open the Mini Program, or wait for unreasonable paths before payment. Ask for authorization.

If the user refuses authorization, the applet or related functions cannot be used. When the user's openId and unionId information has been obtained, the user's WeChat nickname and avatar are not necessary conditions for the user to use the Mini Program. In order to reduce such unreasonable forced authorization, the Mini Program wx.getUserProfile interface will be withdrawn, and the wx.getUserInfo interface to obtain the user's nickname and avatar will be withdrawn.

new alternative

In order to solve this problem, the Mini Program officially provides an avatar nickname filling ability. When the Mini Program needs to allow users to improve their personal information, they can quickly improve the ability to fill in the avatar and nickname provided by WeChat.

When you click on the avatar, you can directly get the temporary address of the avatar. When you click on the input box, you can get your WeChat nickname, and you can directly fill in the WeChat nickname into the input box.

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;
}

In this way, those small programs that forcefully authorize the acquisition of avatars and nicknames can be eliminated. However, such castration of this function still reduces the user experience.

It should be noted here: the obtained avatar is a temporary address, do not store it in the database, the temporary address will be invalid, the accurate way is to upload the avatar of the temporary address to your server for storage through the wx.uploadFile interface. Get a permanent address.

 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
If you want to learn more, you can contact me!