微信小程序返回键被劫持点击无效

今天小程序完成了一个新功能,在自测的时候发现了一个问题,小程序的返回按钮点击没反应了,一开始以为是模拟器的问题,结果使用实机测试同样复现了这个问题。

具体跳转路由为:

首页 => wx.navigateTo => 新功能列表页 => wx.navigateTo => 新功能添加页 => wx.redirectTo => 新功能详情页 => 返回按钮 => 新功能列表页 => 返回按钮 => 首页


结果从 详情页 返回 列表页 之后,返回按钮点上去没反应了!!!页面中添加一个自定义按钮调用 wx.navigateBack 返回也不行。

监听了 wx.navigateBacksuccessfailcomplete 三个回调之后发现,successfail 都不执行,只执行了 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 关闭,页面返回操作还是会被劫持,我就没办法解答了。看看微信官方是否后续会解决这个问题吧。

参考资源