小程序获取头像昵称最新版本

由于之前用到的微信小程序授权登录的接口已经被更新升级，
官方文档
我的实现方式是先在页面上留出头像的位置，点击头像会弹出微信官方文档给出的获取头像和昵称的弹窗，选择当前微信头像或者手机相册的照片后获取到选择的照片，提交之后页面上的默认头像变为所选择的图片。
以下是具体代码：
wxml：

<view class="details">
        <view class="userinfo-avatar">
          <!-- <open-data type="userAvatarUrl"></open-data> -->
          <image class="avatar" src="{{avatarUrl}}" mode="cover" bindtap="getInfo" />
        </view>
        <view class="nikeName">
          <!-- <open-data type="userNickName"></open-data> -->
          <input type="nickname" class="weui-input" name="nickname" />
        </view>
      </view>

<!--遮罩层  -->
    <view class="shade" wx:if="{{shows}}" bindtap='close'></view>
    <!--弹出面板区域  -->
    <view class="cont" data-weui-theme="{{theme}}" wx:if="{{shows}}">
      <button class="avatar-wrapper" open-type="chooseAvatar" bindchooseavatar="onChooseAvatar">
        <image class="avatar" src="{{avatarUrl}}"></image>
      </button>
      <form catchsubmit="formSubmit">
        <view class="row">
          <view class="text1">昵称：</view>
          <input type="nickname" class="weui-input" name="nickname" placeholder="请输入昵称" />
        </view>
        <button type="primary" style="margin-top: 40rpx;margin-bottom: 20rpx;" form-type="submit" bindtap='close'>提交</button>
      </form>
    </view>

wxss：

.userinfo-avatar {
  overflow: hidden;
  width: 56px;
  height: 56px;
  border-radius: 50%;
}
.details {
  width: 380px;
  height: 100px;
  display: flex;
  align-content: center;
  margin-left: 10px;
}

.nikeName {
  margin: 30px 0px 0px 20px;
}
.
avatar-wrapper {
  padding: 0;
  width: 56px !important;
  border-radius: 8px;
  margin-top: 40px;
  margin-bottom: 40px;
  background-color: #fff;
}

.avatar {
  display: block;
  width: 56px;
  height: 56px;
}

.container {
  display: flex;
}
.row{
   border-top: 1px solid #ccc;
   border-bottom: 1px solid #ccc;
   display: flex;
   align-items: center;
   height: 80rpx;
   padding-left: 20rpx;
}
.text1{
    flex: 2;
}
.weui-input{
    flex: 6;
}

.shade{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: rgba(0,0,0,0.8);
  opacity: 0.9;
  overflow: hidden;
}   

.cont {
   width: 70%;
   height: 260px;
   z-index: 2;
   overflow: hidden;
   position: fixed;
   bottom: 30%; 
   font-size: 32rpx; 
   border-radius: 10rpx; 
   background-color: #fff;
}  

js:

const app = getApp()
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'

Page({
  data: {
    avatarUrl: defaultAvatarUrl,
    theme: wx.getSystemInfoSync().theme,
    userInfo: {},
  },

  onLoad() {
    console.log("进入小程序")
    let user = wx.getStorageSync('userInfo')
    console.log("获取到的缓存", user)
    wx.onThemeChange((result) => {
      this.setData({
        theme: result.theme
      })
    })
    this.setData({
      userInfo: user
    })
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },

  onShow: function () {
    //获取用户的本地缓存数据，userinfo信息是在用户授权登录时保存的
    var n = wx.getStorageSync("userinfo");
    //当本地缓存的用户名称不为""或者null时，设置userinfo信息
    if (n.nickName != '' && n.nickName != null) {
      this.setData({
        userinfo: n,
        hasUserInfo: true,
        canIUseGetUserProfile: true
      })
      // 通过wx.login获取登录凭证（code），然后通过code去获取我们用户的openid
      wx.login({
        success: (res) => {
          console.log(res);
        },
      })
    }
    //清空缓存信息，测试使用
    // wx.removeStorage({
    //     key: 'userinfo',
    // });
  },
  onChooseAvatar(e) {
    const { avatarUrl } = e.detail 
    this.setData({
      avatarUrl,
    })
  },
  formSubmit(e){
      console.log('昵称：',e.detail.value.nickname)
  },

  getInfo: function () {
    this.setData({
      shows: true,
    })
  },

  close: function () {
    this.setData({
      shows: false,
    })
  },
})