zoukankan      html  css  js  c++  java
  • 微信小程序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
  • 相关阅读:
    centos7 实时查看tomcat错误信息
    soapUI测试webservice(参数为xml格式的处理方式)
    四个好看的CSS样式表格
    ORM篇——有关NHibernate查询封装
    ORM篇——使用NHibernate配置对象实体的一些小问题
    c#操作XML文件的通用方法
    C#中正则表达式的使用
    C# Dictionary用法总结
    DLinq查询
    DataGrid通过DataSet保存为xml文件,并导入
  • 原文地址:https://www.cnblogs.com/gavinjay/p/9681197.html
Copyright © 2011-2022 走看看