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

2018/10/1 18:34:29
摘要: 小程序开发时,按照事件顺序,小程序初始化触发APP的onlaunch后,在去是行页面Page的onload。但现实常常是,由于onlaunch

小程序开发时,按照事件顺序,小程序初始化触发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

          });

        }

      }

    }

  }

})

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

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


声明:文章"小程序onLaunch执行异步,如何解决onLoad先执行的问题?"为互诚科技—微信小程序开发公司的原创文章,转载请注明出处,谢谢合作!
标签:小程序干货
电话咨询:18011971195(黄先生)
在线留言:
微信扫码,关注我们
相关文章
  • 广州微信小程序商城开发,O2O引领微商发展

    在微信小程序高调开发过后,小程序商城也随之出现,结合线上线下的产品与服务定位,加上即用即走的轻量化设计,将小程序商城设计成为一种轻量化的、贴近O2O商业模式的移动商城。

  • 小程序后台新增运维中心查Bug与用户管理两不误

    还在烦恼小程序时不时出现Bug让人措手不及吗?还在担心小程序Bug会影响小程序的使用体验吗?还在纠结小程序开发出现Bug却不能及时发现吗?从今天开始,这些问题统统

  • 一个新开发的微信小程序,要如何提高搜索排名?

    针对小程序在微信搜索中排名前后这个问题,微信官方给出了一套排名标准,其中进入到小程序行列中的时间长短占的比例比较大,但这一方面对于新开发的小程序排名来说基本没有什么用。那么,新开发的小程序要如何去做才能快速提高自己的搜索排名呢?

  • 微信小程序搜索排名的规则是怎样的

    在网站排名建设中,企业官网在各大网站的平台位置不是随随便便就能有的,而是要经过一定的规则竞争、筛选后才有排名先后的区别。而在前不久,微信小程序的搜索入口也开始了排名竞争。所以,想要让自己的小程序在搜索行列的排名比较靠前、更加容易被用户搜索到,就需要了解一下微信小程序搜索排名的规则究竟是怎么样的。

  • 微信小程序开发教程之http请求

    微信小程序的服务器中可以设置四种网络访问域名,每一种类型的网络请求需要设置一个对应的域名,并且要注意的是,在设置域名

  • 微信小程序开发技术教程:视图容器组件详解(三)

    接上次视图容器组建详解(一)与(二),我们今天把最后两个组件样式