微信小程序登录界面到底怎么写，把我的代码直接拿走吧（附源码）

01 js

Page({
  data:{
    userInfo:''
  },
  onLoad(){
    let user=wx.getStorageSync('user')
    console.log('进入小程序的页面获取缓存',user)
    this.setData({
      userInfo:user
    })
  },
  //授权登录
  login(){
    wx.getUserProfile({
      desc: '用于完善会员资料',//声明获取用户个人信息后的用途，后续会展示在弹窗中
      success:res =>{
        let user = res.userInfo
        //把用户信息缓存到本地
        wx.setStorageSync('user', user)
        console.log("用户信息",user)
        this.setData({
          userInfo:user
        })
      },
      fail: res=>{
        console.log('授权失败',res)
      }
    })
  },
  //退出登录
  loginOut(){
    this.setData({
      userInfo:''
    })
    wx.setStorageSync('user', null)
  }
})

02 xwml
<button wx:if="{{!userInfo}}" bindtap="login">授权登录</button><!--授权登录-->

<view wx:else class="root">
  <image class="touxiang" src="{{userInfo.avatarUrl}}"></image>
  <text class="nicheng">{{userInfo.nickName}}</text>
  <button  bindtap="loginOut">退出登录</button><!--退出登录--> 
</view>

03 wxss
.root{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.touxiang{
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  margin-top: 30rpx;
  margin-bottom: 10rpx;
}

01 js

Page({
  data:{
    userInfo:''
  },
  onLoad(){
    let user=wx.getStorageSync('user')
    console.log('进入小程序的页面获取缓存',user)
    this.setData({
      userInfo:user
    })
  },
  //授权登录
  login(){
    wx.getUserProfile({
      desc: '用于完善会员资料',//声明获取用户个人信息后的用途，后续会展示在弹窗中
      success:res =>{
        let user = res.userInfo
        //把用户信息缓存到本地
        wx.setStorageSync('user', user)
        console.log("用户信息",user)
        this.setData({
          userInfo:user
        })
      },
      fail: res=>{
        console.log('授权失败',res)
      }
    })
  },
  //退出登录
  loginOut(){
    this.setData({
      userInfo:''
    })
    wx.setStorageSync('user', null)
  }
})
 

02 xwml
<button wx:if="{{!userInfo}}" bindtap="login">授权登录</button><!--授权登录-->

<view wx:else class="root">
  <image class="touxiang" src="{{userInfo.avatarUrl}}"></image>
  <text class="nicheng">{{userInfo.nickName}}</text>
  <button  bindtap="loginOut">退出登录</button><!--退出登录--> 
</view>

03 wxss
.root{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.touxiang{
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  margin-top: 30rpx;
  margin-bottom: 10rpx;
}