微信小程序开发--1.8授权用户头像和昵称

wxml文件代码如下：

<view class="flex upper" style="z-index:10;position:fixed;top:0;width:100%;height:104rpx;background-color:#A6AEDF;color:#fff;">
    <text style="margin-left:34rpx;margin-top:30rpx;margin-bottom:28rpx;font-size:36rpx;font-family:'Noto Sans SC';font-weight:bold;">授权用户信息</text> 
</view>
<view class="grid" style="padding-top:104rpx;background-color:#FCFAFA;height:{{mainPageHeight}}px;">
  <form>
    <view>
    <text style="margin-top:140rpx;margin-left:40rpx;color:#6F75AF;position:absolute;">头像</text>
    <button style="background-color:#FCFAFA;top:100rpx;margin-left:320rpx;width:116rpx;height:116rpx;padding:0;" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
      <image class="avatar xl round" src="{{avatarUrl}}" style="background-color:#C5CBED;top:0rpx;width:116rpx;height:116rpx;"></image>
    </button>
    </view>
    <view>
    <text style="margin-top:140rpx;margin-left:40rpx;color:#6F75AF;position:absolute;">昵称</text>
    <input type="nickname" class="nickname-input" adjust-position="{{false}}"
      bindchange="changeNickeNameInput" model:value="{{nickName}}"
      placeholder="请输入昵称" placeholder-style="line-height:116rpx;text-align:center;width:auto;color:#6F75AF;padding:0;font-size:30rpx;background-color:#FCFAFA;" style="line-height:116rpx;text-align:center;position:absolute;margin-top:138rpx;margin-left:200rpx;width:auto;color:#6F75AF;padding:0;font-size:30rpx;background-color:#FCFAFA;"/>
    </view>
    <button class="padding cu-btn round bg-cyan" style="left:80rpx;width:590rpx;height:72rpx;bottom:74rpx;background-color: #A6AEDF;position:absolute;color:#fff;" bindtap="newUserInfo">提交信息</button>
  </form>
</view>

js文件代码如下：

var app = getApp()
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
Page({
  avatarUrl: defaultAvatarUrl,
  /**
   * 页面的初始数据
   */
  data: {
    avatarUrl:"",
    canSaveUser:false,
    nickName:'',
    userInfo:"",
    cardLevel : 1, 
    hasUserInfo :false,
    isAdmin:false,
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    canIUseGetUserProfile: false,
    canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName'), // 如需尝试获取用户信息可改为false
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    if (wx.getUserProfile) {
        this.setData({
          canIUseGetUserProfile: true
        })
      }
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () { 
    this.getDeviceInfo()
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  }, 

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }, 

  CardTabSelect(e){ 
    this.setData({
        CardTabIndex: e.currentTarget.dataset.id,
        scrollLeft: (e.currentTarget.dataset.id - 1) * 60
      })
  } ,

  onChooseAvatar(e) {
    const { avatarUrl } = e.detail 
    this.setData({
      avatarUrl,
    })
    },

  getDeviceInfo(){
    console.log(wx.getWindowInfo()) 
    var windowInfo =  wx.getWindowInfo() 
    console.log(windowInfo) 
    console.log(windowInfo['windowHeight'])  
    var windowHeight = windowInfo['windowHeight']   
    var windowWidth =  windowInfo['windowWidth']    
    var rpxRate =   windowWidth / 750                  
    var upperZoneHeightRpx = 0     
    var mainPageHeight =   windowHeight -  (upperZoneHeightRpx  * rpxRate)   
    this.setData({
        windowHeight : windowHeight,
        mainPageHeight : mainPageHeight 
    })     
   } ,

   setUserName(e) {
    this.setData({
        name: e.detail.value
    })
   }, 

   newUserInfo(){
    var avatarUrl = this.data.avatarUrl;
    var nickName = this.data.nickName;
    if (avatarUrl == '') {
        wx.showModal({
            title: '提示',
            content: '请选择头像',
            showCancel: false
        })
    } else if (nickName == '') {
        wx.showModal({
            title: '提示',
            content: '请输入昵称',
            showCancel: false
        })
    }else { 
            var userInfo={
                'avatarUrl':avatarUrl,
                'nickName':nickName
            }
            wx.setStorageSync('userInfo', userInfo)
            wx.setStorageSync('hasUserInfo', true)
            wx.showModal({
                title: '提示',
                content: '上传成功',
                showCancel: false
            })
            wx.navigateBack({
                delta: 1
              });
    }
   },

   changeNickeNameInput(e){
    this.observerCanSaveUser();
 },

 observerCanSaveUser(){
    if(this.data.nickName && String(this.data.nickName).trim() && this.data.avatarUrl){
       this.setData({
          canSaveUser:true
       })
   }else{
      this.setData({
        canSaveUser:false
      })
   }
  }
})