解决小程序中使用webview 返回按钮需要点击两次才能返回

最新推荐文章于 2024-05-19 10:57:47 发布
最新推荐文章于 2024-05-19 10:57:47 发布
阅读量6.3k 收藏 14
点赞数 1
分类专栏： 小程序常见问题 文章标签： 小程序 webview
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43258005/article/details/105026087
版权

在开发小程序中，碰到使用web-view标签进入活动页，在返回时需要点击两次才能返回小程序，查了很多文档，通过验证找到了解决方法

1.出现原因
通过小程序社区以为也是加了#wechat_redirect导致

在这里插入图片描述
于是把参数去掉进行测试，发现还是要点击两次才能返回，猜测应该是链接里面别的重定向导致

2.解决方法
在百度上查找了很多相关的解决方法，但是测试都没生效，不过天无绝人之路，还是在一位大佬的博客中发现了解决方案。

思路：通过history.pushState添加历史记录名目，history.onpopstate监听历史记录条目发生变化时，调用小程序APIwx.navigateBack

history.pushState

话不多说，上代码

//需要在链接页面的js中添加
history.pushState({
最低0.47元/天 解锁文章
this指向谁
关注
  • 1
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解解决小程序中webview页面多层history返回问题
10-16
主要介绍了详解解决小程序中webview页面多层history返回问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
用mpvue写微信小程序时，webview跳转外部链接，再跳转回来需要点两次返回箭头才能跳转...
baobi2612的博客
09-11 1070
问题描述： 　　给公司做微信小程序时遇到了这个问题，用mpvue框架搭建的小程序，从首页点击进去，先跳转到一个中间页面，在中间页面放上webview链接到外部的H5页面，这时点击小程序左上角自带的返回按钮，第一次会跳转到空白页，再点一次才能跳转到首页。 　　首页： 　　　　 　　详情页： 　　　　 　　这时需要点击左上角的返回箭头两次，才能跳转到首页 解决办法：...
解决uniapp中web-view在手机端需点击两次才能返回上一页
gluttony_coder的博客
11-17 3902
问题：web-view组件在app端需返回两次才能返回上一页，在小程序和H5返回正常。通过js的方式创建web-view进行返回。
解决web-view 的h5页面无法返回的问题
最新发布
qq_57477371的博客
05-19 332
当微信小程序使用web-view嵌套h5页面，需要返回小程序页面时，会发现点击左上角的返回按钮，不生效，返回不了，这是因为使用web-view跳转到h5页面，微信小程序无法监听到h5页面的返回事件，即返回不生效。1. 在h5页面设置全局监听(记得引入js文件)
微信小程序中webview授权后返回两次问题
weixin_43837268的博客
01-09 1313
window.replace使用后会返回两次。2、直接在小程序webview中配置。
uni-app 开发小程序 web-view 返回上一页需要点击两次
ma_s_c的博客
01-13 2119
开发中使用web-view引入某个htm（小程序应该无法使用本地html，只能以http方式引入）。 当返回上一页时，发现需要点击两次。 猜测：应当是web-view的src中使用了变量，导致初始化和修改变量时进行了两次加载。 解决办法：web-view 添加v-if控制，从而在页面初始化时不进行web-view的渲染。在src中的变量修改完成之再后进行web-view渲染。 ...
小程序 web-view组件点击两次返回才能返回小程序问题
qq_18342353的博客
03-22 1485
问题背景 引用小程序web-view组件返回出现问题。 问题表现 采用小程序web-view组件跳转到外部网站时，需要点击两次返回才能返回到小程序。 解决方法 方法一：在目标网站内引入script标签。 代码如下： <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.j...
微信小程序web-view点击需要返回两次和缓存的问题
weixin_45356397的博客
05-25 1630
在web-view中点击左上角需要点击两次才能返回的问题解决 这是写在h5页面里面的 window.addEventListener('popstate', (event) => { wx.miniProgram.navigateBack(); }); const code = getSearch('code'); // 伪代码，获取查询参数 if (!code) { // 页面A1 if (isWeixin()) { // 微信环境 const redirectUrl =
详解如何探测小程序返回到webview页面
10-17
在开发微信小程序的过程中，有时我们需要将用户从小程序页面引导到内嵌的Webview页面，并确保当用户返回Webview时，页面能及时更新显示最新的数据。本文将深入探讨如何实现这一功能，通过实例代码和详细步骤解析如何...
小程序中的webview上增加浮动元素(按钮等).zip
12-30
2. **外联方式**：在小程序的Page组件中，使用原生小程序组件覆盖在Webview之上。这样可以利用小程序的能力，如wx.onButtonTap事件来处理按钮点击。例如： ```javascript // index.wxml <view class="webview-...
uniapp app端 webview 返回多次
风花一世月
01-29 1134
嵌入页面有多个历史时，app端默认会返回嵌入页面的上一页，而不是uniapp的上一页 onBackPress可以拦截到返回类型，实体返回(from = backbutton)、导航栏左上角返回(from = backbutton)、uni.navigateBack()返回 (from = navigateBack) onBackPress返回为true才不执行默认返回、使用自己的方法 注：onB...
mpvue开发笔记，关于web-view改变src路径刷新页面，回退时要点两次或者两次以上才能返回到上一个小程序页面
卿本无忧的博客
01-15 3483
为了实现某些效果，在小程序用了web-view组件来显示HTML页面 &lt;web-view :src="src"&gt;&lt;/web-view&gt; HTML页面点击按钮跳回小程序页面 $(".msg-edit").click(function(){ if(window.__wxjs_environment === 'miniprogram'){ wx.miniPro...
小程序新闻详情用webview,页面点击返回需要点击两次
小怪獸丶的糖的专栏
07-29 3158
解决办法： 一、引入js <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script> 二、处理返回 <script> window.onunload = function () { wx.mi...
小程序使用WebView解决跳转两次问题
F_efforts的博客
03-12 2765
由于在小程序和APP需要复用一套页面，所以使用h5嵌套在各种平台上 小程序中，当跳转Webview页面时，可以明显感到刷新两次 并且在h5回退到小程序中，他会卸载页面返回上一个同样的页面 也就造成了我们回退小程序返回两次 这样对用户体验并不友好 在小程序中可以这样解决 Taro使用： 在webview的页面中 {this.state.access_token && <WebView src={this.state.url && this.state.url }
微信小程序左上角的返回箭头需要，点击两次才能返回成功
zhangll211的博客
04-03 4832
1、使用默认返回箭头的时候，A 跳转B 用navigateTo B跳转C 用redirectTo C返回的话就会返回到A；点击返回时就可能 需要点击两次了，（navigateTo： 保留其他页面 跳转 带返回按钮；redirectTo ：销毁其他页面跳转）， 2、我这里出问题 是因为 使用了 iView Weapp开发，这个 （i-cell）标签 默认值是navigateTo，点击时其他页面没...
uni.navigateTo使用次数过多，跳回上一级页面
StriplingLee的博客
01-14 1368
在订单页面多次点击修改地址，在点击订单页左上角回退，会一直在订单页和地址页面反复横跳。这个时候可以在地址页面跳转处将uni.navigateTo，修改为uni.navigateBack(个人遇见的跳转Bug) // 跳转至地址页面 uni.navigateBack({ url: jumpAddress, delta: 1, }); ...
小程序嵌入web-view，返回键点击多次才能返回上一次的问题
阿不的专栏
02-12 3481
在小程序里嵌入web-view，如果web-view本身有跳转页面，在web-view里跳转页面后，点击小程序的返回键，并不会返回小程序的上一页，而是返回web-view的上一页。 这在很多应用场景下是非常影响用户体验的，那么如何实现小程序的web-view里不管跳转多少次，点击小程序的返回键，都返回小程序的上一页呢。 可以使用浏览器window.history对象，记录页面的跳转情况，然后调用原生小程序的方法回到上一页，以抖音小程序为例： <script type="text/javascr
微信小程序使用web-view跳转到外部页面返回需要点击两次问题
u013682258的博客
09-13 2535
先说一下需求; 微信小程序A页面点击按钮跳转到B页面; A页面: <!-- 详情跳转至二维码页面 --> <view class='needScoreView' data-gid="{{item.erweimaUrl}}" bindtap="erWeiMa"> <text class='needSocreText'>[查看详情]</text> </view> B页面: ..
小程序：web-view点击后退出现空白页，需要再次点击
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
11-01 4728
问题 首页点击链接跳转至web-view内嵌的H5页面，在H5页面点击小程序的后退按钮，不能直接返回首页，显示H5空白页面，再次点击才能回到首页。 解决 官方文档 2019.10.21 解决了这个bug，还没下载最新开发者工具的小伙伴们快去下载吧，，坑！！！！！！！https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.ht...
uniapp使用webview的页面需要返回两次
05-24
在使用uniapp的webview组件时，如果需要返回两次才能退出页面，有可能是因为在webview中嵌入的H5页面中使用了history.back()方法，导致返回栈中多了一层。可以尝试在H5页面中使用history.go(-1)方法或者uni.navigateBack()方法返回上一级页面，这样就可以避免返回栈中多余的一层，实现一次返回退出页面的效果。另外，也可以在webview组件中设置vue-router的mode为history模式，这样就可以使用uni.navigateBack()方法进行返回，而不会出现返回两次的情况。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值