关于微信小程序 怎样处理用户手势返回的问题?

image.png

image.png

上面第一张图是提交订单页面,下面是确认支付页面,在微信小程序中,客户在进入确认支付页面,如果这时候操作手机屏幕的手势返回 就又会回到提交订单页面,但是我们想让用户在确认支付页面 不管通过什么方式返回,都要回到订单详情页面,左边导航的点击返回,已经做了处理,但是却控制不了用户的手势返回,包括通过监测路由栈变化,也监听不了,请问这种情况如何处理呢?

阅读 2k
avatarAI BotBETA

在微信小程序中,处理用户手势返回的问题通常可以通过覆盖页面的 onBackPress 方法来实现。onBackPress 方法会在用户点击 Android 设备的物理返回键或执行 iOS 的手势返回时被调用。

然而,你提到的问题在于,即使你试图通过监听路由栈变化来处理返回逻辑,也无法控制用户的手势返回。在这种情况下,一个可能的解决方案是在确认支付页面添加一个自定义的返回按钮,并在该按钮的点击事件处理器中实现你想要的返回逻辑。

例如,你可以在确认支付页面的 WXML 文件中添加一个返回按钮,如下所示:

<button bindtap="goBack">返回</button>

然后,在确认支付页面的 JS 文件中,实现 goBack 方法,使用 wx.navigateBack 函数并指定 delta 值来回到订单详情页面,如下所示:

Page({
  goBack: function() {
    wx.navigateBack({
      delta: 2 // 回到订单详情页面
    });
  }
});

在这个例子中,delta 值为 2,意味着小程序将回退两个页面,从确认支付页面回到订单详情页面。你可以根据你的小程序页面结构来调整这个值。

这样,即使用户执行手势返回,也会触发自定义的返回按钮的点击事件,从而实现你想要的返回逻辑。需要注意的是,这种方法需要用户主动点击返回按钮,而不是直接执行手势返回,但考虑到你已经无法直接控制手势返回,这可能是一个可行的替代方案。

5 个回答

进入支付页面的时候使用 wx.redirectTo 而不是 wx.navigateTo。这样就可以直接返回到购物车页面了。


Edit

如果说是想要在用户提交订单之后进入到支付页面,拦截用户的右滑返回,然后跳转到订单详情页面这样是不行的。只能在返回到提交订单页面后做跳转逻辑。

另个思路,调整下需求。既然已经生成支付单了,那返回之后的提交订单页判断一下,修改展示内容为提醒用户支付

有类似场景,提个思路:在订单页面加个状态标识,如果用户二次进入,就redirectTo你想要的页面。因为小程序页面栈的设计,这样会有较为明显的页面出入栈动画

实现这个功能比较复杂,需要绕来绕去。 核心是通过:page-container 标签实现。

你看看同程的酒店程序,是不是符合你的交互预期

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