微信小程序登录界面代码

小程序登录

// miniprogram/pages/index.js
Page({
  data:{
    userInfo:'',
    tapTime: '',	
  },
  onLoad(){ 
 let user =  wx.getStorageSync('user')
console.log('进入',user)
this.setData({
  userInfo:user

   })
  
  },
    login(){
      //防止重复提交
      var nowTime = new Date();
      if (nowTime - this.data.tapTime < 1000) {
          console.log('阻断')
          return;
      }
      console.log('执行')
      this.setData({ tapTime: nowTime });
      //获取用户信息
      var user =  wx.getStorageSync('user');
      //console.log("用户",user)
      this.setData({
       userInfo :user,
      })
      if(!user){
        wx.getUserProfile({
          lang:'zh_CN',
          desc: 'desc',
          success:res =>{
            
            let user = res.userInfo
            wx.setStorageSync('user',user)
            console.log('授权成功',user)
            this.setData({
              userInfo:user
     
               })
          },
          fail:res=>{
            console.log('授权失败')
          }
        })
      }
    },
    loginout(){
      this.setData({
      userInfo :''
      })
      wx.setStorageSync('user', null)
    }
  
})

<!--miniprogram/pages/index.wxml-->
<button wx:if="{{!userInfo}}" class="login" bindtap="login" > 授权登录</button>
<view wx:else class="denglu">
<image src="{{userInfo.avatarUrl}}" class="img"></image>
<text>{{userInfo.nickName}}</text>
<text>{{userInfo.country}}</text>
<button  class="login" bindtap="loginout"> 退出 </button>
</view>

/* miniprogram/pages/index.wxss */
.login{
  
  margin-top: 20rpx;
  background-color: green;
  width: 60%;
  text-align: center;
 
}
.denglu{
  display: flex;
  
  flex-direction: column;
  align-items: center;
 
  background-color: greenyellow;
}

.img{
  width: 200rpx;
  height: 200rpx;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  border-radius: 50%;
}