快捷導(dǎo)航

微信小程序onLaunch異步,首頁(yè)onLoad先執(zhí)行?

更新時(shí)間：2018年09月20日 10:57:41 作者：子欽加油

這篇文章主要介紹了微信小程序onLaunch異步,首頁(yè)onLoad先執(zhí)行? 文章底部給大家介紹了小程序_onLaunch異步回調(diào)數(shù)據(jù)加載問(wèn)題的兩種解決方案，需要的朋友可以參考下

本來(lái)按照事件順序，小程序初始化時(shí)觸發(fā)App里的onLaunch，后面再執(zhí)行頁(yè)面Page里的onLoad，但是在onLaunch里請(qǐng)求獲取是否有權(quán)限，等待返回值的時(shí)候Page里的onLoad事件就已經(jīng)執(zhí)行了。

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

 //index.js
 //獲取應(yīng)用實(shí)例
 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
    });
  }
 })

控制臺(tái)打印的結(jié)果是

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

要是能等完onLaunch請(qǐng)求完再執(zhí)行Page的onLoad方法那該多好。

這里采用的方法是定義一個(gè)回調(diào)函數(shù)。

Page頁(yè)面判斷一下當(dāng)前app.globalData.employId是否有值，如果沒(méi)有（第一次）則定義定義一個(gè)app方法（回調(diào)函數(shù)）app.employIdCallback = employId => {...}。

App頁(yè)面在請(qǐng)求success后判斷時(shí)候有Page頁(yè)面定義的回調(diào)方法，如果有就執(zhí)行該方法。因?yàn)榛卣{(diào)函數(shù)是在Page里面定義的所以方法作用域this是指向Page頁(yè)面。

//app.js
 App({
  onLaunch: function () {
   wx.request({
    url: 'test.php', //僅為示例，并非真實(shí)的接口地址
    data: {
    },
    success: function(res) {
    this.globalData.employId = res.employId;
     //由于這里是網(wǎng)絡(luò)請(qǐng)求，可能會(huì)在 Page.onLoad 之后才返回
     // 所以此處加入 callback 以防止這種情況
     if (this.employIdCallback){
      this.employIdCallback(res.employId);
     }
    }
   })
  },
  globalData: {
   employId: ''
  }
 })

//index.js
//獲取應(yīng)用實(shí)例
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 是網(wǎng)絡(luò)請(qǐng)求，可能會(huì)在 Page.onLoad 之后才返回
   // 所以此處加入 callback 以防止這種情況
   app.employIdCallback = employId => {
    if (employId != '') {
     this.setData({
      albumDisabled: false,
      bindDisabled: true
     });
    }
   }
  }
 }
})

這樣的話，就能實(shí)現(xiàn)想要的結(jié)果。執(zhí)行順序就是：

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

下面看下小程序_onLaunch異步回調(diào)數(shù)據(jù)加載問(wèn)題的兩種解決方案

問(wèn)題

小程序開(kāi)發(fā)過(guò)程中，會(huì)遇到在App啟動(dòng)onLaunch的時(shí)候，發(fā)起登錄請(qǐng)求獲取微信用戶信息，并注冊(cè)到我媽自己的服務(wù)器上以便使用，然而，這個(gè)過(guò)程中，

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

是無(wú)法判斷success和page onload哪個(gè)先來(lái)的，會(huì)導(dǎo)致頁(yè)面初始化數(shù)據(jù)失敗的情況。

解決方案一

就是在request success中處理，使用getCurrentPages方法獲取是否頁(yè)面先于success生成，如果生成我們就強(qiáng)制讓頁(yè)面再次渲染。

這顯然是一種hack的方式，在實(shí)際使用過(guò)程當(dāng)中，如果登錄邏輯比較復(fù)雜，這個(gè)方法不是十分便利，page onload在一些特殊情況也會(huì)被調(diào)用，這顯然不是我們想看到的

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

解決方案二

目前我在開(kāi)發(fā)中使用的是這種方案，

在login的邏輯里，增加一個(gè)回調(diào)函數(shù)cbLoginCallBack。

Page頁(yè)面判斷一下當(dāng)前app.globalData.sessionKey是否存在，如果沒(méi)有（第一次）則定義定義一個(gè)app方法（回調(diào)函數(shù)）

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

App頁(yè)面在請(qǐng)求success后判斷時(shí)候有Page頁(yè)面定義的回調(diào)方法，如果有就執(zhí)行該方法。因?yàn)榛卣{(diào)函數(shù)是在Page里面定義的所以方法作用域this是指向Page頁(yè)面。

總結(jié)

以上所述是小編給大家介紹的微信小程序onLaunch異步,首頁(yè)onLoad先執(zhí)行?，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: