小程序的web-view页面返回按钮跳转问题

编程之家收集整理的这篇文章主要介绍了小程序的web-view页面返回按钮跳转问题编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

概述

项目场景:最近在开发小程序使用web-view嵌套H5页面,H5页面是vue单页面,router采用的history的模式,微信小程序里web-view页面是一个网站,里面包括多层的跳转,发现点击小程序原生的左上角按钮,不能一次返回小程序的页面,而是把H5的所有的历史地址返回一遍后才会回到小程序,对用户体验不友好问题描述提示:这里描述项目中遇到的问题:例如:数据传输过程中数据不时出现丢失的情况,偶尔会丢失一部分数据APP 中接收数据代码:@Override publi.,下方主要介绍关于小程序的web-view页面返回按钮跳转问题的全文内容,希望对你有所帮助。

目录

一、问题描述:

二、原因:

三、解决方案:

四、注意事项:


一、问题描述:

最近在开发小程序使用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

四、注意事项

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

总结

以上是编程之家为你收集整理的小程序的web-view页面返回按钮跳转问题全部内容,希望文章能够帮你解决小程序的web-view页面返回按钮跳转问题所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。

HTML文章

HTML邮件内容所在上下文或者说所在外部容器(以下简称环境)都是由邮箱服务商决定的,这就要求邮件内容需要在任何一种情况下都要正确显示。
HTML内容类型决定使用的语义标签,在网页中某种类型的内容必定需要某种特定的HTML标签来承载,也就是我们常常提到的根据你的内容语义化HTML结构。
HTML代码在书写的时候应该遵循什么规范?青岛星网今天跟大家分享:HTML的代码格式规范,希望大家都可以写出高质量的HTML代码。
青年码农 一个码农运营的公众号,佛系更新。 139篇原创内容 ...
better-scroll实现左侧导航点击,右侧内容滚动,或者右侧内容滑动,左侧导航联动
一、基本使用需求:有两个页面(A 和 B),当我们在页面A的table列表中点击查看详情按钮,跳转到B页面,在B页面点击返回时,要定位到之前A的列表位置, 不能刷新该页面。在 <router-view /> 的外层包一个 keep-alive 如:<keep-alive include="pageA"> <router-view /></keep-alive>其中 include 为要缓存的页面,如果有多个页面可用逗号隔开,pageA为.
WebviewObjectWebview窗口对象,用于操作加载HTML页面的窗口属性id:webview窗口的标识方法:监听addEventListener添加事件监听器wobj.addEventListener( event, listener, capture );参数说明:event: ( WebviewEvent ) 必选 Webview窗口事件类型liste...
1、Android调用H5(JS)1.1、新建assets资源目录并将准备好的HTML页面放入其中(真实项目中HTML页面放在Tomcat中启动)1.2、初始化webView并加载HTML页面 @SuppressLint({"SetJavaScriptEnabled", "AddJavascriptInterface"}) public void initWebView() { //可以加载网页和自定义浏览器 webView = new W
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注