小程序onLaunch和onload先后順序

在開發(fā)中,會(huì)有一些判斷是在小程序初始化的時(shí)候建立的,比如說(shuō)個(gè)人信息同步,同步之后在進(jìn)行其他頁(yè)面的相應(yīng)的操作,查看官方文檔發(fā)現(xiàn)這個(gè);

APP生命周期

APP生命周期

看到這個(gè)的時(shí)候,豁哈,找到寶了,是不是可開心了;

onLaunch(Object object)
小程序初始化完成時(shí)觸發(fā),全局只觸發(fā)一次
按照我們的正常操作,所有需要初始化同步更新的操作,在onLaunch里執(zhí)行,進(jìn)行信息同步,然后在其他頁(yè)面onload的時(shí)候再干其他的事情。理論上來(lái)說(shuō)這樣沒(méi)啥問(wèn)題。

但是!你高興的太早了?。」?.. (都是淚)
實(shí)際上進(jìn)入小程序首頁(yè)的時(shí)候有時(shí)候會(huì)先執(zhí)行onlaunch方法,有時(shí)又會(huì)先執(zhí)行首頁(yè)的onload的方法,最后經(jīng)過(guò)測(cè)試可以確定,在小程序中這兩個(gè)方法并沒(méi)有執(zhí)行先后的順序,因?yàn)樗麄兌际钱惒綀?zhí)行的。(前人的教訓(xùn))

所以這里我采用的方法是定義回調(diào)函數(shù),

在page頁(yè)面判斷一下當(dāng)前app.globalData.employ是否有值,如果沒(méi)有,說(shuō)明是第一次調(diào)用,則定義一個(gè)(回調(diào)函數(shù))

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

App頁(yè)面在請(qǐng)求success后判斷時(shí)候有Page頁(yè)面定義的回調(diào)方法,如果有就執(zhí)行該方法。

//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;
        /* 由于這里是網(wǎng)絡(luò)請(qǐng)求,可能會(huì)在 Page.onLoad 之后才返回
        * 所以此處加入 callback 以防止這種情況 */
        if (that.employCallback) {
          that.employCallback(true);
        }
      },
    }); 
  }, 
})

在首頁(yè)里

//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 是網(wǎng)絡(luò)請(qǐng)求,可能會(huì)在 Page.onLoad 之后才返回
      // 所以此處加入 callback 以防止這種情況
      app.employCallback = employ => {
        if (employ != '') {
          that.setData({
            userInfo: app.globalData.userInfo
          });         
        }
      }
    }
  }
})

這樣就可以實(shí)現(xiàn)我們想要的順序:
[App] onLaunch => [Page] onLoad => [App] onLaunch sucess callback

源碼可見github

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容