解决使用Hbuilderx打包Vue项目为安卓APP点击物理返回键直接退出应用问题

祈盼啦啦啦

于 2021-04-06 16:58:45 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue javascript android html5

本文链接：https://blog.csdn.net/weixin_39969277/article/details/115464202

vue 专栏收录该内容

12 篇文章

订阅专栏

在Vue框架的安卓应用中，遇到点击物理返回键直接退出应用的问题。解决方案是在index.js中添加代码监听返回按钮事件，当有上一个路由时返回上一页面，否则提示用户确认是否退出应用。如果需要禁用特定页面的返回按钮，可以参考后续文章。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述

使用vue框架写的项目，打包之后用Hbuilderx打包成了apk文件，在安卓手机上测试时发现点击安卓的物理返回按钮时会直接杀死应用。

解决思路

如果没有上一个路由地址则直接退出应用，如果有则返回到上一个路由地址的页面。

开始操作

找到文件的index.js文件，在<title></title>代码下面添加一段代码

<script>
			document.addEventListener('plusready', function() { //添加一个点击事件监控返回按钮
				var webview = plus.webview.currentWebview();
				plus.key.addEventListener('backbutton', function() {
					webview.canBack(function(e) {
						if ( e.canBack() ) {
							webview.back(); //如果有上一个路由则直接返回上一个路由页面
						} else { //如果没有则询问是否要退出应用，或者执行其他操作
							if (confirm("确定要退出应用吗？")) {
							    txt = "确定";
							  } else {
							    txt = "取消";
							  }
							  if (txt === "确定") {
								  webview.close(); //关闭应用  
							}
						}
					})
				});
			});
		</script>