一、功能需求

1. 未登录和登录界面区别显示
2. 点击授权登录，获取用户授权
3. 登录成功后，将个人信息存入缓存
4. 点击已登录成功后用户的微信头像，弹出退出登录
5. 退出登录后，清空缓存
6. 页面在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   onl oad: 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 })

 

三、效果展示