首页 > 建站教程 > APP开发,混合APP >  微信小程序获取用户昵称和头像 getUserProfile 废弃,uni-app获取头像和昵称的方法正文

微信小程序获取用户昵称和头像 getUserProfile 废弃,uni-app获取头像和昵称的方法

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();
    }
  })
},


新方法最终效果如下:

getUserProfile


代码如下如:

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>


getUserProfile


getUserProfile


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. 获取昵称后,开发者工具上 一直提示 昵称是空,但是 真机上 是正常的