uniapp开发——未登录登录失效页面登录后页面回调的处理
刚开始默认沿用了前边小程序的做法,即在单击事件或者onHide函数中缓存标识,onShow中读取标识,对必要的业务逻辑进行重新请求。具体代码如下:
微信小程序登录后页面回调的处理方案:
1.缓存回调刷新标识:
单击事件中设置:
methods:{ onSubmit(){ this.setData({ isRefresh:true }) } }
或者直接onHide函数中设置:
onHide(){ this.setData({ isRefresh:true }) }
2. onShow函数中读取刷新标识,如果为真则刷新页面,对必要的业务逻辑进行重新请求:
onShow: function() { if (this.isRefresh) { this.init() this.setData({ isRefresh:false }) } }
但是到uniapp中就不行了,如果还按上边的方式,很可能会连续两次跳转到登录页面。
异常解析:
经验证,如果onLoad函数中发生了路由跳转,那么生命周期加载顺序是这样的:onLoad——onShow——onReady,这就跟小程序大相径庭了。
结果就是onLoad设置了刷新标识,onShow跟随而来,页面还没跳转出去,就已经进行回调了,最终结果就是跳了两次登录页面。
那么怎么处理呢?
解决方案:
可以采用路由跳转的回调函数,在回调函数中设置页面刷新标识,这样就能避免上边的异常情况发生了,具体代码如下:
onLoad() { if (uni.getStorageSync("authTicket")) { this.init(); } else { uni.navigateTo({ url: "/pages/login/index", success() { self.isRefresh = true; } }); } }, onShow: function() { if (uni.getStorageSync("authTicket") && this.isRefresh) { this.init(); this.isRefresh = false; } }
后记:
uniapp尤其是纯原生渲染nvue,总会有一些与小程序、h5不同的地方,而且调试还没有那么方便,报错信息经常性的指向代码不准确,这个就只能通过console.log多输出日志查看了。
个人原创博客,转载请注明来源地址:https://www.cnblogs.com/xyyt
分类:
uni-app
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通