小程序onLaunch执行异步,如何解决onLoad先执行的问题?

2025-10-22 19:05:04 2阅读

小程序开发时,按照事件顺序,小程序初始化触发APP的onlaunch后,在去是行页面Page的onload。但现实常常是,由于onlaunch里在请求获取是否有权限、等待返回值的时候,页面page里的onload事件已经执行了。那么,这个问题该如何去解决呢?小编get到一种方式,下面跟大家分享一下。

要想实现等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

});

})

这样,它的执行顺序就变成如下:

onLaunch -> onLoad -> onLaunch sucess callback

免责声明:由于无法甄别是否为投稿用户创作以及文章的准确性,本站尊重并保护知识产权,根据《信息网络传播权保护条例》,如我们转载的作品侵犯了您的权利,请您通知我们,请将本侵权页面网址发送邮件到qingge@88.com,深感抱歉,我们会做删除处理。