一、需求
- 點擊【我的】，檢查是否有緩存：
- 如果有緩存數據，顯示已登錄狀態，從緩存數據中獲得用戶的微信頭像和微信名字。
- 如果無緩存，顯示默認頭像和“點擊登錄”文字。
- 點擊【我的】>【退出登錄】，清空緩存。
二、效果展示
三、代碼實現
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 })