The method of obtaining the profile picture nickname of the Mini Program has changed again. Starting from Mini Program Basic Library 2.21.2, the Mini Program has begun to discard the wx.getUserProfile interface. The profile picture nickname obtained from this interface for newly submitted Mini Programs has become the default profile picture and nickname. For an old ape who has developed hundreds of small programs, it is undoubtedly a bolt from the blue. There is no way, who makes us hard-working programmers, we can only follow the official pace
In this update, the official has taken the privacy protection of users to a higher level, allowing users to choose whether to fill in the avatar nickname. The official provides developers with the ability to fill in the avatar nickname, setting the scene as a way for the user to fill in the information voluntarily to complete the avatar nickname.
The first is to fill in the nickname. You need to use the button component, and set the open-type value of the button component to chooseAvatar. In addition, bindchooseavatar is provided to make the callback of the avatar filling event. Note that in the callback of the bindchooseavatar event, a temporary path is returned , instead of returning a permalink as before, so the developer needs to handle uploading the avatar to the backend for permanent storage
<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
<image class="avatar" src="{
{avatarUrl}}"></image>
</button>
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
Page({
data: {
avatarUrl: defaultAvatarUrl,
},
onChooseAvatar(e) {
const { avatarUrl } = e.detail
this.setData({
avatarUrl,
})
}
})One is to fill in the nickname. The input box is used to fill in the nickname. Set the type to nickname WeChat to quickly fill in the user’s nickname above the keyboard. Of course, the user can also choose to fill in other nicknames. One thing to note is to use The input monitoring of the input component cannot monitor the user's filling, so you need to use the bindsubmit method of the form component to monitor
<form bindsubmit="submit">
<input type="nickname" name="nickname" class="weui-input" placeholder="请输入昵称" />
<button class="confirm" form-type="submit">确定</button>
</form>Finally, upload the avatar and nickname filled in by the user to the background to bind the user's avatar nickname.
Those who need sample code can download my resource applet avatar nickname fill in sample code-Javascript document class resource-CSDN library