用h5做了一个简单的攻略页,浏览页面20s后会调接口自动发放一个攻略红包,
当浏览页面不到20s 点击页面顶部的返回按钮要先清定时器,然后再返回上一页,
h5页面是react单页面
这个h5页是被内嵌在微信小程序和ios、安卓的app里,
首先在小程序里用web-view把h5页引进来,顶部的返回是小程序原生的就可以完成这个功能,
点击返回的时候,页面就会销毁, react页面销毁会执行componentWillUnmount,所以在这个生命周期里清定时器就好了
但是ios 安卓里用这种方法却没办法清除定时器,简单做了个实验
安卓app里,点击手机上自带的物理返回键是可以清除定时器的,说明componentWillUnmount执行了,页面是真正的销毁,
但是点击页面上的返回按钮是清除不了定时器的,
所以初步断定安卓页面上原生的返回按钮有可能不是销毁页面,有可能只是把页面隐藏了。
所以要想在app里点返回按钮,返回上一页之前去清除定时器,只能让app把原生的返回功能隐藏掉,
h5自已写一个返回栏,在点击返回按钮的时候,先清定时器,然后再调ios 安卓提供的方法返回上一页。
此文章特此记录下项目中遇到的问题,希望可以帮到有类似需求的小伙伴,有更好的方法的大神也来指导下~