微信小程序---------app.js中的onLaunch的网络请求,可能会在 Page.onLoad 之后才返回

问题

  • 微信小程序进入index页面之前要做一个权限验证,只有权限验证成功以后才可以加载index页面,但是实际情况是:app.js中的onLaunch函数没有加载完毕,但是index页面直接加载了
一 . 问题分析:
  • 本来以为小程序的加载流程是:app.js(onLaunch)—>index.js(onLoad)
  • 但是实际情况并不是这样子:app.js 与 index.js 同时加载的,app.js中的onLaunch并不是一定先于onLoad 执行完
  • 小程序index和app.js文件加载是异步的,也就是你app.js的onLaunch中的request在发送网络请求的同时,index页面的onLoad等等函数也在加载,因为request是网络请求,所以一般情况下网络请求所需的时间较多一些,当网络请求结束时候,大多数情况下index.js中的onLoad之类的函数已经加载完毕了
二 . 解决问题:
  • 明确问题:页面和app异步进行,要让页面加载等一下app加载完成
  • 也就是说,页面加载过程中看一下app加载完了没有
三 . 解决办法:
  • 在app.js文件中设置一个全局变量flag,默认值为false,当app的onLaunch执行结束的时候,给flag赋值true
  • 在page.js的onLoad函数中设置一个定时器,每次延迟一秒监测flag变量是否为true,如果为true,再进行权限验证,根据自己的业务处理相应的后续,如果为false,弹出提示框,请求用户重试,用户点击确定,递归调用定时器。
代码:
  • app.js
App({
	globalData:{
	  flag:false   //flag变量,用来检查app的onLaunch是否执行完毕
	},
	 onLaunch: function () {
   		var that = this;
		wx.request({
		...............自己的代码......
		})
		//结束的时候对flag变量赋值
		 that.globalData.flag=true;
	}
})
  • index.js
const app = getApp();
App({
	onLoad: function (options) {
		.................自己原本的的代码---
		//加上这里的定时器
		setTimeout(that.checkTimer, 1000);
	}
}),
//定时器回调函数
 checkTimer(){
    var that = this;
    if (app.globalData.falg != true){
       wx.showModal({
        title: '错误',
        content: '登录信息获取失败,请重试',
        confirmText:'确定',
        success(res) {
          if (res.confirm) {
            setTimeout(that.checkTimer, 100);
          } else if (res.cancel) {
            setTimeout(that.checkTimer, 100);
          }
        }
      })
    }
  • 实际结果,给后台加断点用来作为延迟网络请求,点击确定后间隔一秒,再次监测。

在这里插入图片描述

鉴权结束哦~~~,网上很多解决方法,感觉都乱乱的看不进去,就自己搞了一个觉得简单的。唯一的问题可能就在于没有定时器的退出办法,但是考虑到这里必须进行鉴权,所以就不做退出,如果app中的网络请求发送出现问题,这里肯定也会一直卡住,如果要解决的话,加个计数的全局变量,到次数以后关掉。

补充:当前方法存在的问题,实际测试中,该方法可以作为等待的方式,但是,用户可以返回,这个时候就直接进入index的页面中了,当前方法作为鉴权不可行。

问题解决,上面代码已经做了更改,可以直接使用,作为鉴权没有任何问题。

这里还想到一种补充等待的方法,两者配合使用,目的是不能为了网速慢的用户影响到所有用户的体验感。在page的onLoad的最开始加入下面的代码,就是一个提示框,用来作为延时,这里的 duration: 2000,就是等待时间

 wx.showToast({
      title: '成功',
      icon: 'success',
      duration: 2000
    })
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值