小程序：登录页获取用户信息并传递用户数据到个人中心页

步骤一：个人中心页添加“立即登录”按钮跳转至登录页
一、个人中心页的me.wxml代码

  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" bindtap="bindUserLogin"> 立即登录 </button>
    <block wx:else open-type="getUserInfo">
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>

分析

1. 属性bindtap="bindUserLogin"实现从个人中心跳转到登陆页
2. wx:if和wx:else判断个人中心页是否获取到用户信息，如果有用户信息，显示<block>标签内的内容，否则显示<button>按钮

个人中心页me.wxss代码

.userinfo {
   100%; 
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
   128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
   100%;
  margin-top: 200rpx;
}

个人中心页me.js代码

const app = getApp()
Page({
  data: {
    motto: '',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  // 事件处理函数：跳转到登陆页
  bindUserLogin:function() {
    wx.navigateTo({
      url: '../login/login',
    })
  },
  onLoad: function () {
  },
  // onShow中的代码作用：在登陆页获取到用户新消息后，个人中西页进行判断，有用户信息就把信息添加到<block>对应的位置，没有用户信息就不显示
  onShow:function() {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse) {
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  }
})

步骤二：登录页获取用户信息并返回个人中心页
登录页loginwxml代码

<button class='wx-login' open-type="getUserInfo" bindgetuserinfo="getUserInfo">微信授权一键登录</button>
**分析**

 1. bindgetuserinfo="getUserInfo" 对应获取用户信息的方法
 2. open-type="getUserInfo" 没有这个属性，无法弹出授权弹窗
 3. 点击“立即授权一键登录”，会调用getUserInfo方法

当前页login.js代码

const app = getApp()
Page({
  data: {
    motto: '发布',
    // 初始化用户信息：userInfo hasUserInfo
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  onLoad: function () {
  },
  // 点击“点击授权一键登录，调用getUserInfo获取用户信息”
  getUserInfo: function (e) {
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
    // 获取到用户信息后，调用wx.navigateBack()返回上一页，即个人中心页，wx.navigateBack()一定要在这个位置：
    wx.navigateBack()
  }
})