微信小程序登录界面的实现-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序登录界面的实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

用户点击登录，调用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"
}


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: '您已经登录了',
      })
    }
}
})

效果

微信小程序登录页面,微信小程序,微信小程序