最近在学习微信小程序，学到授权登录这里，做个笔记记录一下。
我们使用的工具是微信开发者工具，我们创建一个项目，项目结构如图所示：
我们先准备好我们的index.wxml文件，代码如下：
<button wx:if="{{!userInfo}}" bindtap="login">授权登录</button>
<view wx:else class="root">
<image class="touxiang" src="{{userInfo.avatarUrl}}"></image>
<text class="nicheng">{{userInfo.nickName}}</text>
<button bindtap="loginOut">退出登录</button>
</view>
以上代码先判断是否有用户记录，如果没有，就显示授权登录按钮，否则就显示我们的用户信息
然后我们先修改一下我们的组件的样式，我们打开index.wxss，修改代码如下：
.root{
display: flex;
flex-direction: column;
align-items:center;
}
.touxiang{
width:200rpx;
height:200rpx;
border-radius:50%;
margin-top:30rpx;
margin-bottom:10rpx;
}
然后我们进入index.js文件，修改代码如下：
Page({
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('用户信息',user)
this.setData({
userInfo:user
})
}
})
},
//退出登录
loginOut(){
this.setData({
userInfo:''
})
wx.setStorageSync('user',null)
}
})
我们点击编译，再点击模拟器，因为一开始没有缓存，所以显示授权按钮
点击授权登录
再点击允许
现在有缓存了，我们再次点击编译，因为有本地缓存，所以直接进入上面的页面，不需要重新授权登录，我们再点击退出登录
点击退出登录后，缓存也会被清空，下次使用小程序时，就要重新授权登录
