原来是通过 wx.getUserProfile()
来获取用户微信昵称和头像,但是最近有一次调整,公告内提到了 wx.getUserProfile
接口将会在 2022年11月8日24时 被收回(基础库版本低于2.27.1的可以继续正常返回),生效期后发布的小程序通过 wx.getUserInfo
接口获取用户头像将统一返回默认灰色头像,昵称将统一返回 “微信用户”。
在新版本下 获取微信头像 需要通过在 button
组件上绑定 open-type
属性并设置为 chooseAvatar
后,通过 bindchooseavatar
事件回调获取到头像信息的临时路径。
获取微信昵称 则需要把 input
组件的 type-type
属性设置为 nickname
,在用户点击输入框后将会在键盘上方会展示微信昵称,所以并不会通过一个接口直接返回用户头像和昵称了。
<view class="wraper">
<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
<image class="avatar" :src="avatarUrl" mode=""></image>
</button>
<input type="nickname" class="weui-input" placeholder="请输入昵称" @change="getNickname" />
<view class="button">
<u-button customStyle="width: 40%;color:#07c160;border-color: #efefef;" @click="close">取消</u-button>
<u-button customStyle="width: 40%;background-color:#07c160;color:#fff" @click="getupdate">立即修改</u-button>
</view>
<u-toast ref="uToast"></u-toast>
</view>
方法:
getNickname(e) {
this.querName.nickname = e.detail.value;
},
onChooseAvatar(e) {
const {
avatarUrl
} = e.detail
this.avatarUrl = avatarUrl
},
昵称的获取方式通过chang事件拿到nickName的名称
其中在获取头像的临时路径后需要通过uploadFile方法上传到服务器
uni.uploadFile({
url: ``, // 后台接口
filePath: this.avatarUrl, // 上传图片 url
name: 'file',
header: {
'Content-Type': 'multipart/form-data',
"Authorization": uni.getStorageSync('token'),
}, // header 值
success: res => {
},
fail: e => {
this.$u.toast(`请上传头像`)
}
});
其中微信会对上传的图片做敏感信息检测