• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

项目实战-点餐小程序-25 我的

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

一、功能需求

  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   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 })

 

三、效果展示

 

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
项目实战-点餐小程序-21 点餐(搜索菜品)发布时间:2022-07-18
下一篇:
项目实战-点餐小程序-01 创建小程序发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap