zoukankan      html  css  js  c++  java
  • 微信小程序onLaunch异步,首页onLoad先执行?

    本来按照事件顺序,小程序初始化时触发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 Page({
     5   data: {
     6     albumDisabled: true,
     7     bindDisabled: false
     8   },
     9   onLoad: function () {
    10     console.log('onLoad');
    11     console.log('onLoad app.globalData.employId = ' + app.globalData.employId);
    12     //判断是用户是否绑定了
    13     if (app.globalData.employId && app.globalData.employId != '') {
    14       this.setData({
    15         albumDisabled: false,
    16         bindDisabled: true
    17       });
    18   }
    19 })

    控制台打印的结果是

    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 })
    //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
              });
            }
          }
        }
      }
    })

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

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

    感谢大家浏览到这里~~~

  • 相关阅读:
    test
    封装和构造方法
    面向对象
    数组的排序
    UDP编程(八)
    多的是面向对象你不知道的事
    面向对象组合的使用
    类成员的进一步阐述
    面向对象初始
    吾日三省吾身
  • 原文地址:https://www.cnblogs.com/zmdComeOn/p/9679291.html
Copyright © 2011-2022 走看看