微信小程序wx.login先执行onLaunch与onLoad加载顺序问题

@

目录

• 遇到问题
  • 请求api返回需要先登录，实际上登录已成功
• 问题分析
• 解决问题
  • 自定义回调函数
    • app.js
    • index.js
• 扩展提问
• 学习交流
  • 随机数字随机幸运数+
  • My Blog
  • 技术交流

遇到问题

请求api返回需要先登录，实际上登录已成功

想必大家在开发小程序的时候，肯定遇到了页面请求数据加载接口先执行，wx.login()登录接口后执行，导致请求接口返回请先登录，实际上登录确实成功的异常情况！

问题分析

在微信小程序中，由于app.js中的onLaunch和其他页面中js的onLoad属于异步执行。

有时onLaunch中会有网络请求，在等待网络返回值时，也就是还未执行完时，其他页面中js的onLoad已经执行了。这时就会导致页面中的onLoad函数没有获取到登录成功后的token以及其他必备参数，从而导致请求接口时，因为缺失必备参数获得的返回值异常的情况。

解决问题

自定义回调函数

这里我们在app.js中，自定义一个名为 loginCallback 回调函数，然后再页面的onLoad()函数中，监听 loginCallback 函数的执行，继续完成需要执行的操作即可。

app.js

App<IAppOption>({
  onLaunch(options) {
    let that = this;

	wx.login({
	  success: res => {
	    api.login(res.code, scene).then(() => {
	      if (that.loginCallback){
	        that.loginCallback(1);  // 执行自定义回调函数
	      }
	    });
	  },
	});
  });
});

index.js

const app = getApp<IAppOption>()

Page({
  onLoad() {
	app.loginCallback = flag => {  // 监听自定义回调函数执行
	  if(flag) {
	    api.post('/xxxxxxxxxxxxx').then((res) => {  // post api
	      // do something
	    });
	  }
	}
  })
})

扩展提问

上述代码中，app.js里 loginCallback 其实并未单独定义，但是也能够执行成功，是为什么呢？

学习交流

随机数字随机幸运数+

My Blog

blog.guijianpan.com

技术交流