美文网首页
小程序Page里的函数比app.js先执行的解决办法

小程序Page里的函数比app.js先执行的解决办法

作者: 泪滴在琴上 | 来源:发表于2020-08-09 16:04 被阅读0次

问题描述:
当我们初始化一个小程序时,默认文件 app.js 中有onLaunch函数,

onLaunch: function () {
    console.log("onLaunch");
    wx.login({
      success: res => {
        console.log("login");
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
}

默认目录,"pages/index/index", 中index.js 有 onLoad函数

onLoad: function () {
    console.log("index onLoad");
}

小程序网络请求默认为异步请求,在app.js的onLaunch运行后进行异步请求时,程序不会停止,index.js页已执行onload, onload里面的数据会因为没有获取到app.js里的东西而报错, 我们希望onLaunch执行完后再执行onLoad。
他们的执行顺序是:
onLaunch > index onLoad > login

我们希望的执行顺序是:
onLaunch > login > index onLoad

解决办法

定义回调函数, onload里获取不到东西就一直获取,不执行下一步操作,直到获取到app.js的数据才继续执行。若login返回为空,则给app.js注册一个loginSuccessCallback回调,这个回调方法的执行时机,就是app.js中的异步请求完毕

把 app.js 中的 onLaunch 中方法拿到 index.js 文件中,按照自己的逻辑写

使用promise

方法1:

App({
  onLaunch: function () {
    wx.login({
      success: res => {
        this.globalData.checkLogin = true;
        //由于这里是网络请求,可能会在 Page.onLoad 之后才返回
        // 所以此处加入 callback 以防止这种情况
        if (this.checkLoginReadyCallback){
          this.checkLoginReadyCallback(res);
        }
      }
    })
  },
  globalData: {
    checkLogin: false
  }
  
  ...
})
 

//index.js
//获取应用实例
const app = getApp()
 
Page({
  data: {
    test: false
  },
  onLoad: function () {
    let that = this;
    //判断onLaunch是否执行完毕
    if (app.globalData.checkLogin){
      that.setData({
        test:true
      })
    }else{
      app.checkLoginReadyCallback = res => {
          //登陆成功后自己希望执行的,和上面一样
        that.setData({
          test:true
        })
      };
    }
  }
})

方法2:
把 app.js 中的 onLaunch 中登陆后才执行的方法拿到 index.js 文件中,这是最简单的方法

//index.js

onLoad: function () { 
    wx.login({
      success: res => {
        resolve(res); 
      }
    })
}

方法3:

// app.js中定义一个新的方法
App({
  onLaunch: function () {
    ...
  },
  getAuthKey: function (argument) {
    var that = this;
    return new Promise(function(resolve, reject){
        wx.login({
          success: res => {
            resolve(res); 
          }
        })
    })
  }
  ... 
})
//index.js
onLoad: function () {
    ...     
    app.getAuthKey().then(function(res){
      console.log('res')
    })
 }

相关文章

  • 小程序Page里的函数比app.js先执行的解决办法

    问题描述:当我们初始化一个小程序时,默认文件 app.js 中有onLaunch函数, 默认目录,"pages/i...

  • 小程序自定义动画

    使用 // 这里是pages/page/index.js//首先获取小程序实例,访问app.js中的函数this....

  • 2-小程序配置

    1-文件结构 小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。 app.js【小程序逻辑】 ...

  • 2018-12-25 小程序踩坑之旅

    小程序踩坑之旅 小程序子组件监听父组件的变化: app.js中 page中 神奇的textarea 不光是text...

  • 小程序

    结构 主体app app.json小程序配置 app.js小程序业务逻辑(属性和方法可以被其他页面访问) page...

  • 微信小程序

    结构 主体 app app.json小程序配置 app.js小程序业务逻辑(属性和方法可以被其他页面访问)page...

  • 微信小程序 生命周期

    小程序的生命周期分为 app.js 管理的生命周期、每个page的生命周期。 app.js 管理的生命周期 App...

  • 微信小程序商城开发笔记

    生命周期函数: app.js全局文件作用与小程序启动是的函数调用,一般在这里执行获取token和验证token的两...

  • 微信小程序的生命周期和运行机制

    微信小程序的生命周期 在小程序中,通过App()来注册一个小程序,通过Page()来注册一个页面,在app.js这...

  • 小程序3 App({}), Page({})

    App({}) 函数用来注册一个小程序 getCurrentPages Page({}) Page.prototy...

网友评论

      本文标题:小程序Page里的函数比app.js先执行的解决办法

      本文链接:https://www.haomeiwen.com/subject/brgldktx.html