微信隐身昵称代码-微信logo头像新旧版本

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情

最近在写一个小程序，里面需要授权用户的头像和昵称，突然发现以前老版的写法不能使用，没办法只能根据最新规则，按照文档一步步来开发啦（这个过程实属坎坷）。本文就从新旧两个版本来介绍一下微信授权用户头像和昵称的用法，

背景说明

刚接手的项目，有一天突然发现微信授权用户头像和昵称不能用了，页面的昵称显示的微信用户。看了一下代码发现用的是wx.getUserProfile()授权，我这一想没毛病呀，然后查阅文档才知道，微信又改规则了，于是，只能唉，打工人打工名，还是老老实实按照文档来开发吧，具体通告内容可以点击链接查看。

大概意思就是说2.27.1版本开始，不支持以前的wx.getUserProfile 接口和wx.getUserInfo接口，需要使用最新的头像昵称填写功能

旧版的用户头像和昵称的授权1. wx.getUserProfile1.1 支持版本

支持2.10.4~2.27.0版本，如果需要兼容更低版本或者更低版本，则需要比较版本然后进行适配。

1.2 用法

获取用户信息。页面产生点击事件（例如 button 上 bindtap 的回调中）后才可调用微信隐身昵称代码，每次请求都会弹出授权窗口，用户同意后返回 userInfo。该接口用于替换 wx.getUserInfo。

具体用法如下：

1.2.1 原生写法

class="container">
  <view class="userinfo">
    <block wx:if="{{!hasUserInfo}}">
      <button bindtap="getUserProfile"> 获取头像昵称 button>
    block>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover">image>
      <text class="userinfo-nickname">{{userInfo.nickName}}text>
    block>
  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
        })
      }
    })
  }
})
复制代码

1.2.2 mpvue用法

"userWxdata.avatarUrl || userDefaultHead" class="img-head" @click="getUserImg"/>
getUserImg () {
  wx.getUserProfile({
    desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
    success: (res) => {
      this.userWxdata = res.userInfo
    }
  })
}
复制代码

1.3 注意事项

需要注意的是不管采用的是哪种方式，都是从回调函数res.userInfo里面获取用户的头像和昵称信息，如下：

其中用户头像是临时文件的路径，在开发者工具中是'https://'开头的文件，但是在真机上是'wxfile://'开头的，对于这种文件需要使用wx.upload上传到后台服务器或者云服务器上。

2. wx.getUserInfo

现在这个接口自2021年4月13日起微信隐身昵称代码，getUserInfo将不再弹出弹窗，并直接返回匿名的用户个人信息，这种方式不推荐使用。

getUserInfo(e) {
  this.setData({
    userInfo: e.detail.userInfo,
  })
}
复制代码

新版的用户头像和昵称的授权1. 支持版本

从基础库2.21.2开始支持，对于大部分微信用户来说基本上已经支持，如果需要兼容低版本的用户，建议做一下适配

2. 用法2.1 原生组件

class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
  <image class="avatar" src="{{avatarUrl}}">image>
 
<input type="nickname" class="weui-input" placeholder="请输入昵称"/>
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
Page({
  data: {
    avatarUrl: defaultAvatarUrl,
  },
  onChooseAvatar(e) {
    const { avatarUrl } = e.detail 
    this.setData({
      avatarUrl,
    })
  }
})
复制代码

2.2 mpvue

class="avatar-wrapper img-head" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
  class="img-head new-img" :src="userWxdata.avatarUrl || userDefaultHead" />

"nickname" class="input-wrapper" v-model="userWxdata.nickName" placeholder="请输入昵称" @change="changeNickName($event)" v-if="isNewVersion"/>
onChooseAvatar (e) {
  const { avatarUrl } = e.mp.detail
},
changeNickName (e) {
  this.userWxdata.nickName = e.mp.detail.value
},
复制代码

2.3 注意事项

使用mpvue获取到的头像和昵称都是被mp对象包裹了一层，因此在拿到值的时候需要多取一层

获取昵称的时候如果是自定义输入昵称

在onBlur 事件触发时，微信将异步对用户输入的内容进行安全监测，若未通过安全监测，微信将清空用户输入的内容，也就是nickname的内容是“”，如果onBlur时间里面有相关的逻辑是是会报错的。文档上说的建议开发者通过 form 中form-type 为submit 的button 组件收集用户输入的内容。我在实际开发的时候是绑定一个change事件，根据change事件里面的事件对象拿到昵称值，这里也需要注意mpvue也是会多包一层的。

同上面一样，其中用户头像是临时文件的路径，在开发者工具中是‘’开头的文件，但是在真机上是‘wxfile://’开头的，对于这种文件需要使用wx.upload上传到后台服务器或者云服务器上。

wx.uploadFile({
  url: `${appConfig.baseHost}/h5/member/user/uploadImg`,
  filePath: url,
  name: 'file',
  success (res) {
    console.log('图片上传成功回调', res)
    let response = JSON.parse(res.data)
    console.log('response', response)
  },
  fail (err) {
    console.log('图片上传失败回调', err)
  }
})
复制代码

一定要注意将本地文件上传到服务端需要使用二进制文件，后端接口需要保持一致的参数处理才行。wx.uploadFile的参数如下

2.4 适配方案

2.4.1. 获取当前微信用户的基础库的版本

compareVersion (v1, v2) {
  v1 = v1.split('.')
  v2 = v2.split('.')
  const len = Math.max(v1.length, v2.length)
  while (v1.length < len) {
    v1.push('0')
  }
  while (v2.length < len) {
    v2.push('0')
  }
  for (let i = 0; i < len; i++) {
    const num1 = parseInt(v1[i])
    const num2 = parseInt(v2[i])
    if (num1 > num2) {
      return 1
    } else if (num1 < num2) {
      return -1
    }
  }
  return 0
}
isNewVersion () {
  const { SDKVersion } = wx.getSystemInfoSync()
  const res = compareVersion(SDKVersion, '2.21.2')
  return res === 1
}
复制代码

2.4.2 2.21.2之后的版本采用新的方案, 2.21.2之前的版本采用wx.getUserProfile方案

class="avatar-wrapper img-head" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" v-if="isNewVersion">
  class="img-head new-img" :src="userWxdata.avatarUrl || userDefaultHead" />

"userWxdata.avatarUrl || userDefaultHead" class="img-head" @click="getUserImg" v-else/>
"nickname" class="input-wrapper" v-model="userWxdata.nickName" placeholder="尊敬的金斧子会员" @change="changeNickName($event)" v-if="isNewVersion"/>
class="input-wrapper" @click="getUserImg" v-else>{{userWxdata.nickName || '尊敬的金斧子会员'}}
复制代码

onChooseAvatar (e) {
  const { avatarUrl } = e.mp.detail
},
changeNickName (e) {
  this.userWxdata.nickName = e.mp.detail.value
},
getUserImg () {
  wx.getUserProfile({
    desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
    success: (res) => {
      this.userWxdata = res.userInfo
    }
  })
}
复制代码

2.4.3 注意：头像文件是一个临时文件，记得上传到后台服务器或者云服务器上

wx.uploadFile({
  url: `${appConfig.baseHost}/h5/member/user/uploadImg`,
  filePath: url,
  name: 'file',
  success (res) {
    console.log('图片上传成功回调', res)
    let response = JSON.parse(res.data)
    console.log('response', response)
  },
  fail (err) {
    console.log('图片上传失败回调', err)
  }
})
复制代码