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

更新日期: 2019-04-14 阅读次数: 1117 字数: 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年07月23日 大暑
2019年07月30日 非洲妇女日
2019年08月01日 八一建军节
2019年08月06日 国际电影节
2019年08月07日 七夕
2019年08月08日 立秋
2019年08月15日 日本投降日
2019年08月15日 中元节
2019年08月23日 处暑
2019年09月03日 抗日胜利纪念日
2019年09月08日 白露
2019年09月08日 国际扫盲日
查看更多节日