微信小程序-授权登录退出与缓存

我们的项目开发多多少少的都会用到用户的一些信息，比如头像，昵称，性别等。而这些信息的获取，小程序也为我们提供好了方法。

1,认识wx.getUserProfile方法

对应的文档：https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserProfile.html 

2，授权弹窗

一般我的使用上面的wx.getUserProfile方法获取用户信息时，需要用户授权的。一般授权弹窗如下。

 只有用户点击允许以后才可以获取用户信息。

不弹起授权弹窗解决方案

有的同学用这个方法时，不会弹起上面的弹窗，有可能是因为基础库版本太低，这里建议升级到最新版的基础库。

3，登录成功

 

 

4，授权登录退出与缓存核心代码

wxml:

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

wxss:

.denglu{
  color: blue;
}
.root{
  display: block;
  justify-content:center;
  align-items: center;
}
.touxiang{
  width: 200rpx;
  height: 200rpx;
  border-radius: 100px;
  margin-top: 30rpx;
  margin-bottom: 10rpx;
  margin-left: 280rpx;
}
.nicheng{
  margin-left: 335rpx; 

  
}

js:

Page({
  data:{
    userInfo:""
  },
  onLoad(){
    let user=wx.getStorageSync('user')
    console.log("进入小程序的index页面获取缓存",user)
    this.setData({
      userInfo:user
    })
  },
  //登录
  login(){
    console.log("点击事件执行了")
    wx.getUserProfile({
      desc: '必须授权才可以继续使用',
      success:res=> {
        let user=res.userInfo
        //把用户信息缓存到本地
        wx.setStorageSync('user', user)
        console.log("授权成功",res.userInfo)
        this.setData({
         userInfo:res.userInfo
        })
      },
      fail:res=> {
        console.log("授权失败,请检查网络")
      }
    })
  },
  //退出登录
  loginOut(){
    this.setData({
      userInfo:""
     })
     wx.setStorageSync('user', null)
  }
})