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

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

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

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

WXML

<view class="backGround"></view>
<!-- 未登录时的页面 -->
<block wx:if="{{hiddenBlean1}}">
  <view class="container-out">
      <view class="faceOut"></view>
      <view class="textout">
          <view class="word1">
               <text>未登录</text>
          </view>
          <view class="word2">
               <text>请点击登陆后使用全部功能</text>
          </view>
      </view>
  </view>
  <button bindtap="getUersProfile" class="btn">登录</button>
</block>
<!-- 登陆后的页面 -->
<block wx:if="{{hiddenBlean2}}">
<!-- 头像，用户名，招呼 -->
  <view class="container-in">
    <image src="{{avatarUrl}}" class="touxiang"></image>
    <view class="wenZi">
       <view class="word3">
          {{nickName}}
       </view>
       <view class="word4">
          Hi
       </view>
    </view>
  </view>
  <view class="loginOut" bindtap="loginOut">
       <button>退出登录</button>
  </view>
</block>

WXSS 

page {
  background-color: #ededed;
}

.backGround {
  width: 100%;
  height: 490rpx;
  background-color: #2b4b6b;
  border-radius: 0 0 25rpx 25rpx;
  overflow: hidden;
}

.btn {
  width: 400rpx;
  height: 100rpx;
  margin-top: 200rpx;
  border-radius: 20rpx;
  box-shadow: 1rpx 0rpx 10rpx 1rpx rgba(0, 0, 0, .2);
  background-color: #05c160;
  color: white;
  font-size: large;
}

.btn:active {
   background-color: teal;
}

.container-out {
  display: flex;
  align-items: center;
  margin:-100rpx auto;
  width: 650rpx;
  height: 250rpx;
  box-shadow: 1rpx 1rpx 19rpx 1rpx rgba(0, 0, 0, .03);
  border-radius: 20rpx;
  background-color: rgb(255, 255, 255);
}

.faceOut {
  display: inline-block;
  width: 210rpx;
  height: 210rpx;
  margin-left: 20rpx;
  border-radius: 20rpx;
  background-color: rgb(235, 230, 230);
}

.textout {
  display: inline-block;
  margin-left: 20rpx;
  width: 360rpx;
  height: 210rpx;
  /* background-color: salmon; */
}

.word1 {
  margin-left: 20rpx;
  font-size: 50rpx;
}

.word2 {
  margin-top: 20rpx;
  margin-left: 20rpx;
  font-size: 25rpx;
}

.container-in {
  display: flex;
  margin:-100rpx auto;
  margin-bottom: 0;
  width: 650rpx;
  height: 250rpx;
  box-shadow: 1rpx 0rpx 10rpx 1rpx rgba(0, 0, 0, .02); 
  border-radius: 20rpx;
  background-color: rgb(255, 255, 255);
}

.touxiang {
  display: inline-block;
  width: 210rpx;
  height: 210rpx;
  margin-top: 20rpx;
  margin-left: 20rpx;
  border-radius: 100rpx;
  border: 1rpx solidrgb(124, 121, 121)k;
}

.wenZi {
  display: inline-block;
  width: 300rpx;
  height: 210rpx;
  margin-top: 20rpx;
  /* background-color: aqua; */
  margin-left: 20rpx;
}

.word3 {
  font-size: 40rpx;
  margin-left: 20rpx;
  margin-top: 50rpx;
}

.word4 {
  font-size: 25rpx;
  color: gray;
  line-height: 35rpx;
  margin-left: 20rpx;
  margin-top: 10rpx;
}

.loginOut {
  margin-top: 100rpx;
}

JSON

{
  "usingComponents": {},
  "navigationStyle":"custom",
  "navigationBarTextStyle":"black",
  "backgroundColor": "#000000"
}

 JS

Page({
  data: {
       hiddenBlean1:true,
       hiddenBlean2:false,
       userInfo:'',//用户信息
       nickName:'',//用户姓名
       avatarUrl:'',//用户头像地址
       m:0,//用户的登录状态
  }, 
//退出登录
  loginOut() {
    this.setData({
      userInfo:'',
      hiddenBlean1:true,
      hiddenBlean2:false,
      m:0
    })
    wx.request({
      url: '',
      method:'POST',
      header: {
        'Content-Type':'application/json'
      },
      success:res=> {
        console.log(res)
      }
    })
    wx.setStorageSync('user', null),
    wx.showToast({
      title: '已退出登录',
    })
  },

//获取用户信息
  getUersProfile:function() {
    if(this.data.m==0) {
      wx.getUserProfile({
        desc: '登陆后使用全部功能',
        success:(res)=> {
          let user = res.userInfo
          console.log('获取成功',res)
          wx.setStorage({
            data: res.userInfo,
            key:'userInfo',          
          });

          wx.login({//获取code向后端发送并请求token
            success(res) {
              console.log(res.code)
              let code = res.code            
              wx.request({
                url: '' + res.code,
                method:'POST',
                header: {
                    'Content-Type':'application/json'
                },             
                success:res=>{
                   console.log(res)
                   console.log(res.data.data.token)
                   wx.setStorageSync('token', res.data.data.token)
                }
              })
            }
          });         
        console.log('用户信息',res.userInfo),
        console.log(res.userInfo.nickName),
          this.setData({
            m:1,
            nickName : res.userInfo.nickName,
            avatarUrl: res.userInfo.avatarUrl,
            hiddenBlean2:true,
            hiddenBlean1:false
          })
          wx.showToast({
            title: '登陆成功',
          })
          wx.hideToast()
          this.onShow();
        },
        fail:(res)=> {
          console.log('授权失败',res)
        }
      })
    }
    else {
      wx.showToast({
        title: '您已经登录了',
      })
    }
}
})

效果