先看效果

wxml代码

<!-- //////////////////////////////////////////////////////////////////////////新版本获取用户微信头像和昵称 -->
<view style="margin: 100px 0 0 0;background-color: #00000096;position: fixed;top: 0;width: 100%;height: 100%;z-index: 99999;display: flex;align-items: center;justify-content: center;">
  <view wx:if="{{show_get_avatar}}" style="background-color: #fff;border-radius: 20rpx;width: 75%;padding: 3%;">
    <view style="display: flex;justify-content: center;font-size: 32rpx;font-weight: 800;">授权微信登录</view>
    <view style="height: 20rpx;"></view>
    <view style="display: flex;justify-content: center;font-size: 28rpx;width: 80%;margin: 0 0 0 10%;">为了完善用户个人信息，我们需要获取您的微信头像和昵称</view>
    <view style="height: 20rpx;"></view>
    <button wx:if="{{!show_get_nickname}}" open-type="chooseAvatar" bindchooseavatar="get_avatar" style="font-size: 25rpx;background-color: #00810b;color: #fff;">点击授权头像</button>
    <view style="height: 20rpx;"></view>
    <view style="display: flex;justify-content: center;">
      <image wx:if="{{show_get_nickname}}" src="{{avatar}}" style="width: 80rpx;height: 80rpx;border-radius: 50%;"></image>
    </view>
    <view style="height: 20rpx;"></view>
    <form bindsubmit="get_nackname_form">
      <view style="display: flex;justify-content: center;align-items: center;">
        <input wx:if="{{show_get_nickname}}" type="nickname" bindtap="get_nickname" placeholder="点击授权昵称" name="nickname" style="text-align: center;width: 48%;font-size: 25rpx;background-color: #00810b;color: #fff;border-radius: 10rpx;height: 60rpx;" placeholder-style="color:#fff;font-weight:800;text-align: center;"></input>
      </view>
      <view style="height: 20rpx;"></view>
      <view style="display: flex;width: 90%;margin: 0 0 0 5%;">
        <button style="font-size: 25rpx;">不登录</button>
        <view style="width: 20rpx;"></view>
        <button formType="submit" style="font-size: 25rpx;background-color: #009aa5;color: #fff;">立即登录</button>
      </view>
    </form>
  </view>
</view>
<!-- //////////////////////////////////////////////////////////////////////////新版本获取用户微信头像和昵称 -->

js代码

//////////////////////////////////////////////////////////////////////////新版本获取用户微信头像和昵称
  get_avatar(e){
    console.log(e.detail.avatarUrl)
    this.setData({
      show_get_nickname:1,
      avatar:e.detail.avatarUrl,
    })
  },
  get_nackname_form(e){
    console.log(e.detail.value)
    if(e.detail.value.nickname==""||!this.data.avatar){
      console.log("请授权")
      wx.showToast({
        title: '请授权头像和昵称',
        icon: 'none',
        duration: 1000
      })
    }else{
      var user_info={
        avatar:this.data.avatar,
        nickname:e.detail.value.nickname
      }
      wx.setStorageSync('user_info', user_info)
      console.log(wx.getStorageSync('user_info'))
    }
  }
//////////////////////////////////////////////////////////////////////////新版本获取用户微信头像和昵称

给个关注么么哒~~，接小程序开发，大家一起讨论技术~~