用户页面代码

user.wxml

<block>
   <view class="user_img_wrap" wx:if="{ {userInfo.avatarUrl}}">
        <image class="user_bg" src="{ { userInfo.avatarUrl }}"></image>
        <view class="user_info">
            <image class="user_icon" src="{ { userInfo.avatarUrl }}"></image>
            <view class="user_name">{ {  userInfo.nickName }}</view>
        </view>
    </view>
    <view class="user_btn" wx:else>
        <navigator url="/pages/login/login">
            登录
        </navigator>
    </view>
</block>

user.js

Page({ 
    data: { 
        userInfo:{ },
    },
    onShow: function () { 
        const userInfo = wx.getStorageSync("userInfo");
        this.setData({ 
          userInfo
        })
    },
})

先通过判断userInfo的值来显示不同的标签，如果有值那么授权登录成功了，如果没有值，那么就显示登录按钮跳转到登录页面进行授权登录。
login.wxml

<view class="login">
    <button open-type="getUserInfo" bindgetuserinfo="handleGetUserInfo" type="primary" plain>登录</button>
</view>

// pages/login/login.js
Page({ 
  /** * 页面的初始数据 */
  data: { 
  },
  /** * 生命周期函数--监听页面加载 */
  onLoad: function (options) { 
  },
  /** * 获取用户信息 */
  handleGetUserInfo(e){ 
    const { userInfo} = e.detail;
    wx.setStorageSync("userInfo", userInfo);
    wx.navigateBack({ 
      delta: 1
    });
  }
})

在小程序中，如果将按钮的open-type值设置为getUserInfo，则按钮的功能为授权登录，详细解读请阅读官微文档wx.getUserInfo
使用bindgetuserinfo绑定授权登录事件，在下面展示一下函数 handleGetUserInfo(e)的参数e：
参数展示
我们可以清楚的看到，在参数e.detail内，展示了用户ID、头像地址、用户名等信息，把这些信息做一次本地存储，在需要的页面获取到进行渲染