wx.getUserProfile does not appear pop-up window

background

Use wx.getUserProfile to get user information, but the user information is directly obtained without pop-up window, and returns gray avatar, and "WeChat user" nickname

reason

It turns out that this interface was recycled in May 2022, and the lower version of the debugging library will display normally, while the higher version will return the gray avatar and the default "WeChat user" nickname

solve

My solution is to manually add a permission pop-up window

Authorization popup

async signupAndLogin() {            //bindtap事件
    wx.showModal({                     //手动授权弹窗
      title: '授权登录提示',
      content: '是否允许授权？',
      showCancel: true,
      confirmText: '允许',
      confirmColor: '#669F76',
      cancelColor: '#CC463D',
      success: async res => {
        if (res.confirm) {     //用户确认
          const { userInfo: { nickName, avatarUrl } } = await
            wx.getUserProfile({    //获取用户信息，最新版本已不支持弹窗
              desc: '用户授权',
            })

          let { result } = await wx.cloud.callFunction({  // 调用云函数
            name: 'loginOrSignup',
            data: {
              nickName,
              avatarUrl
            }
          })
          this.setData({ userInfo: result })
          getApp().globalData.userStatus = true   //用于检查用户是否登录的全局变量
        } else if (res.cancel) {     //用户取消
          wx.showToast({
            title: '取消授权',
            mask: true,
            icon: 'error'
          })
        }
      }
    })
  },

loginOrSignup cloud function

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) // 使用当前云环境
const db = cloud.database()
// 云函数入口函数
exports.main = async (event, context) => {
  const { OPENID } = cloud.getWXContext()
  const { nickName, avatarUrl } = event
  const user_clct = db.collection('user')

  const { data } = await user_clct.where({    //查询用户是否存在
    _openId: OPENID
  }).get()

  if (data.length === 0) {                     //如果用户不存在，添加用户
    let user = await user_clct.add({
      data: {
        nickName,
        avatarUrl,
        _openId: OPENID
      }
    })
    return {
      nickName,
      avatarUrl,
      _openId: OPENID
    }
  } else {
    return data[0]       //如果用户存在，返回该用户信息
  }
}

Choose Avatar

<button class="chooseAvatar" open-type="chooseAvatar" bindchooseavatar="chooseAvatar" plain="ture" style="width: 160rpx; border: none;color: #6e6e6e;">
<image class="userAvatar" src="{
    
    {userInfo.avatarUrl}}"></image>
</button>
主要是open-type属性，chooseAvatar是固定参数之一，用于拉起选择头像菜单

async chooseAvatar(e: any) {                //用户更换头像
    //e.detail 已经是 avatarUrl："..."的格式
    let { avatarUrl } = e.detail

    wx.cloud.callFunction({
      name: 'uploadAvatar',
      data: {
        avatarUrl
      },
      success: async res => {
        let { result } = await wx.cloud.callFunction({  // 调用登录云函数，不传参，用以更新页面中的用户信息
          name: 'loginOrSignup',
        })
        this.setData({ userInfo: result })
      }
    })
  },

uploadAvatar, update avatar

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) // 使用当前云环境
const db = cloud.database()
// 云函数入口函数
exports.main = async (event, context) => {
  const { OPENID } = cloud.getWXContext()
  const { avatarUrl } = event
  try {
    db.collection('user').where({
      _openId: OPENID
    }).update({
      data: {
        avatarUrl
      },
      success:res=>{
        return avatarUrl
      }
    })
  } catch (err) {
    return err
  }
}