Freetao's Blog

小程序页面“被缓存”问题的解决方法

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

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

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

现象

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

解决办法

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

具体到代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 被“缓存”的状态
var option = {
a: 1
}

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

}
})

改为:

1
2
3
4
5
6
7
8
9
10
11
12
13
Page({
// 移到这里
option: {
a: 1
},
data: {
b: 2
},
onLoad (options) {
const foo = this.option.a

}
})

产生原因

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

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

总结

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

Kainy Guo wechat
微信扫码,或订阅 Feed 解锁更多开发技能。