问题描述:将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官网查看才发现不需要监听这个事件: