微信小程序

小程序onLaunch和onload先后顺序

2020-05-14  本文已影响0人  苏北苝

在开发中,会有一些判断是在小程序初始化的时候建立的,比如说个人信息同步,同步之后在进行其他页面的相应的操作,查看官方文档发现这个;

APP生命周期

APP生命周期

看到这个的时候,豁哈,找到宝了,是不是可开心了;

onLaunch(Object object)
小程序初始化完成时触发,全局只触发一次
按照我们的正常操作,所有需要初始化同步更新的操作,在onLaunch里执行,进行信息同步,然后在其他页面onload的时候再干其他的事情。理论上来说这样没啥问题。

但是!你高兴的太早了!!哈哈哈... (都是泪)
实际上进入小程序首页的时候有时候会先执行onlaunch方法,有时又会先执行首页的onload的方法,最后经过测试可以确定,在小程序中这两个方法并没有执行先后的顺序,因为他们都是异步执行的。(前人的教训)

所以这里我采用的方法是定义回调函数,

在page页面判断一下当前app.globalData.employ是否有值,如果没有,说明是第一次调用,则定义一个(回调函数)

app.employCallback = employ =>{ ...}

App页面在请求success后判断时候有Page页面定义的回调方法,如果有就执行该方法。

//app.js
App({
  globalData: {
    employ: '',
    userInfo: null,
  },
  onLaunch: function () {
    let userInfo = wx.getStorageSync('userInfo') || null,
     that = this;
    // 更新userInfo
    wx.request({
      url: '你的地址',
      header: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'Accept': 'application/json',
      },
      method: 'POST',
      data: {},
      success: function (res) {
        if (res.data.status == 0) {
          let obj = res.data.data;
          that.globalData.userInfo = obj;
          wx.setStorageSync('userInfo', userInfo)
        } else {
          wx.setStorageSync('userInfo', null);
        };
        that.globalData.employ = true;
        /* 由于这里是网络请求,可能会在 Page.onLoad 之后才返回
        * 所以此处加入 callback 以防止这种情况 */
        if (that.employCallback) {
          that.employCallback(true);
        }
      },
    }); 
  }, 
})

在首页里

//sequence.js
const app = getApp()

Page({
  data: {
    userInfo:null,
  },
  onLoad: function () {
    let that = this;
    if (app.globalData.employ && app.globalData.employ != '') {
      console.log("first")
      let userInfo = app.globalData.userInfo;
      that.setData({
        userInfo: userInfo ? userInfo : null
      });
    } else {
      // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.employCallback = employ => {
        if (employ != '') {
          that.setData({
            userInfo: app.globalData.userInfo
          });         
        }
      }
    }
  }
})

这样就可以实现我们想要的顺序:
[App] onLaunch => [Page] onLoad => [App] onLaunch sucess callback

源码可见github

上一篇下一篇

猜你喜欢

热点阅读