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

最新推荐文章于 2025-03-31 10:48:42 发布
最新推荐文章于 2025-03-31 10:48:42 发布
阅读量6.8k 收藏 8
点赞数 1
分类专栏： 微信小程序 文章标签： 微信小程序 webview
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/qq_35432904/article/details/124433585
版权

目录

一、问题描述：

二、原因：

三、解决方案：

四、注意事项：

一、问题描述：

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

四、注意事项：

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

小程序webview嵌入的H5页面，点击按钮，返回小程序的指定页面
每天都要努力学习哦~~
01-12 1万+
首先从小程序进入里的H5页面，然后H5页面里有个按钮，点击后需要跳转到小程序的注册页。那么，H5那边该怎么实现呢？因为已经进入小程序环境了，所以实现起来相对单纯的H5跳小程序比较简单。
微信小程序web-view点击跳转到外部页面
weixin_45762308的博客
07-21 1460
这里是需要点击准备跳转的A页面，url参数是动态获取的，可以跳不同的页面 //A.wxml <navigator class="container-item-title-right" url="/pages/out1/index?url={{zbinfo[0].zburl}}"> <text class="item-title-right-text">查看更多</text> <icon class='iconfont icon-62e'></i
详解解决小程序中webview页面多层history返回问题
10-16
主要介绍了详解解决小程序中webview页面多层history返回问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
微信小程序 webview 定位 并返回
最新发布
03-31 554
WEB定位API文档地址。
微信小程序使用webview后点击左上角返回按钮一次性返回小程序
Smallwhitestrive的博客
11-09 6040
当我们来到webview标签对应的网页地址的时候，在该页面内进行几次跳转后，发现点击小程序左上角返回按钮返回的是上一次跳转的内容，并没有达到我们返回小程序的需求，而是要一直点，然后才能返回小程序。我的情况是webview标签放在一个单独的页面下宽高100%占比显示，所以点击左上角的返回按钮应该回到webview标签所在页的上一个页面。这样我们就可以通过点击左上角的返回按钮一次性返回小程序了。在webview目标页面的h5中添加如下代码 =>
微信小程序 webview 返回按钮阻止返回
github_38186390的博客
05-14 9019
一。需求：微信小程序在使用webview 时，导航栏是不允许自己修改的。对于左上角的返回按钮，如果相要在返回的时候，弹框确定后再返回，微信小程序是没有api支持。在微信小程序的思路上基本无解。 二。解决办法：用于我们的webview 就是直接使用的微信浏览器。我们是可以使用js 相关的 History API. 主要是通过 设置 history.pushState 这个方法来阻止的。 history.pushState API说明：总共是三个参数，前面两个不用管直接用null 即可，第三个代码跳转页面的
微信小程序webview返回上一页到小程序
weixin_40918145的博客
11-12 9463
微信小程序webview返回上一页到小程序 1、小程序通过webview打开了h5 2、h5上点击按钮返回小程序 let ua = navigator.userAgent; if (/micromessenger/i.test(ua)) { wx.miniProgram.navigateBack({ delta: 1 })
小程序-＜web-view＞嵌套H5页面支付功能
qq_39241421的博客
07-02 2168
用JSSDK接口提供的wx.miniProgram.navigato({url: url})，跳转到过渡页面wePay，在wePay.js中处理调取微信支付接口的功能，支付成功与否，跳转到小程序包含web-view页面，动态修改url，就可跳转到H5中的指定页面，开发者工具中，web-view中的h5页面若想看到打印日志，那是看不到的，于是和同事说了一下问题，他之前遇到过，和我说可以在vue中install vconsole试试。页面之间跳转是没问题的，因后台接口也改了，要等老板上线了再做调试了。
微信小程序在web-view页面增加一个按钮
weixin_45496202的博客
04-20 2744
方法不难,重点就是要使用cover-view标签,一定要给样式,层级越高越好,再一个就是需要在真机查看效果,调整样式有点麻烦.
详解如何探测小程序返回到webview页面
10-17
主要介绍了详解如何探测小程序返回到webview页面，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
微信小程序webview内嵌H5跳转页面后没有返回按钮完美解决方案
u010439874的博客
09-06 5275
看了下其他的小程序，发现如果是两个小程序页面跳转的话，第二个页面的左上角是会有返回按钮的。那我们可以想到，如果在第二个页面也放个webview组件，用来显示跳转之后的链接，不就完美解决了吗？简单的讲就是我们可以在小程序内放置一个<web-view>组件来链接我们的HTML页面了。2. 微信小程序index用来嵌套<web-view>组件显示我们要跳转的H5网页。"navigationBarTitleText": "小程序名称",webview.wxml空白页面就可以。title: '加载中'
微信小程序webview跳转页面后没有返回按钮以及变向解决H5安卓无法监听popstate问题
weixin_42028275的博客
02-01 3210
做了一个app跳转到小程序关注公众号的需求，小程序里面用webview嵌套公众号的H5。 做完我发现左上角它没！有！返！回！键！ 然后！我查了好多资料用过双页面跳转让左上角有返回键，但是吧，它确实是有返回键了但是没办法返回到小程序 ，只是在H5内不停的返回在跳转回来。 再然后！我做了一个监H5浏览器返回，iOS展示完美，但是在安卓上不生效，也就是说在安卓无法监听 。 再再然后！我查了好多资料发现这个问题是微信浏览器的问题，且三四年前就有了，现在还没有解决，安卓上必须与当前页面产生交互才可以监听到popsta
控制微信小程序web view的返回按钮
可爱又迷人的反派少女
09-16 4102
需求：点击web-view页面的左上角返回按钮时，显示弹窗，点击取消或确认后才能返回。（实际上点击返回按钮会直接返回上一页） 解决方法：由于webview使用的是微信浏览器打开的，我们可以使用js的History API ，通过history.pushState来阻止返回。 history.pushState() 方法向当前浏览器会话的历史堆栈中添加一个状态（state）。 vue 代码 在进入页面之前，执行下面代码 <script type="text/javascript"> w
小程序中跳到webview页面没有返回按钮和标题
weixin_42342065的博客
06-08 1706
小程序中跳到webview页面没有返回按钮和标题
小程序中web-view网页中打开或返回小程序页面
羽筠的博客
05-22 2184
小程序中web-view网页中使用JSSDK提供的接口打开或返回小程序页面。1、引入 JSSDK 文件。2、判断是否在小程序环境。3、根据是否小程序环境，执行操作。
h5页面使用web-view可以跳转到小程序吗？
12-07
是的，H5页面使用web-view可以跳转到小程序。具体实现方法如下： 1. **配置小程序的跳转路径**：在H5页面中，需要配置小程序的跳转路径和相关参数。 2. **使用web-view组件**：在小程序中使用web-view组件加载H5页面。 3. **调用小程序的API**：在H5页面中，通过调用小程序的API实现跳转到小程序页面。 以下是一个简单的示例代码： ```html <!-- H5页面 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>H5页面跳转小程序示例</title> </head> <body> <button onclick="jumpToMiniProgram()">跳转到小程序</button> <script> function jumpToMiniProgram() { wx.miniProgram.navigateTo({ url: '/pages/index/index' }); } </script> </body> </html> ``` ```xml <!-- 小程序页面 --> <view> <web-view src="https://your-h5-page-url.com"></web-view> </view> ``` 在这个示例中，当用户点击H5页面上的按钮时，会调用小程序的API `wx.miniProgram.navigateTo` 实现跳转到小程序页面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值