uniapp打包嵌入app,物理返回键的问题

问题描述:将uniapp开发的应用打包成wgt包放入app后,发现手机自带的返回键的点击有问题,比如我从app原生提供的入口进入了uniapp的列表页,然后我又进入了详情页,这时候在详情页点击物理返回键的话,它直接就返回了app提供的入口的页面了,而不是uniapp的列表页。
解决方法一: 使用uniapp官方提供的页面生命周期钩子函数去监听页面返回,即onBackPress,具体查看uniapp官网:

uniapp官网地址
在这里插入图片描述
但这个方法有个缺点就是每个页面都得写一下这个生命周期,我这个项目已经写了好多页面了,我不想每个页面都去写一下这个,于是我放弃了这个方式。

解决方法二(这个方法是比较适合我这种懒人的,但仅限app,仅限app,仅限app~~~):
主要是通过html5PLUS提供的api监听物理返回键的点击事件,在回调里处理返回,需要找到项目的app.vue文件,在onLaunch的生命周期里添加以下代码:

// #ifdef APP-PLUS
const webview = plus.webview.currentWebview();
		plus.key.addEventListener('backbutton', () => {  
		    webview.canBack(e => {  
		        if (e.canBack) {  
					webview.back(); //这里不建议修改自己跳转的路径
		        } else { 
		        //这里可以用来处理自己的返回逻辑,我这里仅仅是让它能正常返回上一页而已
					uni.navigateBack({ delta: 1 });
		        }  
		    })  
		});
// #endif

以上代码添加后就不需要添加其他代码了,通过测试,发现能正常返回上一页了。还有另外一点就是ios手机是可以侧滑返回上一页,目前ios的侧滑事件是无法监听的,需要禁止用户的侧滑,可以通过配置来禁止侧滑,在pages.json的globalStyle中添加以下:

"globalStyle": {
		// #ifdef APP-PLUS
		"app-plus": {
			"popGesture": "none"
		},
		// #endif
		...
	},

ps:值得一提的是在uniapp中是不需要监听plusready事件的,我一开始就是去监听了这个事件,反而没有了效果,最后去uniapp官网查看才发现不需要监听这个事件:
uniapp打包嵌入app,物理返回键的问题_第1张图片

你可能感兴趣的:(uni-app)