问题
- 微信小程序进入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
})