微信小程序授权登录获取用户头像和昵称时得到微信用户，记录getUserInfo转变为getUserProfile的使用修改

首先，在微信官方更新授权操作之前，我们一直使用getUserInfo来获取微信用户的头像和昵称以及openid，这个可以参考我的上一篇博客（使用getUserInfo获取用户头像），但是微信官方弃用getUserInfo之后，我们获取头像相关信息和openid的信息就需要分两步进行。
1、获取openid的部分，采用云函数来进行获取，因为微信官方修改完获取用户信息api之后，wx.getUserProfile不能够获取openid的信息，但是后面如果我们需要对个人信息就行相关操作就需要openid。
设置一个云函数，这里名命为Login，具体内容如下所示：

const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
  const wxInfo = cloud.getWXContext()
  return {
    wxInfo
  }
}

在js文件中进行调用云函数，获取openid（获取头像的信息，也在这里先附加上，后面在单独拿出来说明）

var app = getApp()
const db = wx.cloud.database()
const userinfoList = db.collection('user')
Page({
  data: {
    userInfo: {},
    hasUserInfo: false,
    userlists: [],

  },

  onLoad: function () {
    let isfirst = wx.getStorageSync('userId')
    // console.log(isfirst.openid)
    //这个是在已经完成过一次授权之后再次登录直接加载openid信息，避免多次调用授权操作
    if (isfirst) {
      //Do something with return value
      userinfoList.where({
        //可以用这个获取openid，app.globalData.userInfo.openid，也可以用下面的方式
        _openid: isfirst
      }).get({
        success: res => {
          this.setData({
            userlists: res.data[0],
          })
        }
      })
    }
    //这里是直接读取第一次授权是设置的用户信息（头像、昵称）的缓存信息
    let user = wx.getStorageSync('userInfo')
    if (user) {
      this.setData({
        userInfo: user,
        hasUserInfo: true
      })
    }
  },
  getUserProfile(e) {
    wx.cloud.callFunction({
      name: 'Login',
      success: res => {
        wx.setStorageSync('userId', res.result.wxInfo.OPENID)
        userinfoList.where({
          _openid: res.result.wxInfo.OPENID
        }).get({
          success: res => {
            // console.log(res)
            this.setData({
              userlists: res.data[0]
            })
          }
        })
      }
    })
    wx.getUserProfile({
      desc: '用于完善会员资料',
      success: (res) => {
        // let user = res.userInfo
        // wx.setStorageSync('user', user)
        wx.setStorageSync('userInfo', res.userInfo)
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })

      }

    })
  }

})

2、获取微信用户头像、昵称信息，利用getUserProfile来替换之前的getUserInfo。

//用来获取用户头像、昵称信息
  getUserProfile(e) {
    wx.cloud.callFunction({
      name: 'Login',
      success: res => {
        wx.setStorageSync('userId', res.result.wxInfo.OPENID) //成功调用云函数Login获取得到openid，并利用setStorageSyns进行存储
        userinfoList.where({
          _openid: res.result.wxInfo.OPENID
        }).get({
          success: res => {
            // 根据openid将用户注册时所填写的一些信息设置出来
            this.setData({
              userlists: res.data[0]
            })
          }
        })
      }
    })
    //调用wx.getUserProfile获取用户头像昵称
    wx.getUserProfile({
      desc: '用于完善会员资料',
      success: (res) => {
        wx.setStorageSync('userInfo', res.userInfo)
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })

      }

    })
   }

3、这里在附上我用来展示用户信息的页面代码（我这里用了vant组件，详细用法可见之前的博客微信小程序利用vant组件进行快速开发）
user-info.wxml

<view class="userinfo">
  <button wx:if="{{!hasUserInfo}}" bindtap="getUserProfile" class="userinfo-btn"> 点击微信授权 </button>
  <block wx:else>
    <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </block>
</view>
<van-cell-group>
  <van-cell title="学号" value="{{userlists.name}}" />
  <van-cell title="电话" value="{{userlists.phone}}" />
  <van-cell title="积分" value="{{userlists.score}}" />
</van-cell-group>

user-info.wxss

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  background:  #b3d4db;
   width: 100%; 
  height: 300rpx;
}
.userinfo-btn{
  margin-top: 50rpx;
  background: none !important;
  color: #fff !important;
  font-size: 40rpx;
}
.account-bg {
  width: 100%;
  height: 150rpx;
}
.userinfo-avatar {
  width: 108rpx;
  height: 108rpx;
  margin: 40rpx;
  border-radius: 50%;
}
.userinfo-nickname {
  color: #fff;
}

user-info.json

{
  "usingComponents": {
    "van-cell": "../../vant/cell/index",
    "van-cell-group": "../../vant/cell-group/index"
  },
  "navigationBarBackgroundColor": "#b3d4db",
  "navigationBarTitleText": "个人中心"
}

个人中心页面展示，授权之前会有按钮显示，这里就不再展示了，直接拷贝上面代码就可以看到效果。

仅以此篇作为微信小程序用户授权信息获取的补充。