focus
The WeChat applet fills the avatar button with open-type="chooseAvatar"
The WeChat applet populates the nickname input button and opens type="nickname"
The wx.getUserProfile interface of the applet will be withdrawn, and the "Avatar Nickname Filling Capability" supports obtaining user avatar nicknames :
Article Directory
1. Adjust the background
In the applet, developers can directly obtain the user's openId and unionId information through the wx.login interface, realize WeChat identity login, and support developers to anonymously associate the same user among multiple applets or other applications.
At the same time, in order to meet the needs of creating user nicknames and avatars in some small program businesses, the platform provides the wx.getUserProfile interface, which supports quick use of your own WeChat nickname and avatar under the premise of user authorization.
However, in practice, it is found that some small programs require the collection of the user's WeChat nickname and avatar when the user first opens the small program, or require authorization in unreasonable ways such as before payment. If the user refuses to authorize, the applet or related functions cannot be used. In the case that 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 following adjustments are made.
After 24:00 on October 25, 2022 (hereinafter collectively referred to as the "effective date"), the rules for obtaining user avatar nicknames will be adjusted as follows:
From the effective date, the Mini Program wx.getUserProfile interface will be withdrawn : for new versions of the Mini Program released after the effective date, the user avatar obtained through the wx.getUserProfile interface will uniformly return the default gray profile picture , and the nickname will uniformly return "WeChat user". Mini Program versions released before the effective date will not be affected, but adaptations are required for version updates.
Two, the solution
The code is as follows (example):
<template>
<view>
<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
<image class="avatar" :src="avatarUrl"></image>
</button>
<input type="nickname" class="weui-input" placeholder="请输入昵称" v-model="nickName" @blur="onNickName" />
</view>
</template>
<script>
export default {
data() {
return {
avatarUrl: '',
nickName: ''
}
},
methods: {
onChooseAvatar(e) {
this.uploadFilePromise(e.detail.avatarUrl)
},
onNickName(e) {
this.completeMemberInfo(e.detail.value)
},
uploadFilePromise(avatarUrl) {
//调后台接口上传图片 这里的avatarUrl拿到的是微信地址
uni.request({
url: 'https://example.weixin.qq.com/upload',
data:avatarUrl,
...
success(res) {
const data = res.data
//do something
completeMemberInfo(res.data.avatarUrl)
}
})
},
//接收 avatarUrl / nickName
completeMemberInfo(data) {
//接收 avatarUrl / nickName 调接口完善头像或者昵称信息
},
}
}
</script>
<style>
</style