IT技术之家

首页 > 小程序

小程序

小程序的web-view页面返回按钮跳转问题_荷花微笑_小程序webview返回上一页

发布时间:2022-10-24 16:46:33 小程序 0次 标签:微信小程序 webview
项目场景:最近在开发小程序使用web-view嵌套H5页面,H5页面是vue单页面,router采用的history的模式,微信小程序里web-view页面是一个网站,里面包括多层的跳转,发现点击小程序原生的左上角按钮,不能一次返回小程序的页面,而是把H5的所有的历史地址返回一遍后才会回到小程序,对用户体验不友好问题描述提示:这里描述项目中遇到的问题:例如:数据传输过程中数据不时出现丢失的情况,偶尔会丢失一部分数据APP 中接收数据代码:@Override publi....

目录

一、问题描述:

二、原因:

三、解决方案:

四、注意事项:


一、问题描述:

最近在开发小程序使用web-view嵌套H5页面,H5页面是vue单页面,router采用的history的模式,

微信小程序里web-view页面是一个网站,里面包括多层的跳转?,发现点击小程序原生的左上角

按钮,不能一次返回小程序的页面,而是把H5的所有的历史地址返回一遍后才会回到小程序,

对用户体验不友好

二、原因:

小程序的头部自带的返回按钮是根据history栈进行逐层返回的

三、解决方案:

方案一:在H5项目里面,用this.$router.replace 代替this.$router.push,

说明;

this.$router.push:跳转到指定URL,向history栈添加一个新的纪录,点击后退会返回至上一个页面。

this.$router.replace 跳转到指定的URL,不会向history里面添加新的记录,替换history栈中最后一个记录,点击后退会返回至上一个页面。(A----->B----->C 结果B被C替换 A----->C)

方案二:通过history.pushState添加历史记录名目,history.onpopstate监听历史记录条目发生变化时,调用小程序API :wx.navigateBack

目前方案二不适合目前需求,采用的的方案一开发的

History.pushState() - Web API 接口参考 | MDN在 HTML 文档中,history.pushState() 方法向当前浏览器会话的历史堆栈中添加一个状态(state)。https://developer.mozilla.org/zh-CN/docs/Web/API/History/pushState

四、注意事项:

目前本人觉得这两个方案都不是最佳解决方案,只是强制解决了问题,如果有遇到相同问题,有更好的解决方案的大佬们可以留言,谢谢