评论

由webview在小程序内不能正常返回说起

由webview在小程序内不能正常返回说起


前几天在将一个已有的H5项目,嵌入小程序,遇到小程序左上角无法返回的问题,

H5 页面中,浏览器/安卓/小程序 的 back(返回) 键,默认会直接回退到上一个页面,这听起来似乎十分正常。

但是当遇到不按常识的现象时,我们就要思考,是不是有哪个知识点,我们是缺失的?最后定位到是由于在返回这里做了特殊逻辑,特意控制不能正常返回的

本文背景

我们在平时浏览页面时,习惯了,点左上角的返回,但是有没用想想这个返回是不是可以由代码来控制呢?比如希望能监听到返回事件并且做一些处理。

本文内容

我们每次访问浏览器的时候,浏览器会按照时间的顺序把访问的页面放到历史记录里面,而且每个次都会有一个索引,默认是从0开始依此类推,所以我们刚开打浏览器控制台输出的length是1。

除此之外

HTML5引入了 history.pushState() 和 history.replaceState() 方法,它们分别可以添加和修改历史记录条目。这些方法通常与window.onpopstate 配合使用。可以用来通过代码控制返回的一些额外业务逻辑,

其中本文开头描述的,不允许返回,也是基于该事件来完成




参考文章

1)解决浏览器返回页面不刷新的问题

https://juejin.im/post/6844903818191175687

2)移动端h5监听浏览器返回操作(目前在react项目中用到)

https://juejin.im/post/6844903649378992136

3)你必须知道的路由原理

https://juejin.im/post/6844903858255167501

4)H5:“同样是返回,我们不一样”

https://juejin.im/entry/6844903625823633415

5)SPA路由机制详解(看不懂不要钱~~)

https://juejin.im/post/6844903682828402701




本文备注

我在社区有几篇实践文章,讲述正常情况下webview嵌入小程序的跳转

小程序webview嵌入H5网页,网页之间跳转实践? - 微信开放社区 https://developers.weixin.qq.com/community/develop/article/doc/000c6e20624a10e0720b80e895b813


本文总结

该文描述内容同样适用于下面需求的实现

~~~

今天中午在领完盒饭,吃饭的时候,正吃着深海鳕鱼片,蘸上番茄酱,那美味,简直无以言表。突然产品急匆匆的跑过来说:“我们要做一个搜索功能,用户在搜索框输入不同的搜索关键词时,url也要跟着变化,但是页面不能被刷新...保证用户刷新页面的时候还能定位到当前的搜索关键词”吧啦吧吧说了一大堆后,留下一句:“这个需求很简单,怎么实现我不管”,便扬长而去...留下我独自一人,面对着我已经凉透的深海鳕鱼片...


~~~~

最后一次编辑于  11-03  
点赞 0
收藏
评论

2 个评论

登录 后发表内容