小程序登录退出
作者:互联网
小程序实现登录退出
最简单的方式
调用wx.getUserProfile()
WXML页面
<view wx:if="{{!userInfo}}">
<button bindtap="login">获取用户头像昵称</button>
</view>
<view wx:else class="userinfo">
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}"></image>
<text>{{userInfo.nickName}}</text>
<button bindtap="logout">退出登录</button>
</view>
WXSS页面
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 200rpx;
height: 200rpx;
border-radius: 50%;
}
JS页面
Page({
data: {
userInfo:''
},
login(){
wx.getUserProfile({
desc: '用于记录用户信息',
success:res =>{
console.log(res)
this.setData({
userInfo: res.userInfo
})
},
fail:res =>{
console.log("授权失败!",res)
}
})
},
logout(){
this.setData({
userInfo:''
})
}
})
缓存的读和写
wx.setStorageSync()
Page({
data: {
userInfo:''
},
onl oad() {
//取缓存
let userinfo = wx.getStorageSync('userInfo')
this.setData({
userInfo:userinfo
})
},
login(){
wx.getUserProfile({
desc: '用于记录用户信息',
success:res =>{
console.log(res)
//用户信息缓存到本地
wx.setStorageSync('userInfo', res.userInfo)
this.setData({
userInfo: res.userInfo
})
},
fail:res =>{
console.log("授权失败!",res)
}
})
},
logout(){
this.setData({
userInfo:''
})
wx.setStorageSync('userInfo', '')
}
})
标签:console,登录,res,页面,程序,userInfo,退出,setData,wx 来源: https://blog.csdn.net/weixin_59448473/article/details/121513061