微信小程序登录界面的实现

首先是未登录时的界面，提示用户登录之后使用全部的功能。

用户点击登录，调用API拿到用户的信息并在页面中显示出来，同时将用户的信息保存在本地。向后端发送POST请求，拿到code，拿到token，并保存在本地，登录之后隐藏未登录的界面，显示登录后的界面。

点击退出登录之后，重置一些数据，隐藏登陆后的界面，显示未登录时的界面

WXML

1.  
   <view class="backGround"></view>
2.  
   <!-- 未登录时的页面 -->
3.  
   <block wx:if="{{hiddenBlean1}}">
4.  
   <view class="container-out">
5.  
   <view class="faceOut"></view>
6.  
   <view class="textout">
7.  
   <view class="word1">
8.  
   <text>未登录</text>
9.  
   </view>
10.  
    <view class="word2">
11.  
    <text>请点击登陆后使用全部功能</text>
12.  
    </view>
13.  
    </view>
14.  
    </view>
15.  
    <button bindtap="getUersProfile" class="btn">登录</button>
16.  
    </block>
17.  
    <!-- 登陆后的页面 -->
18.  
    <block wx:if="{{hiddenBlean2}}">
19.  
    <!-- 头像，用户名，招呼 -->
20.  
    <view class="container-in">
21.  
    <image src="{{avatarUrl}}" class="touxiang"></image>
22.  
    <view class="wenZi">
23.  
    <view class="word3">
24.  
    {{nickName}}
25.  
    </view>
26.  
    <view class="word4">
27.  
    Hi
28.  
    </view>
29.  
    </view>
30.  
    </view>
31.  
    <view class="loginOut" bindtap="loginOut">
32.  
    <button>退出登录</button>
33.  
    </view>
34.  
    </block>

WXSS 

1.  
   page {
2.  
   background-color: #ededed;
3.  
   }
4.  
    
5.  
   .backGround {
6.  
   width: 100%;
7.  
   height: 490rpx;
8.  
   background-color: #2b4b6b;
9.  
   border-radius: 0 0 25rpx 25rpx;
10.  
    overflow: hidden;
11.  
    }
12.  
     
13.  
    .btn {
14.  
    width: 400rpx;
15.  
    height: 100rpx;
16.  
    margin-top: 200rpx;
17.  
    border-radius: 20rpx;
18.  
    box-shadow: 1rpx 0rpx 10rpx 1rpx rgba(0, 0, 0, .2);
19.  
    background-color: #05c160;
20.  
    color: white;
21.  
    font-size: large;
22.  
    }
23.  
     
24.  
    .btn:active {
25.  
    background-color: teal;
26.  
    }
27.  
     
28.  
    .container-out {
29.  
    display: flex;
30.  
    align-items: center;
31.  
    margin:-100rpx auto;
32.  
    width: 650rpx;
33.  
    height: 250rpx;
34.  
    box-shadow: 1rpx 1rpx 19rpx 1rpx rgba(0, 0, 0, .03);
35.  
    border-radius: 20rpx;
36.  
    background-color: rgb(255, 255, 255);
37.  
    }
38.  
     
39.  
    .faceOut {
40.  
    display: inline-block;
41.  
    width: 210rpx;
42.  
    height: 210rpx;
43.  
    margin-left: 20rpx;
44.  
    border-radius: 20rpx;
45.  
    background-color: rgb(235, 230, 230);
46.  
    }
47.  
     
48.  
    .textout {
49.  
    display: inline-block;
50.  
    margin-left: 20rpx;
51.  
    width: 360rpx;
52.  
    height: 210rpx;
53.  
    /* background-color: salmon; */
54.  
    }
55.  
     
56.  
    .word1 {
57.  
    margin-left: 20rpx;
58.  
    font-size: 50rpx;
59.  
    }
60.  
     
61.  
    .word2 {
62.  
    margin-top: 20rpx;
63.  
    margin-left: 20rpx;
64.  
    font-size: 25rpx;
65.  
    }
66.  
     
67.  
    .container-in {
68.  
    display: flex;
69.  
    margin:-100rpx auto;
70.  
    margin-bottom: 0;
71.  
    width: 650rpx;
72.  
    height: 250rpx;
73.  
    box-shadow: 1rpx 0rpx 10rpx 1rpx rgba(0, 0, 0, .02);
74.  
    border-radius: 20rpx;
75.  
    background-color: rgb(255, 255, 255);
76.  
    }
