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


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

    //app.js
    App({
      onLaunch: function () {
        console.log('onLaunch');
        wx.request({
          url: 'test.php', //仅为示例,并非真实的接口地址
          data: {
          },
          success: function(res) {
            console.log('onLaunch-request-success');
            // 将employId赋值给全局变量,提供给页面做判断
            this.globalData.employId = res.employId;   
          }
        })
      },
      globalData: {
        employId: ''
      }
    })
    //index.js
    //获取应用实例
    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
          });
      }
    })

    控制台打印的结果是:

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

    要是能等完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
  • 相关阅读:
    Python——读取大文件(GB)
    Flask——实现上传功能
    Python-模块XlsxWriter将数据写入excel
    Python-利用xlrd模块操作excel
    并发环境下,先操作数据库还是先操作缓存?
    深入浅出了解CDN
    Python——格式化GMT时间
    Python——数据库like模糊查询
    全面了解HTTP和HTTPS
    Http-请求过程
  • 原文地址:https://www.cnblogs.com/gavinjay/p/9681197.html
Copyright © 2020-2023  润新知