微信小程序onLaunch異步,首頁onLoad先執行?

原本按照事件順序，小程序初始化時觸發App裏的onLaunch，後面再執行頁面Page裏的onLoad，可是在onLaunch裏請求獲取是否有權限，等待返回值的時候Page裏的onLoad事件就已經執行了。

//app.js
 App({
  onLaunch: function () {
   console.log('onLaunch');
   wx.request({
    url: 'test.php', //僅爲示例，並不是真實的接口地址
    data: {
    },
    success: function(res) {
     console.log('onLaunch-request-success');
     // 將employId賦值給全局變量，提供給頁面作判斷
     this.globalData.employId = res.employId;  
    }
   })
  },
  globalData: {
   employId: ''
  }
 })

//index.js
//獲取應用實例
const app = getApp()
Page({
data: {
 albumDisabled: true,
 bindDisabled: false
},
onLoad: function () {
 console.log('onLoad');
 console.log('onLoad app.globalData.employId = ' + app.globalData.employId);
 //判斷是用戶是否綁定了
 if (app.globalData.employId && app.globalData.employId != '') {
  this.setData({
   albumDisabled: false,
   bindDisabled: true
  });
}
})

前端全棧學習交流圈：866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸，提高思惟能力,羣內有大量PDF可供自取，更有乾貨實戰項目視頻進羣免費領取。

控制檯打印的結果是

onLaunch onLoad onLoad app.globalData.employId = onLaunch-request-success

要是能等完onLaunch請求完再執行Page的onLoad方法那該多好。

這裏採用的方法是定義一個回調函數。

Page頁面判斷一下當前app.globalData.employId是否有值，若是沒有（第一次）則定義定義一個app方法（回調函數）app.employIdCallback = employId => {...}。 App頁面在請求success後判斷時候有Page頁面定義的回調方法，若是有就執行該方法。由於回調函數是在Page裏面定義的因此方法做用域this是指向Page頁面。

//app.js
 App({
  onLaunch: function () {
   wx.request({
    url: 'test.php', //僅爲示例，並不是真實的接口地址
    data: {
    },
    success: function(res) {
    this.globalData.employId = res.employId;
     //因爲這裏是網絡請求，可能會在 Page.onLoad 以後才返回
     // 因此此處加入 callback 以防止這種狀況
     if (this.employIdCallback){
      this.employIdCallback(res.employId);
     }
    }
   })
  },
  globalData: {
   employId: ''
  }
 })

//index.js
//獲取應用實例
const app = getApp()
Page({
data: {
 albumDisabled: true,
 bindDisabled: false
},
onLoad: function () {
 //判斷是用戶是否綁定了
 if (app.globalData.employId && app.globalData.employId != '') {
  this.setData({
   albumDisabled: false,
   bindDisabled: true
  });
 } else {
  // 因爲 getUserInfo 是網絡請求，可能會在 Page.onLoad 以後才返回
  // 因此此處加入 callback 以防止這種狀況
  app.employIdCallback = employId => {
   if (employId != '') {
    this.setData({
     albumDisabled: false,
     bindDisabled: true
    });
   }
  }
 }
}
})

前端全棧學習交流圈：866109386,面向1-3經驗年前端開發人員,幫助突破技術瓶頸，提高思惟能力,羣內有大量PDF可供自取，更有乾貨實戰項目視頻進羣免費領取。

這樣的話，就能實現想要的結果。執行順序就是：

[App] onLaunch -> [Page] onLoad -> [App] onLaunch sucess callback

下面看下小程序_onLaunch異步回調數據加載問題的兩種解決方案

問題

小程序開發過程當中，會遇到在App啓動onLaunch的時候，發起登陸請求獲取微信用戶信息，並註冊到我媽本身的服務器上以便使用，然而，這個過程當中，

app on launch -> request -> success -> page onload

是沒法判斷success和page onload哪一個先來的，會致使頁面初始化數據失敗的狀況。

解決方案一

就是在request success中處理，使用getCurrentPages方法獲取是否頁面先於success生成，若是生成咱們就強制讓頁面再次渲染。

這顯然是一種hack的方式， 在實際使用過程中，若是登陸邏輯比較複雜，這個方法不是十分便利，page onload在一些特殊狀況也會被調用，這顯然不是咱們想看到的

if (getCurrentPages().length != 0) {
  getCurrentPages()[getCurrentPages().length - 1].onLoad()
}

解決方案二

目前我在開發中使用的是這種方案，

在login的邏輯裏，增長一個回調函數cbLoginCallBack。

Page頁面判斷一下當前app.globalData.sessionKey是否存在，若是沒有（第一次）則定義定義一個app方法（回調函數）

// Login Request
if (app.cbLoginCallBack) {
   typeof app.cbLoginCallBack == 'function' && app.cbLoginCallBack(cb_login.data)
  }
// 邏輯頁面
if (app.globalData.sessionkey) {
  // init data
} else {
  app.cbLoginCallBack = res => {
    if (res) {
      // init data
    }
  }
}

App頁面在請求success後判斷時候有Page頁面定義的回調方法，若是有就執行該方法。由於回調函數是在Page裏面定義的因此方法做用域this是指向Page頁面。