微信小程序云开发-缓存

一、需求

点击【我的】，检查是否有缓存：
- 如果有缓存数据，显示已登录状态，从缓存数据中获得用户的微信头像和微信名字。
- 如果无缓存，显示默认头像和“点击登录”文字。

点击【我的】>【退出登录】，清空缓存。

二、效果展示

三、代码实现

1、me.wxml

 1 <!--未登录-->
 2 <view class="load" wx:if="{{!loginOk}}">
 3 <image src="../../images/我的.png" bindtap="load"></image>
 4 <text class="clickload" bindtap="load">点击登录</text>
 5 </view>
 6 <!--已登录-->
 7 <view wx:else>
 8 <view class="load" >
 9 <image src="{{avatarUrl}}" ></image>
10 <text class="clickload" >{{nickName}}</text>
11 </view>
12 <button class="exit" bindtap="exit" type="primary">退出登录</button>
13 </view>

2、me.wxss

 1 .load{
 2   background-color:#04BE02;
 3   width: 100%;
 4   height: 400rpx;
 5   /*设置图片和文字垂直居中对齐*/
 6   display: flex;
 7   flex-direction: column;
 8   justify-content: center;
 9   align-items: center;
10 }
11 
12 .load image{
13   width: 200rpx;
14   height: 200rpx;
15   border-radius: 50%;
16 }
17 .load text{
18   color:white;
19 }
20 .exit{
21   width: 95%;
22   margin-top: 40rpx;
23 }

3、me.js

 1   
 2 Page({
 3 
 4   /**
 5    * 页面的初始数据
 6    */
 7   data: {
 8     loginOk:true,
 9     nickName:"",
10     avatarUrl:"",
11   },
12 
13   //页面加载的时候，将load页面传过来的值获取过来
14   onLoad: function (options) {
15     console.log("这里的options",options);
16     this.setData({
17       nickName:options.nickName,
18       avatarUrl:options.avatarUrl
19     })
20   },
21 
22   //小程序声明周期的可见性函数里面来控制显示
23   onShow(){
24     let userInfo = wx.getStorageSync('userInfo')
25     console.log("我的缓存信息",userInfo);
26     if(userInfo){
27       this.setData({
28         loginOk:true,
29         nickName:userInfo.nickName,   //从缓存中拿数据
30         avatarUrl:userInfo.avatarUrl
31       })
32     }else{
33       this.setData({
34         loginOk:false
35       }) 
36     }
37   },
38 
39   //点击登录
40   load(){
41     wx.navigateTo({
42       url: '/pages/load/load',
43     })
44   },
45 
46   //退出登录
47   exit(){
48     wx.showModal({
49       content:"确定退出吗"
50     }).then(res=>{
51       if(res.confirm){
52       console.log("用户点击了确定");
53       this.setData({
54         loginOk:false
55       })
56       //清空登录的缓存
57       wx.setStorageSync('userInfo', null)
58       }else if(res.cancel){
59         console.log("用户点击了取消");
60       }
61     })
62   },
63  
64 })

微信小程序云开发-缓存

推荐阅读