uni-app - 完美解决安卓苹果 App 端平台内嵌网站后，导致手机物理返回按键失效解决方案（内嵌的 webview 网页 H5 打包后手机物理返回键无效直接退出应用了），提供详细的解决示例代码！

已于 2025-01-19 16:10:51 修改
阅读量1w 收藏 14
点赞数 9
CC 4.0 BY-SA版权
分类专栏： + UniApp + Uniapp 开发问题汇总 文章标签： uniapp 安卓app内嵌h5网页无法返回 苹果ios软件嵌套网站返回上页 左滑返回上一页直接退出了 u打包编译的app软件嵌套h5 app套壳网页解决物理返回失效 使用webview套入网站
于 2022-07-19 15:57:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44198965/article/details/125873352
本篇博客详细介绍了在uni-app中解决安卓和苹果App内嵌H5网页后，手机物理返回键失效的问题。通过三个步骤设置，使用户在进入二级网页后仍能通过物理返回键回到上一页，避免直接退出应用。适用于uniapp v2和v3版本，确保webview内网页的正常返回操作。

前言

当您打包安卓或苹果app后，发现内嵌的 H5 网站虽然可以正常显示与运行，但是手机的物理返回键却无法使用，当点击手机物理返回按键（或手势）时，直接显示 “再按一次退出应用”，而 并非返回上一个"网页"。

在 uniapp 安卓苹果ios软件app开发中，当软件嵌套 webview 网页后手机 “物理返回” 导致直接退出应用，无法返回上一页。

在app里内嵌H5网页后，进入网页二级页面后发现使用 “手机回退” 时竟然直接返回到了桌面上！

如下图所示，支持 uniapp v2 / v3 版本，使用本文的解决方法后可以让您嵌套的网站支持 “手机物理按键” 进行回退返回！

您只需要复制本文提供的核心代码，便可 100% 完美解决。

在这里插入图片描述

注意看标题变化与点击返回按钮的变化。

第一步

首先我们先来

