小程序onLaunch和onload先后顺序

Posted 2023-04-22

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

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

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

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

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

在首页里

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

源码可见 github

微信小程序中Callback回调函数

前言：微信小程序中，onLaunch 方法和 onLoad 方法是同时执行的，但是有时我们需要等 onLaunch 方法执行完毕之后在 onLoad 方法中获取某个网络请求得到的值，由于网络请求有时会比较慢，所以 onLoad 方法可能在 onLaunch 方法之前执行，这时候我们可以自定义 Callback 回调函数来解决问题

实例：在小程序启动时的 onLaunch 方法中网络请求一组数据放入 globalData 全局变量中，在页面的 onLoad 方法中获取全局变量

app.js代码

App({
  //小程序启动后触发
  onLaunch: function() {
    http.postRequest("Home/GetSysInfo", "", res=> {
      //存入全局变量
      this.globalData.tabtext = res.Data;
      // 由于 GetSysInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 Callback 以防止这种情况
      if (this.getSysInfoCallback) {
        this.getSysInfoCallback(res)
      }
    }, function(res) {
      console.log("网络请求失败！")
    });
  },
  //设置全局对象
  globalData: {
    tabtext: [], //系统文字信息
  }
})

.js代码

onLoad: function() {
  //Object.keys().lenght判断全局数组中是否有值
  if (Object.keys(getApp().globalData.tabtext).length>0) {
    //如果有值，则从全局变量中取值
    this.setData({
      titletext: app.globalData.tabtext[0].Desc
    })
  } else {
    //如果无值，调用Callback回调函数直接取值
    app.getSysInfoCallback = res => {
      this.setData({
        titletext: res.Data[0].Desc
      })
    }
  }
}

End！