今天小程序完成了一个新功能,在自测的时候发现了一个问题,小程序的返回按钮点击没反应了,一开始以为是模拟器的问题,结果使用实机测试同样复现了这个问题。
具体跳转路由为:
首页 => wx.navigateTo =>
新功能列表页 => wx.navigateTo =>
新功能添加页 => wx.redirectTo =>
新功能详情页 => 返回按钮 =>
新功能列表页 => 返回按钮 =>
首页
结果从 详情页 返回 列表页 之后,返回按钮点上去没反应了!!!页面中添加一个自定义按钮调用 wx.navigateBack
返回也不行。
监听了 wx.navigateBack
的 success
、fail
、complete
三个回调之后发现,success
和 fail
都不执行,只执行了 complete
的回调,输出为:
complete: {errMsg: "fail:navigateBack intercepted"}
很明显,返回按钮被劫持了,但是我这几个页面都没有劫持过路由,就在我一筹莫展之时,从微信社区找到了一个问题反馈 关于page-container,返回键被锁死?。
确实,我在 新功能列表页 中使用了 page-container
来做半屏弹窗,通过 show
属性来控制组件显示,返回按钮被劫持多半就是因为这个了,原因如下:
页面内存在该容器(
page-container
)时,当用户进行返回操作,关闭该容器不关闭页面。返回操作包括三种情形,右滑手势、安卓物理返回键和调用navigateBack
接口。
但是为什么已经操作 show
属性关闭 page-container
返回按钮还是被锁定,就不清楚了。
🧠 解决问题
把跳转到添加页的业务修改成先执行 wx.navigateBack
之后再跳转,发现还是有这个问题,放在 wx.navigateBack()
的回调里边执行,依旧有这个问题。
重新尝试把路由跳转放到 wx.setData()
的回调中执行也不能解决问题。说明不能同时去执行这两个操作,即使通过回调来执行。
所以只能按照这个 问题贴 中的办法,使用 setTimeout
来避免返回按钮被 page-container
劫持。
📑 解决方案:
// 关闭半屏弹出
onCloseDialog () {
this.setData({
dialogVisible: false,
})
},
// 跳转到添加页面
navigateToAddPage () {
this.onCloseDialog()
const timer = setTimeout(() => {
clearTimeout(timer)
wx.navigateTo({
url: addPagesPath,
})
},200)
}
具体为什么 page-container
通过修改 show
关闭,或者是通过 navigateBack
关闭,页面返回操作还是会被劫持,我就没办法解答了。看看微信官方是否后续会解决这个问题吧。