小程序微信授权登录

wxml

<button wx:if="{
   {!userInfo}}" bindtap="login">授权登录</button>
<view wx:else class="root">
 <image class="touxiang" src="{
   {userInfo.avatarUrl}}"></image>
 <text class="nickcheng">{
   {userInfo.nickName}}</text>
 <button bindtap="loginOut">退出登录</button>
</view>

js 

Page({
  // 2021.11.15日新加
  data:{
    userInfo:''
  },
  onLoad(){
    let user=wx.getStorageSync('user')
    console.log('进入小程序的index页面获取缓存',user)
    this.setData({
      userInfo:user
    })
  },
 //授权登录
  login(){
    wx.getUserProfile({
      desc:'必须授权才可以继续使用',
      success:res=>{
        let user=res.userInfo
        //把用户信息进行缓存到本地
        wx.setStorageSync('user', user)
        console.log('用户信息',res.userInfo)
        this.setData({
          userInfo:user
        })
      },
      fail:res=>{
        console.log('授权失败',res)
      }
    })
  },
  //退出登录
  loginOut(){
    this.setData({
      userInfo:''
    })
    wx.setStorageSync('user', null)
  }
})

wxss

.root{
  display:flex;
  flex-direction: column;
  align-items: center;
}
.touxiang{
  width:200rpx;
  height:200rpx;
  border-radius: 50%;
  margin-top: 30rpx;
  margin-bottom: 10rpx;
}