微信公众号网页返回上一页时保持原页面之前的状态

更新日期: 2019-04-14 阅读次数: 174 字数: 495 分类: 微信公众号

在微信公众号里实现了一个手机网页版的商城。但是出现了一个体验问题,首页有多个商品分类,体现为一个水平的 tab,每切换一个分类,下方的商品列表会随之变化。实现方式用的是 vant ui 的 tab 组件,即 vuejs 的实现。但是点击一个商品进入商品详情页,再退回首页,之前选中的分类又恢复了初始状态。

现象

  • 下拉的位置是对的
  • 选中的分类 tab 是错的

下拉位置正确,说明内置浏览器还是有基本的还原状态的机制。

解决思路

只要在返回原页面时知道最后一次点击的分类 tab 是什么就可以了。

所以,需要一个状态保存和提取的机制。

history.replaceState 在微信内置浏览器内无效

history.replaceState 是常用的一种前后页面间共享状态的方式。存入的 state 参数,在页面返回时,会通过 window.onpopstate 事件返回当前页面。

但是实际测试发现,无论我将 window.onpopstate 事件监听放到 vue 生命周期的 beforeCreate,还是其他任何周期函数中,都无法监听到该事件。挪出 vue 对象也同样无效。

所以,我怀疑微信内置浏览器根本不支持这个事件。。。

localStorage 最简单的反而是最有效的

history.replaceState 行不通之后,我觉得这样搞还是复杂话了。实际上完全可以用 cookie 或者 localStorage 来实现。

用 cookie 不合适,因为没有提交到服务端的必要。所以,用 localStorage 存取状态再合适不过了。

而且,还有一点,在微信中如果关闭当前网页,很快微信就会清空该网页的 cookie 和 localStorage 数据,这一原本是个坑的机制,反而对体验更加友好,因为关闭页面之后,把选择状态重置是个合理的做法。

爱评论不评论

近期节日

2019年04月26日 知识产权日
2019年04月30日 全国交通安全反思日
2019年05月01日 国际劳动节
2019年05月04日 五四青年节
2019年05月06日 立夏
2019年05月08日 世界红十字日
2019年05月08日 世界微笑日
2019年05月12日 国际护士节
2019年05月12日 母亲节
2019年05月12日 佛诞
2019年05月15日 国际家庭日
2019年05月17日 世界电信日
查看更多节日