持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第7天，点击查看活动详情

获取用户信息Api

• 微信小程序专门为开发者设置了一个Api用来获取用户信息，之前是 wx.getUserInfo(Object object)，但我们打开微信开发者文档，找到getuserinfo可以看到，用户头像昵称获取规则已经调整了，当前用来获取用户头像昵称的Api为 wx.getUserProfile(Object object)

• 使用getUserInfo

1. my.js 在my.js文件中写上如下代码，以下为用户授权登录的js代码，调用了小程序开发者文档中的getUserInfo的API接口，并且使用了 wx.setStorageSync将用户的信息储存在本地，使得用户一次登录了之后下次登录时不需要再次授权，提高了用户的体验感。

  login(){
    wx.getUserProfile({
      success:res=>{
        wx.setStorageSync('user', user)
        this.setData({
          userInfo:user
        })
      }
    })
  }

2.my.wxml

在my.wxml中写上如下代码，以下代码可以将js中获取用户昵称头像渲染到我们的页面上去，里面涉及一些wx:if的逻辑判断，若用户未登录，则显示“点击按钮授权登录”，若用户已经登录则显示按钮“退出登录”

<button wx:if="{{!userInfo}}" bindtap="login">授权登录</button>
<image src="{{userInfo.avatarUrl}}"></image>
</view>

3. my.wxss

在my.wxss中写上如下代码，以下代码是将页面上用户的头像，授权登录的按钮，退出登录的按钮美化的，里面有一些让数据垂直居中展示，按钮的美化等等。

.root{
  display: flex;
  flex-direction: column;
  align-items: center;
}

至此，我们的用户授权登录的功能就实现完成了，总体来说，退出登录的完成登录所展示的内容时不一样的，展示效果如下图