2022年10月,微信回收getUserInfo()和getUserProfile()获取用户信息的能力。从此以后,不管是getUserInfo还是getUserProfile,都返回匿名的微信头像和昵称,但仍然可以获取openid。
这里转载自csdn的博主 嘿,小苹果 的关于uni.getUserProfile 废弃,uni-app获取头像和昵称的方法:
之前,利用getUserProfile获取用户头像和昵称的方法:
getUserProfile(e) { uni.showLoading({ title: '加载中' }) let that = this uni.getUserProfile({ desc: '用于完善会员资料', success: (res) => { uni.hideLoading(); that.nickName = res.userInfo.nickName that.avatar = res.userInfo.avatarUrl that.rawData = res.userInfo; that.wxlogin(); }, fail() { uni.hideLoading(); } }) },
新方法最终效果如下:
代码如下如:
html
<u-popup mode="bottom" :show="getnickshow" @close="getnickshow = false" round='16rpx'>
<view class="getnickbox">
<view class="flex_align_center">
<image :src="project.logo" class="logoimg" mode="aspectFit"></image>
<view class="name">
{{project.name}}
<text>申请</text>
</view>
</view>
<view class="m1 mt30">获取你的头像、昵称</view>
<view class="m2">展示个人信息</view>
<view class="xin1">
<button
type="default" class="flex_spacebetween buttoncss" open-type="chooseAvatar" @chooseavatar="chooseavatar">
<view class="flex_align_center toubox">
<view class="t1">头像</view>
<view v-if="avatar == ''" class="avatarbox">
<u-icon name="account-fill" size="50" color="#999"></u-icon>
</view>
<image v-else :src="avatar" class="avatarimg"></image>
</view>
<u-icon name="arrow-right" size="25" color="#999"></u-icon>
</button>
</view>
<view class="nick">
<view class="n1">昵称:</view>
<input type="nickname" v-model="nickname" placeholder="请输入昵称">
</view>
<view class="fixedBtn wan">
<button size="mini" open-type="getUserInfo" @click="getUserInfo" :plain='true' class="btn">完成</button>
</view>
</view>
</u-popup>
js
onShow() { // 获取项目的 logo 和 名称 uni.getSystemInfo({ success: (res) =>{ this.project.name = res.appName } }) this.project.logo = __wxConfig.accountInfo.icon },
// 选择用户头像, 重点, 得调用下上传图片接口 chooseavatar(e){ uni.uploadFile({ url: baseUrl + 'api/common/upload', filePath: e.detail.avatarUrl, name: 'file', formData: { is_wxhead: 1 }, header: { // Authorization: uni.getStorageSync("token") }, success: r => { let imgData = JSON.parse(r.data) console.log(imgData) this.avatar = imgData.data.fullurl; } }); }, async getUserInfo(){ let that = this; if(this.avatar == ""){ uni.showToast({ title: '请选择头像', icon: 'none' }) return } // 坑,,,点击昵称后,开发者工具上 一直提示 昵称是空,但是 真机上 是正常的 if(this.nickname == ""){ uni.showToast({ title: '请编辑用户昵称或昵称不能使用特殊字符', icon: 'none' }) return } that.rawData = { language: "zh_CN", nickName: that.nickname, avatarUrl: that.avatar } that.wxlogin(); },
css
.getnickbox{ padding: 40rpx 20rpx; .logoimg{ width:50rpx; height:50rpx; } .name{ margin-left:20rpx; text{ margin-left:10rpx; } } .m1{ font-weight: 500; } .m2{ padding-bottom: 30rpx; border-bottom: 1rpx solid #f2f2f2; color:#999; padding-top: 10rpx; font-size: 24rpx; } .xin1{ border-bottom: 1rpx solid #f2f2f2; margin-bottom: 30rpx; .toubox{ padding: 10rpx 0; .t1{ font-size: 28rpx; margin-right: 30rpx; } .avatarbox{ width: 100rpx; height: 100rpx; border-radius: 20rpx; } .avatarimg{ width: 100rpx; height: 100rpx; border-radius: 20rpx; } } } .buttoncss{ background-color: #fff; border-radius: 0px; border: 0rpx solid transparent; } button::after{ border: 0px solid rgba(0,0,0,.2); } .nick{ padding-bottom: 30rpx; border-bottom:2rpx solid #f2f2f2; display: flex; align-items: center; padding-left: 14px; padding-right: 14px; .n1{ font-size: 28rpx; margin-right: 30rpx; } } .wan{ position: relative; height: 100rpx; box-shadow: 0rpx 0rpx 0rpx 0rpx; margin-top: 30rpx; } .mt30{ margin-top: 30rpx; } }
提示: 新规则 需要注意两点
1. 获取的头像路径得处理一下,这个方法获取的路径是本地路径,所以得走上传接口
2. 获取昵称后,开发者工具上 一直提示 昵称是空,但是 真机上 是正常的