About the method of obtaining avatar and nickname after the adjustment of the WeChat mini-program user avatar and nickname acquisition rules

1. Background

Announcement on Adjustment of the Rules for Obtaining Mini Program User Avatar and Nickname: Announcement on Adjustment of the Rules for Obtaining Mini Program User Avatar and Nickname | WeChat Open Community

 

Second, the case

1. Click the login button

Click the login button to check the user authorization information first, and the user authorization pop-up window (for the first time) will pop up. After the user clicks to agree to the authorization, the wx.login method is called to obtain the login credential (code), and the code is passed to the login interface written by the backend Parse the login. At this time, the user's avatar and nickname can be initialized by passing a default avatar picture and nickname to the back-end login interface according to the needs of the specific project.

<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. Set the avatar and nickname as the avatar and nickname of the WeChat account

The open-type of the button component is set to chooseAvatar, and the user avatar information can be obtained from the bindchooseavatar callback after clicking.

The type of the input component is set to nickname. After clicking, a nickname input keyboard will appear, and the nickname can be directly obtained and filled in.

After that, we can save the obtained WeChat profile picture and nickname to the user information through the backend interface.

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