您当前的位置: 首页 > 解决方案

微信小程序onLaunch异步,首页onLoad先执行?

  • 作者: admin
  • 发布于 2018-09-20 14:13:54
  • 来源:  
  • 栏目:解决方案

导语: 本来按照事件顺序,小程序初始化时触发App里的onLaunch,后面再执行页面Page里的onLoad,但是在onLaunch里请求获取是否有权限,等待

 

本来按照事件顺序,小程序初始化时触发App里的onLaunch,后面再执行页面Page里的onLoad,但是在onLaunch里请求获取是否有权限,等待返回值的时候Page里的onLoad事件就已经执行了。

 
  1. //app.js
  2. App({
  3. onLaunch: function () {
  4. console.log('onLaunch');
  5. wx.request({
  6. url: 'test.php', //仅为示例,并非真实的接口地址
  7. data: {
  8. },
  9. success: function(res) {
  10. console.log('onLaunch-request-success');
  11. // 将employId赋值给全局变量,提供给页面做判断
  12. this.globalData.employId = res.employId;
  13. }
  14. })
  15. },
  16. globalData: {
  17. employId: ''
  18. }
  19. })
 
  1. //index.js
  2. //获取应用实例
  3. const app = getApp()
  4.  
  5. Page({
  6. data: {
  7. albumDisabled: true,
  8. bindDisabled: false
  9. },
  10. onLoad: function () {
  11. console.log('onLoad');
  12. console.log('onLoad app.globalData.employId = ' + app.globalData.employId);
  13. //判断是用户是否绑定了
  14. if (app.globalData.employId && app.globalData.employId != '') {
  15. this.setData({
  16. albumDisabled: false,
  17. bindDisabled: true
  18. });
  19. }
  20. })

控制台打印的结果是

 
  1. onLaunch
  2. onLoad
  3. onLoad app.globalData.employId =
  4. onLaunch-request-success

要是能等完onLaunch请求完再执行Page的onLoad方法那该多好。 
这里采用的方法是定义一个回调函数。 
Page页面判断一下当前app.globalData.employId是否有值,如果没有(第一次)则定义定义一个app方法(回调函数)app.employIdCallback = employId => {...}。 
App页面在请求success后判断时候有Page页面定义的回调方法,如果有就执行该方法。因为回调函数是在Page里面定义的所以方法作用域this是指向Page页面。

 
  1. //app.js
  2. App({
  3. onLaunch: function () {
  4. wx.request({
  5. url: 'test.php', //仅为示例,并非真实的接口地址
  6. data: {
  7. },
  8. success: function(res) {
  9. this.globalData.employId = res.employId;
  10. //由于这里是网络请求,可能会在 Page.onLoad 之后才返回
  11. // 所以此处加入 callback 以防止这种情况
  12. if (this.employIdCallback){
  13. this.employIdCallback(res.employId);
  14. }
  15. }
  16. })
  17. },
  18. globalData: {
  19. employId: ''
  20. }
  21. })
 
  1. //index.js
  2. //获取应用实例
  3. const app = getApp()
  4.  
  5. Page({
  6. data: {
  7. albumDisabled: true,
  8. bindDisabled: false
  9. },
  10. onLoad: function () {
  11. //判断是用户是否绑定了
  12. if (app.globalData.employId && app.globalData.employId != '') {
  13. this.setData({
  14. albumDisabled: false,
  15. bindDisabled: true
  16. });
  17. } else {
  18. // 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
  19. // 所以此处加入 callback 以防止这种情况
  20. app.employIdCallback = employId => {
  21. if (employId != '') {
  22. this.setData({
  23. albumDisabled: false,
  24. bindDisabled: true
  25. });
  26. }
  27. }
  28. }
  29. }
  30. })

这样的话,就能实现想要的结果。执行顺序就是:

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

作者:mipaifu328 
链接:https://www.jianshu.com/p/aaf65625fc9d 



温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。

  • 微信扫描二维码关注官方微信
  • ▲长按图片识别二维码
关注我们

微信小程序官方微信

栏目最新
栏目推荐
返回顶部