跨平台应用开发进阶(十三) :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()清除缓存信息;

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

三、拓展阅读

相关推荐
米丘几秒前
了解 Javascript 模块化,更好地掌握 Vite 、Webpack、Rollup 等打包工具
前端
Heo2 分钟前
深入 React19 Diff 算法
前端·javascript·面试
滕青山3 分钟前
个人所得税计算器 在线工具核心JS实现
前端·javascript·vue.js
小怪点点4 分钟前
手写promise
前端·promise
国思RDIF框架13 分钟前
RDIFramework.NET Web 敏捷开发框架 V6.3 发布 (.NET8+、Framework 双引擎)
前端
Mintopia14 分钟前
如何在有限的时间里,活出几倍的人生
前端
炫饭第一名14 分钟前
速通Canvas指北🦮——变形、渐变与阴影篇
前端·javascript·程序员
Neptune115 分钟前
让我带你迅速吃透React组件通信:从入门到精通(上篇)
前端·javascript
阿懂在掘金16 分钟前
Vue 表单避坑(一):为什么 v-model 绑定对象属性会偷偷修改父组件数据?
前端·vue.js
小码哥_常21 分钟前
Android与JS交互:解锁混合开发的魔法之门
前端