了解本专栏 订阅专栏 解锁全文
uni-app -移动端H5小程序 关闭当前页，返回上一页并调用上一页的方法
专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。
10-07 4237
在uni-app中，方法用于获取当前页面栈的实例数组。页面栈是指打开的页面的层级关系，当前页面在数组中的索引为，上一页在数组中的索引为，以此类推。方法返回的是一个页面栈数组，数组中的每个元素都是一个页面实例，包含了页面的数据和方法。通过获取页面栈数组，我们可以根据索引获取到上一页的实例，然后可以调用上一页的方法或访问上一页的数据。
h5移动端实现物理返回键关闭弹框而非返回上一级页面
qq_40026668的博客
04-08 2915
需求：页面中的popup弹框，可以通过物理返回键进行关闭 方案： （1）当打开弹框时，向history中添加一个空记录，并且监听history的popstate变化 （2）当弹框打开状态用户操作了返回上一级页面，会触发监听事件，关闭弹框 （3）当弹框打开状态用户通过状态值（比如popup中有个取消按钮）关闭了弹框，要把监听事件清除 实现 // vue3 setup模式 import { useEventListener } from '@vueuse/core' //页面中点击打开弹框按钮..
uniapp运行app 页面嵌入h5,返回键失效
weixin_43926335的博客
12-03 1538
解决方案:在web-view页面加入代码 onReady() { // #ifdef APP-PLUS var currentWebview = this.$scope.$getAppWebview().children()[0]; currentWebview.addEventListener("loaded", function() { undefined currentWebview.evalJS( "mui.init({keyEventBind: {bac
uniapp：app使用webview链接uniapp打包的H5时物理返回键失效
weixin_44914717的博客
11-23 1668
uniapp：app使用webview链接uniapp打包的H5时物理返回键失效 场景说明： 在这个项目中使用webview跳转另一个uniapp打包成h5的项目。在h5链接里，app使用物理返回键（手机自带返回键）无效。 1.webview跳转页面 <web-view :webview-styles="webviewStyles" :src="url" @message="handleMessage"></web-view> 2.解决方法 写在打包为h5的项目中： 目录： 代码：
uniapp（安卓手机）使用内置Webview打开外部链接，外部页面有个返回按钮返回到uniapp
乔的博客
07-30 121
uniapp项目的页面：/pages/component/webview/webview.vue。
【uniapp 解决使用web-view嵌套H5页面以后返回失效的问题】
qq_45231745的博客
04-29 1030
例如：数据传输过程中数据不时出现丢失的情况，偶尔会丢失一部分数据。
uniapp 操作webview 网页返回
apple_50717761的博客
07-08 314
本文介绍了在UniApp中实现WebView左滑返回功能的方法。由于UniApp组件无法直接控制WebView返回，特别是访问外部网址时，作者通过以下步骤实现：1)在onShow中获取屏幕高度；2)在onReady创建WebView并设置参数（包含自定义导航栏的80px顶部偏移）；3)在methods中拦截返回事件处理WebView返回。该方法适用于无网页通信场景，参考H5规范实现，解决了WebView的返回控制问题。
uniapp嵌套webview，无法返回上一级？
Smile_ping的博客
01-20 2760
解决uniapp嵌套webview页面后，无法返回上一级的问题。
uni app 登录页设计 及解决物理返回问题
mapleqqq的博客
07-28 1430
uni app 实现后台管理系统，android应用，登录成功后android手机物理返回可以到登录页，退出成功后，Android手机物理返回，又可以回到退出页面。 # 场景： 在没有登录的时候，一打开app 就要显示登录页面，如果登录过则显示第一个tab页面 由于底部的tab最多只能有三个，并且五个都已经占用，没有多余的tab分给登录页面， 如果将登录放在二级页面，那么，ios下屏幕上的左滑动，会返回到上一层，安卓的物理返回键，也会返回到上一层，无法做到登录页面视觉上是第一个页面 # 解决方法。 将登
uniapp打包嵌入app，物理返回键的问题
m0_50290552的博客
07-07 1864
问题描述：将uniapp开发的应用打包成wgt包放入app后，发现手机自带的返回键的点击有问题，比如我从app原生提供的入口进入了uniapp的列表页，然后我又进入了详情页，这时候在详情页点击物理返回键的话，它直接就返回了app提供的入口的页面了，而不是uniapp的列表页。以上代码添加后就不需要添加其他代码了，通过测试，发现能正常返回上一页了。但这个方法有个缺点就是每个页面都得写一下这个生命周期，我这个项目已经写了好多页面了，我不想每个页面都去写一下这个，于是我放弃了这个方式。
uniapp的物理返回键
dabao87的博客
01-14 2561
需求是在tabbar的页面除了首页的任意一页面中，按物理返回键先返回到首页再按返回键提示退出 //物理返回按钮先返回到首页 onBackPress(options) { uni.switchTab({ url:'../index/index' }) return true; }, 亲测有效！！！ ...
解决uniapp使用webview引用H5网页手机物理返回无效
...
12-23 4227
解决uniapp使用webview引用H5网页返回直接退出程序
uniapp webview全屏
weixin_43315721的博客
08-12 2857
// #ifdef APP-PLUS var currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效，非v3编译模式使用this.$mp.page.$getAppWebview() setTimeout(function() { let wv = curr
uni-app 监听移动端的物理返回键
PrimaryColor
02-20 5520
onBackPress(options) { console.log("用户按下物理返回键"); },
uniappH5中监听手机自带物理返回键
candyy5的博客
07-14 1941
【代码】uniappH5中点击手机自带物理返回键出现提示框。
Uni-app(webapp)安卓返回键失效问题
qq_35728142的博客
10-15 1447
【代码】Uni-app(webapp)安卓返回键失效问题。
uniapp中手机APP控制物理返回
六一首席
08-27 4123
背景 使用uniapp开发手机APP，在列表--新增--列表，这时候如果在列表页面手机物理返回，会回到新增页面去了，而我想达到的目的是 从列表页面如果返回的话要到首页去 方案1：使用uniapp的onBackPress方法，它可以监听手机的物理返回操作 出现的问题： 因为APP中我使用到了权限控制，也就是必须登录才可以正常访问，所以使用了vue中的router。问题就出在这里，如果我用了vue-router，然后又在页面中使用onBackPress，那么会先执行路由...
【uniapp】监听物理返回按钮事件
qq_36687211的博客
06-27 4445
前言：开发中需要用户使用手机自带返回（物理返回）时跳出弹窗询问是否保存。在需要触发截停返回的页面中使用。环境：Android。
uni-app为什么返回的不是上个页面了？
南漂一枚
01-21 1140
开发中发现，我从任务详情返回首页，居然自动返回到了上上个页面。这主要是因为back按钮调用了一次返回。然后在onUnload生命周期中，又执行了一次返回。所以导致了2次返回。
除了上述方法，还有其他解决 uni-app 内嵌网站物理返回键失效的方法吗？
最新发布
09-04
除了之前监听 `onBackPress` 方法的解决方案，还可以通过在 H5 页面与 App 之间进行通信来处理物理返回键事件。以下是具体的实现步骤和示例代码： #### 1. 在 H5 页面中添加消息监听与发送逻辑 在 H5 页面中，监听 `popstate` 事件，当用户在 H5 页面中进行返回操作时，通过 `postMessage` 向 App 发送消息。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // 监听 popstate 事件 window.addEventListener('popstate', function() { // 向 App 发送消息 window.webkit.messageHandlers.nativeApp.postMessage('goBack'); // 适用于 iOS window.postMessage('goBack', '*'); // 适用于 Android }); // 模拟页面跳转 function navigate() { history.pushState({}, '', 'new-page.html'); } </script> <button onclick="navigate()">跳转到新页面</button> </body> </html> ``` #### 2. 在 uni-app 中监听消息并处理返回逻辑 在 uni-app 的页面中，监听 H5 页面发送的消息，根据消息内容处理返回逻辑。 ```vue <template> <view> <web-view :src="webUrl" @message="handleMessage"></web-view> </view> </template> <script> export default { data() { return { webUrl: 'https://example.com', // 替换为实际的 H5 网页地址 }; }, methods: { handleMessage(e) { const message = e.detail.data[0]; if (message === 'goBack') { const webview = this.$refs.webviewRef; if (webview) { webview.canGoBack({ success: (res) => { if (res.canGoBack) { webview.goBack(); } }, }); } } }, }, }; </script> ``` ### 原理说明 - 在 H5 页面中，通过监听 `popstate` 事件，当用户进行返回操作时，向 App 发送 `goBack` 消息。 - 在 uni-app 中，通过监听 `web-view` 的 `message` 事件，接收 H5 页面发送的消息，并根据消息内容处理返回逻辑。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

蔡来了

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值