跨平台应用开发进阶(十三) :uni-app应用异常退出时处理机制探究

@TOC

一、前言

应用uni-app跨端框架开发APP过程中,遇到以下新增需求:

应用在闪崩或异常退出时,用户希望正在填写的大量信息可以得以保存。当用户再次打开APP时,之前未提交的信息可回显。

刚开始会考虑到uni-app框架本身是否提供以上错误处理解决方案。但是,通过阅读官方文档,发现其并不提供针对以上问题的解决方案。需要项目开发人员自定义实现逻辑处理以上问题。

初读以上需求,可以应用uni-app提供的setStorage()setStorageSync()内置方法实现。

但是,以下问题需要考虑清楚:

  1. 何时调用以上方法缓存数据,应用定时任务setInterval(callback, delay, rest)?还是通过页面【暂存】按钮触发缓存动作?
  2. 何时调用缓存中的数据信息进行uni.getStorage()回显?
  3. 何时调用uni.removeStorage()清空缓存中的数据信息?

给出的思考结果如下:

  1. 应用定时任务setInterval(callback, delay, rest)调用以上缓存数据方法会存在设置的delay值过小,影响APP性能;delay值过大,会造成当前用户输入信息还未暂存,用户返回上一页进行其他操作导致当前输入信息未暂存问题,所以设置一个合适值至关重要,既能最大限度的做到不影响应用性能,也能过做到保证数据完整性;通过页面【暂存】按钮触发缓存动作,可以保证数据的完整性。但是以上2种策略均不能很好的解决应用闪崩问题。
  2. 当用户从其他页面重新进入当前信息维护页时,调用缓存中的数据信息进行uni.getStorage()回显。
  3. 用户登出时,调用uni.removeStorage()清空缓存中的数据信息。

二、实现机制

  • 为应对用户异常退出场景,在用户非正常退出(即并不是点击【退出】按钮退出系统)时,保存用户申请信息;
  • 缓存的数据信息为【用户ID + 企业ID】作为缓存主键,确保数据一致性、完整性,保障数据安全;
  • 缓存内存有数据信息时,就调用缓存中的数据信息,缓存内无数据信息,则用户重新录入;
  • 用户点击【退出】按钮时,清除缓存信息;

考虑根据页面生命周期函数进行处理,在博文《跨平台应用开发进阶(一) :走近 uni-app》中介绍了页面生命周期onHide()onUnload(),我们注意到onHide()触发的场景:

  • 导航页1---->导航页2,会触发导航页1 onHide();
  • 导航页----->子页面,会触发导航页 onHide();
  • 子页面1----->子页面2,会触发子页面1 onHide();
  • 切换到其他应用时,触发当前页面的onHide();

onUnload()触发的场景:

  • 从子页面2返回到子页面1,会触发子页面2的onUnload();
  • 从子页面返回到导航页,会触发子页面的onUnload();

注意: 导航页之间的切换不会触发onUnload()。 页面2返回到(页面1或者导航页)时,页面2只会触发onUnload(),并不会触发onHide()

由此可知,

  • 在页面生命周期onHide()onUnload()应用uni.setStorage()缓存用户信息;
  • 缓存的数据信息为【用户ID + 企业ID】作为缓存主键,确保数据一致性、完整性,保障数据安全;
  • 根据【用户ID + 企业ID】缓存主键缓存应用uni.getStorage()判断缓存是否有数据信息,存在数据信息就调用缓存中的数据信息,缓存内无数据信息,则用户重新录入;
  • 用户提交成功或点击【退出】按钮时,应用uni.removeStorage()清除缓存信息;

注意⚠️:清除缓存时应注意防止出现内存泄露问题!

三、拓展阅读

相关推荐
码视野11 分钟前
基于 Spring Boot + Vue3 的【大学英语四六级 (CET-4/6) 作文智能评分与句式润色系统】设计与实现(含PRD/三端高保真源码/大屏)
java·前端·人工智能·spring boot·后端·vue3
大模型码小白16 分钟前
AI 对话流性能调优:万级消息的虚拟滚动落地
java·大数据·前端·javascript·人工智能·算法·机器学习
xm_xm_xm_11 小时前
react17版本以前类组件常用操作
前端·javascript·react.js
ly76892 小时前
Web 性能优化实战:从 Core Web Vitals 到工程化性能治理
前端·性能优化
冬奇Lab2 小时前
一天一个开源项目(第200篇):next-forge - 生产级 Next.js SaaS 启动模板
前端·前端框架·开源
Profile排查笔记3 小时前
指纹浏览器怎么设置 IP?代理配置、检测与排错流程
前端·人工智能·后端·自动化
lzhdim3 小时前
13、JavaScript事件循环机制 - JavaScript学习系列文章
开发语言·前端·javascript·学习·ecmascript
liangshanbo12153 小时前
Vue 3 <script setup> 的本质原理是什么?它与普通 setup()有何区别?
前端·javascript·vue.js
IT_陈寒4 小时前
SpringBoot自动配置失效?你可能漏了这个小开关
前端·人工智能·后端
kyriewen4 小时前
我写了1个复盘Skill,和AI协作踩过的坑第二天自动变成护栏
前端·程序员·ai编程