关于#微信小程序#的#获取用户头像#问题，如何解决？

Question

微信小程序获取用户头像时页面下方提示框空白的问题

• 图片如下:

求问为什么下方红圈部分什么提示语都没有

附上具体代码：

• wxml:

<view class="getUsersinfo">
    <image class="avatar" src="{{avatarUrl}}"></image>
    <button class="getUsersAvatar" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">点击获取用户头像</button>
    <view class="name">
        <text class="usersName">昵称</text>
        <input class="getUsersName" type="nickname" placeholder="请输入昵称" />
    </view>
</view>

• wxss:

.getUsersinfo{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  
}
.getUsersAvatar{
    font-weight: bold;
    width: 700rpx;
}
.name{
    display: flex;
    flex-direction: row;
    background-color: aliceblue;
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    width: 700rpx;
}
.getUsersName{
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
}
.usersName{
    width: 100rpx;
}
.avatar{
    height: 150rpx;
    width: 150rpx;
    border-radius: 50%;
}

js:

const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    avatarUrl: defaultAvatarUrl,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  onChooseAvatar(event) {
    console.log("用户头像地址为：",event.detail.avatarUrl);
    const avatarUrl = event.detail.avatarUrl;
    this.setData({
      avatarUrl,
    })
  },

Answer 1

是不是因为在获取头像前没有先使用 wx.getUserInfo 接口获取用户授权信息导致的。

使用 wx.getUserInfo 接口获取用户信息之前，先调用 wx.getSetting 接口获取用户的授权状态。

如果用户未授权，需要调用 wx.authorize 接口进行授权。

wx.getSetting({
  success(res) {
    if (!res.authSetting['scope.userInfo']) {
      wx.authorize({
        scope: 'scope.userInfo',
        success() {
          // 用户已经同意小程序使用用户信息
          wx.getUserInfo({
            success(res) {
              console.log(res.userInfo)
            }
          })
        }
      })
    } else {
      // 用户已经授权过
      wx.getUserInfo({
        success(res) {
          console.log(res.userInfo)
        }
      })
    }
  }
})