微信小程序onLaunch获取openid,onload中获取不到解决方法

场景描述: 小程序有3个页面. 分别为 a页面 (首页面), b页面, c页面. 在app.js 中获取 openid, 然后在 其他3个页面中使用.

问题描述: 我们在 app.js 的onLaunch 中获取到 openid, 然后 赋予 app.globalData.openid 中, 但是在 a页面 的 onLoad 中输出app.globalData.openid, 却为空. b页面点击,可以输出,c页面点击,也可以输出.再点击到a页面, 此时也可以输出.

问题分析: 在 app.js中获取openid 是异步的,所以导致,可能执行到的第一个页面 a页面 的 onLoad 时候,openid还没有返回.导致 第一个页面a页面 的 onLoad 中没有获取到 app.globalData.openid

解决方案: 在第一次登录小程序的时候,是没有任何信息的,此时,我们到登录页面登录,登陆之后,有了全局的openid,和缓存openid. 后面我们第二次登陆, 在 a页面(首页吗) 中查看是否存在 缓存openid, 如果不存在,说明客户肯定是第一次登陆.则清除所有的缓存和去全局. 如果存在, 还分为2种情况, 此时需要用 wx.checkSession 来检测是否登录过期,第一种情况, 没有登录过期,则直接使用缓存即可. 第二种情况, 登录过期,则清除所有状态. 后续操作, 都使用全局. 在第一种情况下, 把缓存openid赋值给全局openid. 后续操作也是一样.

思路: 第一次登陆的时候, 存了 缓存openid 后续根据这个来判断 是否登陆过, 如果 缓存openid 存在, 则在根据 wx.checkSession来判断,用户登陆是否过期, 如果没有过期, 则直接使用. 如果过去,清除所有状态. 在其他页面中, 可以直接判断 app.globalData.openid 是否存在,存在表示登录,不存在表示没有登录. 其他页面不用考虑异步的情况.

注意: 这个判断要放在 a页面(首页面) 的 onshow 中, 因为有可能是之前没有登录,后来点击登录了,再点击回来,所以每次都要验证一下. 我们这个首页面的判断, 是针对首页面的,其他页面可以直接通过 缓存或者全局来判断是否登录失效. 我这个项目是3个页面来回切换,所以逻辑判断需要放在 onShow 中执行.

个人显示头像信息页面: 之前的判断去掉, 然后把判断放在 onshow 中. 如下

  onShow: function () {
    
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    }
  },

部分重要代码:

• 首页面代码

//app.js
const app = getApp()
Page({

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

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function (options) {

        /**
         * 判断 缓存openid 是否存在
         * 不存在, 说明之前没有登陆过,是第一次登陆, 此时清除所有状态.
         * 存在,分为2种情况,通过 wx.checkSession 来判断
         * 第一种情况, 没有过期, 则直接赋值使用.
         * 第二种情况, 已经过期, 此时清除所有状态.
         */
        if (wx.getStorageSync('openid')) {
            wx.checkSession({
                success: (res) => {
                    //session_key 未过期，并且在本生命周期一直有效, 把之前的缓存赋值给2个全局变量
                    app.globalData.openid = wx.getStorageSync('openid');
                    app.globalData.userInfo = wx.getStorageSync('userInfo');
                    
                    // 获取到 openid,做后续操作.
                },
                fail: (res) => {
                    // session_key 已经失效，需要重新执行登录流程, 清除缓存和全局信息
                    try {
                        wx.removeStorageSync('openid');
                        wx.removeStorageSync('userInfo');
                        app.globalData.openid = '';
                        app.globalData.userInfo = null;

                        // 没有获取到,做后续操作
                    } catch (e) {
                        console.log("清除缓存失败!");
                    }

                },
            })
        } else {
            console.log("没有登录");
            //缓存不存在,清除下所有状态.
            try {
                wx.removeStorageSync('openid');
                wx.removeStorageSync('userInfo');
                app.globalData.openid = '';
                app.globalData.userInfo = null;

                // 没有获取到,做后续操作
            } catch (e) {
                console.log("清除缓存失败!");
            }

        }
    },
...

• 其他页面

    onShow: function () {
        if(app.globalData.openid){
            console.log('登录');
        }else{
            console.log('没有登录');
        }
    },

全部代码

• a 页面(首页吗)

// pages/test1/test1.js
//获取应用实例
const app = getApp()
Page({

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

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        /**
         * 判断 缓存openid 是否存在
         * 不存在, 说明之前没有登陆过,是第一次登陆, 此时清除所有状态.
         * 存在,分为2种情况,通过 wx.checkSession 来判断
         * 第一种情况, 没有过期, 则直接赋值使用.
         * 第二种情况, 已经过期, 此时清除所有状态.
         */
        if (wx.getStorageSync('openid')) {
            wx.checkSession({
                success: (res) => {
                    console.log("登录");
                    //session_key 未过期，并且在本生命周期一直有效, 把之前的缓存赋值给2个全局变量
                    app.globalData.openid = wx.getStorageSync('openid');
                    app.globalData.userInfo = wx.getStorageSync('userInfo');
                    
                    // 获取到 openid,做后续操作.
                },
                fail: (res) => {
                    console.log("登录失败");
                    // session_key 已经失效，需要重新执行登录流程, 清除缓存和全局信息
                    try {
                        wx.removeStorageSync('openid');
                        wx.removeStorageSync('userInfo');
                        app.globalData.openid = '';
                        app.globalData.userInfo = null;

                        // 没有获取到,做后续操作
                    } catch (e) {
                        console.log("清除缓存失败!");
                    }

                },
            })
        } else {
            console.log("没有登录");
            //缓存不存在,清除下所有状态.
            try {
                wx.removeStorageSync('openid');
                wx.removeStorageSync('userInfo');
                app.globalData.openid = '';
                app.globalData.userInfo = null;

                // 没有获取到,做后续操作
            } catch (e) {
                console.log("清除缓存失败!");
            }

        }
        
    },

})

• 第二个页面, 个人登录页面

//index.js
//获取应用实例
const app = getApp()
const util = require("../../utils/util");

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  //事件处理函数
  bindViewTap: function () {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  bindQuit: function () {
    wx.removeStorageSync('openid');
    wx.removeStorageSync('userInfo');
    app.globalData.openid = '';
    app.globalData.userInfo = null;
    this.setData({
      userInfo: null,
      hasUserInfo: false
    })
  },
  onLoad: function () {

  },
  onShow: function () {

    if (app.globalData.userInfo) {
      console.log("登录");
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    }else{
      console.log("没有登录");
    }
  },

  getUserInfo: function (e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo;

    //设置缓存userInfo
    wx.setStorageSync('userInfo', e.detail.userInfo);
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })

    const that = this;
    // 登录
    wx.login({
      success: res => {

        // 发送 res.code 到后台换取 openId, sessionKey, unionId
        const code = res.code;
        const url = app.globalData.httpBase + "/api/xcx/getOpenid?code=" + code;

        util.newhttp(url).then(function (res) {
          const resData = res.data;

          if (resData.code == 1) {
            app.globalData.openid = resData.data.openid;
            wx.setStorageSync('openid', resData.data.openid);

          }
        }).catch(function (error) {
          console.log(error);
        })

      }
    })


  }
})

• 第三个页面

// pages/test2/test2.js
//获取应用实例
const app = getApp()
Page({

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

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        if(app.globalData.openid){
            console.log('登录');
        }else{
            console.log('没有登录');
        }
    },

})