【微信小程序】 获取用户信息 UserInfo 不注意的小问题 2022

获取用户信息 

小程序官方API更新后 获取用户信息显得繁琐 要去做兼容 判断是否支持wx.getUserProfile 再选择获取用户信息的方式

<view>
    <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称     </button>
    <button wx:else open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
</view>
Page({
  data: {
    userInfo: {},
    hasUserInfo: false,
    canIUseGetUserProfile: false,
  },
  onLoad() {
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },
  getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
    // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
  getUserInfo(e) {
    // 不推荐使用getUserInfo获取用户信息，预计自2021年4月13日起，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  },
})

获取用户信息后 进行头像页面渲染 发现头像显示模糊  故而查看了文档 哎呦不看文档吃亏了 

正常获取到的头像是这样的：avatarUrl: "https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKsiajQ8pZL5Lkt0jvflyvSMDsIbBzuiao2OqIVEwdL8PEleicibFzQ11dCWIYj0H7XzEtDSkibr4VY25w/132"

注意最后的数值 默认为132 这就是模糊的原因 我们进行处理 将数指替换成0  完美解决 显示不再模糊

let avatarUrl =  "https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKsiajQ8pZL5Lkt0jvflyvSMDsIbBzuiao2OqIVEwdL8PEleicibFzQ11dCWIYj0H7XzEtDSkibr4VY25w/132"
avatarUrl = avatarUrl.replace('/132', '/0')

官方文档注释：

string avatarUrl

用户头像图片的 URL。URL 最后一个数值代表正方形头像大小（有 0、46、64、96、132 数值可选，0 代表 640x640 的正方形头像，46 表示 46x46 的正方形头像，剩余数值以此类推。默认132），用户没有头像时该项为空。若用户更换头像，原有头像 URL 将失效