小程序页面“被缓存”问题的解决方法_《Hi, Kainy》学习笔记,》小程序,前端开发,页面缓存,

看到 caoz 在公众号文章《小程序的红利期》里提到

“有时候进入小程序，会乱跳一些非目标页面，比如进入某人的语音红包，结果进入的是另一个人的”

这个问题。自己曾今遇到并解决过，可至今仍能在一些颇具影响力的小程序上发现，似乎不少开发者都认定这是小程序的锅了，感觉有必要把这个问题拎出来说说。

现象

如上所述，短时间内进出同一个小程序的不同链接，会打开前一次进入的页面，好像“页面被缓存”或者“数据被缓存”了导致”小程序页面乱入“。手动结束该小程序的后台进程（安卓）或重启微信（iOS、安卓）后，再打开才展示正确的页面。

解决办法

将页面 js 文件中 Page（）函数之外的变量都移到 Page（）函数内。

具体到代码

// 被“缓存”的状态
var option = {
  a: 1
}

Page({
  data: {
    b: 2
  },
  onLoad (options) {
    const foo = option.a
    …
  }
})

改为：

Page({
  // 移到这里
  option: {
    a: 1
  },
  data: {
    b: 2
  },
  onLoad (options) {
    const foo = this.option.a
    …
  }
})

产生原因

小程序没有重启的概念，返回或者点击关闭操作时进入后台，会维持一段时间的运行状态（除非达到触发销毁的条件）。

再次打开的逻辑是清空页面栈进入指定页面，而如果此时小程序处于后台运行的状态，Page（）之外声明的变量并未被销毁，如果上一个页面注销前改动过，并且再次进入的页面访问到这个变量，就会把页面状态保持下来出现“页面乱入”的情况。而由于页面栈被清空，Page（）整个被销毁了，存在其中的状态也自然不存在了，这就是第二段代码的写法能问题解决的原理。

总结

原理和解决方法并不复杂，理解了小程序的生命周期，也就好办了。所以开发文档前面的基础内容如“框架”部分还是有必要认真看完，切不可看懂“简易教程“就对着 API 文档开干哦。

为您推荐