页面加载后仍未获取到openId和userInfo问题解决

记得上次接小程序的项目已经是去年10月份了，隔了大半年，再次捡起来，这感觉，跟当初刚刚写的时候差不多。
先放个官方链接：https://developers.weixin.qq.com/miniprogram/dev/

参考文章
微信小程序实现watch属性监听数据变化 https://blog.csdn.net/xuyangxinlei/article/details/81408200

1.页面加载后仍未获取到openId

原因：app.js里的onLaunch（异步）方法调用得到数据的速度比页面Page中的onLoad慢，导致在加载index.wxml时openid总是为空

解决办法：采用Promise
app.js

App({  onLaunch: function () {    let that = this;    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)    if (wx.getStorageSync('openid')){      this.getOpenid()
    }    // 获取用户信息
    wx.getSetting({
        ......
    })
 },// getOpenid
  getOpenid: function () {    var that = this;    return new Promise(function (resolve, reject) {
      wx.login({        success: function (res) {          //code 获取用户信息的凭证
          if (res.code) {            //请求获取用户openid
            wx.request({              url: "",  //请求接口
              data: {                 "code": res.code 
              },              method: 'GET',              header: {                'Content-type': 'application/json'
              },              success: function (res) {
                wx.setStorageSync('openid', res.data.data.openid);//存储openid
                var res = {                  status: 200,                  data: res.data.openid
                }
                resolve(res);
              }
            });
          } else {            console.log('失败' + res)
          }
        }
      })
    });
  },
})

index.wxml的onLoad方法

    //获取openid
    app.getOpenid().then(function (res) {      if (res.status == 200) {
        that.setData({          openId: wx.getStorageSync('openid')
        })
      } else {        console.log(res.data);
      }
    });

2.userInfo获取慢

原因：跟上一个问题差不多

解决办法：监听userInfo值的变化，获取到后再调用需要userInfo作为参数的请求
watch.js文件获取地址:https://github.com/xyxl1997/watch
index.js

import watch from '../../utils/watch.js'Page({ onLoad: function (options) {  //监听设置
    watch.setWatcher(this, that.getPageUserInfo());
  },   watch:{    userInfo:function(newV){      //注意，此处不要做赋值操作，否则会一直赋值下去，原因可以看上面的参考链接
      console.log(newV)      //当userInfo有值时请求接口
      this.getPageUserInfo(newV)
    }
  }
})

3.认证后跳到tabbar页面

情形：
login.wxml小程序认证页，获取用户授权
index.wxml(tabbar)小程序首页

登陆小程序时，已授权用户默认到index页面，否则重定向到login页面，判断在app.js文件onLaunch中

// 获取用户信息
    wx.getSetting({      success: res => {        if (res.authSetting['scope.userInfo']) {          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({            //要获取信息的用户的 openId 数组，如果要获取当前用户信息，则将数组中的一个元素设为 'selfOpenId'
            openIdList: ['selfOpenId',that.globalData.openId], 
            lang: 'zh_CN',            success: res => {              
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {                this.userInfoReadyCallback(res)
              }
            },            fail:res => {              console.log('fail---',res)
            }
          })
        }else{          // 没有授权，重定向到 loading 启动页
          wx.navigateTo({            url: '/pages/accredit/accredit',
          })
        }
      },

问题：当在认证页面中点击授权后，跳转到index页面时，无法进入到onLoad中（之前问题已经说过，openid，userInfo都要在onLoad中才能得到），而onShow中放入watch.setWatcher(this, that.getPageUserInfo())没有效果，而且，即使能获取到，也需要手动刷新一下，否则值都为空

解决办法：不用wx.switchTab，使用wx.reLaunch(关闭应用内所有页面，打开指定页面)，因为wx.reLaunch可以携带参数

login.js

const app = getApp()

Page({  data:{    option:'',
  },  onLoad:function(){   
    // 在没有 open-type=getUserInfo 版本的兼容处理
    if (!this.data.canIUse) {
      wx.getUserInfo({        success: res => {
          app.globalData.userInfo = res.userInfo
        }
      })
    }
  },  /**
   * 获取用户信息接口后的处理逻辑
   */
  getUserInfo: function (e) {    // console.log(e)
    // 将获取的用户信息赋值给全局 userInfo 变量，再跳回之前页
    if (e.detail.userInfo) {
      app.globalData.userInfo = e.detail.userInfo
      wx.reLaunch({        url: '../index/index?id=1&accredit=1',        success: function (e) {          let page = getCurrentPages().pop();          if (page == undefined || page == null) return;
          page.onLoad();
        } 
      })

    }else{      console.log('没授权')      this.onLoad();
    }
  },
})

index.js

 onLoad: function (options) {    console.log('拿到login传过来的参数--',options);    if (options.accredit){     //如果有accredit这个参数，就重新调用一遍onLoad方法，实现页面自刷新，拿到userInfo
      this.onLoad(options.id)
    }
 },

以上问题获取还有更好的办法的解决，勿喷，感谢。

作者：夏日清风_期待
链接：https://www.jianshu.com/p/e1f5ed9176b5