77.  
     
78.  
    .touxiang {
79.  
    display: inline-block;
80.  
    width: 210rpx;
81.  
    height: 210rpx;
82.  
    margin-top: 20rpx;
83.  
    margin-left: 20rpx;
84.  
    border-radius: 100rpx;
85.  
    border: 1rpx solidrgb(124, 121, 121)k;
86.  
    }
87.  
     
88.  
    .wenZi {
89.  
    display: inline-block;
90.  
    width: 300rpx;
91.  
    height: 210rpx;
92.  
    margin-top: 20rpx;
93.  
    /* background-color: aqua; */
94.  
    margin-left: 20rpx;
95.  
    }
96.  
     
97.  
    .word3 {
98.  
    font-size: 40rpx;
99.  
    margin-left: 20rpx;
100.  
     margin-top: 50rpx;
101.  
     }
102.  
      
103.  
     .word4 {
104.  
     font-size: 25rpx;
105.  
     color: gray;
106.  
     line-height: 35rpx;
107.  
     margin-left: 20rpx;
108.  
     margin-top: 10rpx;
109.  
     }
110.  
      
111.  
     .loginOut {
112.  
     margin-top: 100rpx;
113.  
     }

JSON

1.  
   {
2.  
   "usingComponents": {},
3.  
   "navigationStyle":"custom",
4.  
   "navigationBarTextStyle":"black",
5.  
   "backgroundColor": "#000000"
6.  
   }

 JS

1.  
    
2.  
   Page({
3.  
   data: {
4.  
   hiddenBlean1:true,
5.  
   hiddenBlean2:false,
6.  
   userInfo:'',//用户信息
7.  
   nickName:'',//用户姓名
8.  
   avatarUrl:'',//用户头像地址
9.  
   m:0,//用户的登录状态
10.  
    },
11.  
    //退出登录
12.  
    loginOut() {
13.  
    this.setData({
14.  
    userInfo:'',
15.  
    hiddenBlean1:true,
16.  
    hiddenBlean2:false,
17.  
    m:0
18.  
    })
19.  
    wx.request({
20.  
    url: '',
21.  
    method:'POST',
22.  
    header: {
23.  
    'Content-Type':'application/json'
24.  
    },
25.  
    success:res=> {
26.  
    console.log(res)
27.  
    }
28.  
    })
29.  
    wx.setStorageSync('user', null),
30.  
    wx.showToast({
31.  
    title: '已退出登录',
32.  
    })
33.  
    },
34.  
     
35.  
    //获取用户信息
36.  
    getUersProfile:function() {
37.  
    if(this.data.m==0) {
38.  
    wx.getUserProfile({
39.  
    desc: '登陆后使用全部功能',
40.  
    success:(res)=> {
41.  
    let user = res.userInfo
42.  
    console.log('获取成功',res)
43.  
    wx.setStorage({
44.  
    data: res.userInfo,
45.  
    key:'userInfo',
46.  
    });
47.  
     
48.  
    wx.login({//获取code向后端发送并请求token
49.  
    success(res) {
50.  
    console.log(res.code)
51.  
    let code = res.code
52.  
    wx.request({
53.  
    url: '' res.code,
54.  
    method:'POST',
55.  
    header: {
56.  
    'Content-Type':'application/json'
57.  
    },
58.  
    success:res=>{
59.  
    console.log(res)
60.  
    console.log(res.data.data.token)
61.  
    wx.setStorageSync('token', res.data.data.token)
62.  
    }
63.  
    })
64.  
    }
65.  
    });
66.  
    console.log('用户信息',res.userInfo),
67.  
    console.log(res.userInfo.nickName),
68.  
    this.setData({
69.  
    m:1,
70.  
    nickName : res.userInfo.nickName,
71.  
    avatarUrl: res.userInfo.avatarUrl,
72.  
    hiddenBlean2:true,
73.  
    hiddenBlean1:false
74.  
    })
75.  
    wx.showToast({
76.  
    title: '登陆成功',
77.  
    })
78.  
    wx.hideToast()
79.  
    this.onShow();
80.  
    },
81.  
    fail:(res)=> {
82.  
    console.log('授权失败',res)
83.  
    }
84.  
    })
85.  
    }
86.  
    else {
87.  
    wx.showToast({
88.  
    title: '您已经登录了',
89.  
    })
90.  
    }
91.  
    }
92.  
    })

效果 

这篇好文章是转载于：学新通技术网