一、功能需求
- 未登录和登录界面区别显示
- 点击授权登录，获取用户授权
- 登录成功后，将个人信息存入缓存
- 点击已登录成功后用户的微信头像，弹出退出登录
- 退出登录后，清空缓存
- 页面在onShow的时候，判断是否有缓存，优先从缓存获取信息
二、代码实现
1、me.wxml
1 <!-- 个人信息展示 --> 2 <!-- 未登录 --> 3 <view class="login" wx:if="{{!loginOK}}" bindtap="login"> 4 <image src="/images/me.png"></image> 5 <text>授权登录</text> 6 </view> 7 <!-- 已登录 --> 8 <view class="login" wx:if="{{loginOK}}" bindtap="exit"> 9 <image src="{{avatarUrl}}"></image> 10 <text>{{nickName}}</text> 11 </view> 12 <!-- 服务条目 --> 13 <view wx:if="{{loginOK}}"> 14 <view class="item"> 15 <text>我的订单</text> 16 <image src="/images/right.png"></image> 17 </view> 18 <view class="item" > 19 <text>我的排号</text> 20 <image src="/images/right.png"></image> 21 </view> 22 <view class="item"> 23 <text>我的评价</text> 24 <image src="/images/right.png"></image> 25 </view> 26 </view> 27 <view class="item"> 28 <text>反馈建议</text> 29 <image src="/images/right.png"></image> 30 </view> 31 <view class="item" > 32 <text>在线客服</text> 33 <image src="/images/right.png"></image> 34 </view> 35 <!-- 管理员 --> 36 <view class="admin"> 37 <image src="/images/admin.png"></image> 38 <view>管理员入口</view> 39 </view>
2、me.wxss
1 Page{ 2 background-color:#F2F2F2; 3 } 4 5 /*未登录*/ 6 .login{ 7 background-color: #FF9966; 8 width: 100%; 9 height: 400rpx; 10 /*设置头像和文字上下居中显示*/ 11 display: flex; 12 flex-direction: column; 13 justify-content: center; 14 align-items: center; 15 } 16 .login image{ 17 width: 150rpx; 18 height: 150rpx; 19 border-radius: 50%; 20 } 21 .login text{ 22 color: #fff; 23 font-size: 28rpx; 24 margin-top: 20rpx; 25 } 26 27 /*条目*/ 28 .item{ 29 background-color: #fff; 30 padding: 30rpx; 31 display: flex; 32 justify-content: space-between; 33 border-bottom: 1rpx solid gainsboro; 34 } 35 .item image{ 36 width: 40rpx; 37 height: 40rpx; 38 } 39 /*管理员入口*/ 40 .admin{ 41 background-color: #fff; 42 margin: 20rpx; 43 padding: 20rpx; 44 border-radius: 10rpx; 45 vertical-align: center; 46 text-align: center; 47 } 48 .admin image{ 49 width: 100rpx; 50 height: 100rpx; 51 }
3、me.js
1 // pages/me/me.js 2 Page({ 3 4 //页面的初始数据 5 data: { 6 //用户登录状态 7 loginOK:false, 8 //用户的微信头像、微信名字 9 avatarUrl:"/images/me.png", 10 nickName:"授权登录", 11 }, 12 13 onLoad: function (options) { 14 15 }, 16 onShow(){ 17 let userInfo = wx.getStorageSync(\'userProfile\') 18 console.log("我的个人信息缓存数据",userInfo); 19 if(userInfo){ 20 this.setData({ 21 loginOK:true, 22 avatarUrl:userInfo.avatarUrl, 23 nickName:userInfo.nickName 24 }) 25 }else{ 26 this.setData({ 27 loginOK:false 28 }) 29 } 30 }, 31 //授权登录 32 login(){ 33 console.log("用户点击了授权登录"); 34 wx.getUserProfile({ 35 desc: \'获取用户信息完善会员资料\', //声明获取用户个人信息后的用途，不超过30个字符 36 }).then(res=>{ 37 console.log("用户点击了允许，获取用户个人信息成功",res); 38 //个人信息存入缓存 39 wx.setStorageSync(\'userProfile\', res.userInfo) 40 this.setData({ 41 loginOK:true, 42 avatarUrl:res.userInfo.avatarUrl, 43 nickName:res.userInfo.nickName 44 }) 45 }).catch(err=>{ 46 console.log("用户点击了拒绝，获取用户个人信息失败",err); 47 }) 48 }, 49 //退出登录 50 exit(){ 51 wx.showModal({ 52 title:"退出登录", 53 content:"确定要退出登录吗？", 54 }).then(res=>{ 55 console.log("用户确定退出登录",res); 56 if(res.confirm){ 57 this.setData({ 58 loginOK:false, 59 }) 60 //清空缓存 61 wx.setStorageSync(\'userProfile\', null) 62 }else if(res.cancel){ 63 console.log("用户取消退出登录"); 64 } 65 }) 66 }, 67 68 })
三、效果展示
