评论

小程序自动销毁后的使用体验优化

小程序退出时通过onSaveExitState来保存当前页面的数据状态,以便用户再次进来继续进行之前的操作

2023年12月24日更新

经过测试发现,官方提供的onSaveExitState有一些问题,不太符合官方文档提出的预期,大家暂时慎重使用onSaveExitState功能,用其他方案吧。


========================================================================








假设用户在小程序内进行一个答题的活动,或者进行一个测试,这个活动或测试的时间比较长,大概需要10分钟的时间。当用户答题进行到一半的时候,来了一个重要的电话,电话打了十几分钟,回来之后想着继续进行操作,发现小程序是重新打开的状态。之前答题答了5分钟,白费了。这样,用户需要重新进行答题。

问题场景分析

用户离开小程序时间太久(官方说30分钟以上,但测试十几分钟分钟以上)或者手机内存不够用的时候,小程序会被销毁,也就是完全终止运行了。此时用户再想进入小程序进行之前的操作,只能重新操作一遍。

解决方案

以本场景为例,如果用户正在答题,在用户退出小程序的时候,将当前页面的答题进度数据进行一个保存,当用户再重新进入小程序的时候,检查是否有答题进行一半的数据。如果有,自动跳转到答题的页面,并且在onload中恢复退出之前状态的数据,让用户继续进行答题的操作。

微信小程序有一个非常好用的回调函数onSaveExitState。

退出状态onSaveExitState

每当小程序可能被销毁之前,页面回调函数 onSaveExitState 会被调用。如果想保留页面中的状态,可以在这个回调函数中“保存”一些数据,下次启动时可以通过 exitState 获得这些已保存数据。




代码示例:

{
  "restartStrategy": "homePageAndLatestPage"
}


Page({
  onLoad: function() {
    var prevExitState = this.exitState // 尝试获得上一次退出前 onSaveExitState 保存的数据
    if (prevExitState !== undefined) { // 如果是根据 restartStrategy 配置进行的冷启动,就可以获取到
      prevExitState.myDataField === 'myData' 
    }
  },
  onSaveExitState: function() {
    var exitState = { myDataField: 'myData' } // 需要保存的数据
    return {
      data: exitState,
      expireTimeStamp: Date.now() + 24 * 60 * 60 * 1000 // 超时时刻
    }
  }
})
onSaveExitState 返回值可以包含两项:

字段名 类型  含义
data    Any 需要保存的数据(只能是 JSON 兼容的数据)
expireTimeStamp Number  超时时刻,在这个时刻后,保存的数据保证一定被丢弃,默认为 (当前时刻 + 1 天)

一个更完整的示例:在开发者工具中预览效果





注意事项

  • 如果超过 expireTimeStamp ,保存的数据将被丢弃,且冷启动时不遵循 restartStrategy 的配置,而是直接从首页冷启动。
  • expireTimeStamp 有可能被自动提前,如微信客户端需要清理数据的时候。
  • 在小程序存活期间, onSaveExitState 可能会被多次调用,此时以最后一次的调用结果作为最终结果。
  • 在某些特殊情况下(如微信客户端直接被系统杀死),这个方法将不会被调用,下次冷启动也不遵循 restartStrategy 的配置,而是直接从首页冷启动。






最后一次编辑于  2023-12-24  
点赞 9
收藏
评论

4 个评论

  • 路人、、、
    路人、、、
    2023-11-28

    如果 this.exitState有值,是否必须配置

    代码示例:
    
    {
      "restartStrategy": "homePageAndLatestPage"
    }
    
    


    如果不配置,就this.exitState就为空

    2023-11-28
    赞同
    回复 1
    • 启年
      启年
      2023-12-24
      这个功能有问题,先别用了。
      2023-12-24
      回复
  • F4
    F4
    2022-09-15

    非常详细点赞

    2022-09-15
    赞同
    回复
  • Lipeng
    Lipeng
    2022-06-10

    很有用的分享,Mark

    2022-06-10
    赞同
    回复
  • 水心儿
    水心儿
    2022-06-07

    正好开发项目用到了,很实用

    2022-06-07
    赞同
    回复
登录 后发表内容