关于微信小程序用户头像昵称获取规则调整后的头像昵称获取方式

一、背景

小程序用户头像昵称获取规则调整公告：小程序用户头像昵称获取规则调整公告 | 微信开放社区

二、案例

1、点击登录按钮

点击登录按钮，先去检查用户授权信息，会弹出用户授权弹窗（首次），用户点击同意授权之后，调用 wx.login 方法获取登录凭证（code），把code传给后端写的登录接口进行解析登录，这时候用户的头像和昵称可以根据具体项目的需求自己传一个默认的头像图片和昵称给后端登录接口进行初始化。

<view class="page-container">

  <view class="login-btn" bindtap="checkScope">授权用户信息</view>
  <view class="tip">若您没有账号，登录后会自动创建</view>

</view>

// 检查授权信息
checkScope() {
    // 获取授权设置信息
    wx.getSetting({
      success: (res) => {
        console.log(res)

        // 判断用户信息是否有授权
        if (!res.authSetting['scope.userInfo']) {
          // 获取授权
          wx.authorize({
            scope: 'scope.userInfo',
            success: (e) => {
              console.log('authorize: ', e)

              // 调用你们后端写的登录接口
              this.login()
            },
            fail: (err) => {
              console.log('authorize-err: ', err)
            }
          })
        } else {
          console.log('已授权')
          // 调用你们后端写的登录接口
          this.login()
        }
      },
      fail: (err)=> {
        console.log(err)
      }
    })
}

  // 登录
  login() {

    let _this = this;

    // 获取微信登录的code
    wx.login({
      success (e) {
        if (e.code) {

          // 请求后端写的登录逻辑接口
          // ......

        } else {
          wx.showToast({
            title: '登录失败！' + e.errMsg,
            icon: 'none',
            duration: 2000
          })
          console.log('登录失败！' + e.errMsg)
        }
      }
    })
    
  },

2、设置头像和昵称为微信账号的头像和昵称

button组件的 open-type 设置为 chooseAvatar，点击之后可以从bindchooseavatar回调中获取到用户头像信息。

input组件的 type 设置为 nickname，点击之后会出现昵称输入键盘，直接获取到昵称填写进去。

之后我们就可以把获取到的微信头像和昵称通过后端接口保存到用户信息里。

<view class="page-container">

  <view class="li">
    <text class="left">头像</text>
    <view class="right">
      <button
        class="box"
        open-type="chooseAvatar"
        bindchooseavatar="onChooseAvatar">
        <image class="avatar" src="{
   
   {avatarUrl}}"/>
      </button>
      
    </view>
  </view>

  <view class="li">
    <text class="left">昵称</text>
    <view class="right">
      <input type="nickname" value="{
   
   {userName}}" class="weui-input" placeholder="请输入昵称" bindinput="bindinput"/>
    </view>
  </view>

  <view class="submit-btn" bindtap="updateUserInfo">确定</view>

</view>

  // 获取微信昵称
  bindinput(e: any) {
    console.log('bindinput', e)
    this.setUserName(e.detail.value)
  },

  // 获取微信头像
  onChooseAvatar(e:any) {
    console.log(e)
    const { avatarUrl } = e.detail;

    // 把获取到的微信头像的图像文件上传到后端
    this.uploadImg(avatarUrl)
  },