1.写好html内容，v-if和v-else，如果有数据就显示头像昵称，反之显示button按钮

<view class="login" wx:if="{
   {loginList.avatarUrl}}">
<image src="{
   {loginList.avatarUrl}}"></image>
<text>{
   {loginList.nickName}}</text>
</view>

<button bindtap="onclick" wx:else>获取头像昵称</button>

2.写按钮事件，微信小程序自带的getUserProfile方法

desc必写，成功后打印并赋值

onclick(){
    wx.getUserProfile({
      desc: 'desc',
      success:(res)=>{
        console.log(res);
        this.setData({
          loginList:res.userInfo
        })
      }
    })
  }

3.data中定义变量接收数据

/**
   * 页面的初始数据
   */
  data: {
    loginList:{}
  }

4.当刷新时还在登录状态，除非点击退出登录

 wx.getUserProfile({
      desc: '获取用户信息',
      success: (res) => {
        // console.log(res);
        this.setData({
          userInfo: res.userInfo
        })
        wx.setStorage({
          key: 'userInfo',
          data: res.userInfo
        })
      }
    })

/**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    wx.getStorage({
      key: 'userInfo',
      success: (res) => {
        // console.log(res);
        this.setData({
          userInfo: res.data
        })
      }
    })
  }

5.点击退出登录,直接让数据为空就行

  //退出登录
  loginOut() {
    wx.removeStorage({
      key: 'userInfo',
      success: () => {
        this.setData({
          userInfo: {}
        })

      }
    })
  }