微信小程序——用户登录,退出,缓存
- 官方API说明
- 文档地址
- 授权登录
- 设置缓存wx.setStorageSync(string key, any data)
- 查看
- 获取缓存any wx.getStorageSync(string key)
- 移除缓存 wx.removeStorageSync(string key)
- 1.最简单(不使用es6语法)
- 2.使用es6语法
- 3.简化es6和逻辑的登录
- 4.退出登录(使用es6+弹窗判断)
- 5.使用缓存技术实现保持登录状态以及登出清空缓存
- 清空缓存注意对应你设置的缓存名
官方API说明
文档地址
官方文档
授权登录
设置缓存wx.setStorageSync(string key, any data)
查看
如果你发现你有下图所示的说明设置缓存成功
获取缓存any wx.getStorageSync(string key)
移除缓存 wx.removeStorageSync(string key)
看名字就知道是移除缓存
1.最简单(不使用es6语法)
js">data: {
userName:"",
userhead:"",
judgeLogin:false
},
login:function(){
let that = this;
wx.getUserProfile({
desc: '授权登录',
success:function(res){
console.log("success",res.userInfo)
this.setData({
userName:res.userInfo.nickName,
userhead:res.userInfo.avatarUrl,
judgeLogin:true
})
},
fail:function(res){
console.log("fail")
}
})
}
2.使用es6语法
js">data: {
userName:"",
userhead:"",
judgeLogin:false
},
catchLogin(){
wx.getUserProfile({
desc: '授权登录',
success:res=>{
console.log("success",res.userInfo)
this.setData({
userName:res.userInfo.nickName,
userhead:res.userInfo.avatarUrl,
judgeLogin:true
})
},
fail:res=>{
console.log("fail")
}
})
},
3.简化es6和逻辑的登录
wxml中
<!--pages/user/user.wxml-->
<view class="user_info_wrap" >
<view class="user_img_wrap" wx:if="{{userinfo}}">
<image class="user_bg" src="{{userinfo.avatarUrl}}"></image>
<view class="user_info">
<image class="user_icon" src="{{userinfo.avatarUrl}}"></image>
<view class="user_name">{{userinfo.nickName}}</view>
</view>
</view>
<view class="user_btn" wx:else bindtap="catchLogin">
登录
</view>
</view>
js中
js">data: {
userinfo:''
},
catchLogin(){
wx.getUserProfile({
desc: '授权登录',
success:res=>{
console.log("success",res.userInfo)
this.setData({
userinfo:res.userInfo
})
},
fail:res=>{
console.log("fail")
}
})
},
4.退出登录(使用es6+弹窗判断)
js">Logout:function(){
if(this.data.userinfo){
wx.showModal({
cancelColor: 'cancelColor',
title:'是否确定退出',
success: res =>{
if(res.confirm){
console.log("用户确定退出");
this.setData({
userinfo:''
})
}else{
console.log("用户取消了退出")
}
}
})
}else{
wx.showModal({
cancelColor: 'cancelColor',
title:'您还未登录!',
success:function(res){
if(res.confirm){
console.log("用户未登录")
}
}
})
}
},
5.使用缓存技术实现保持登录状态以及登出清空缓存
清空缓存注意对应你设置的缓存名
js">wx.removeStorageSync('userDetails')
js">// pages/user/user.js
Page({
/**
* 页面的初始数据
*/
data: {
userinfo:''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad:function() {
let user = wx.getStorageSync('userDetails')
this.setData({
userinfo:user
})
},
catchLogin(){
wx.getUserProfile({
desc: '授权登录',
success:res=>{
let user = res.userInfo
console.log("success",user)
wx.setStorageSync('userDetails', user)
this.setData({
userinfo:user
})
},
fail:res=>{
console.log("fail")
}
})
},
Logout:function(){
if(this.data.userinfo){
wx.showModal({
cancelColor: 'cancelColor',
title:'是否确定退出',
success: res =>{
if(res.confirm){
console.log("用户确定退出");
this.setData({
userinfo:''
})
wx.removeStorageSync('userDetails')
}else{
console.log("用户取消了退出")
}
}
})
}else{
wx.showModal({
cancelColor: 'cancelColor',
title:'您还未登录!',
success:function(res){
if(res.confirm){
console.log("用户未登录")
}
}
})
}
},