小程序页面栈详解( 二 )


情景:确认订单页用户点击左上角返回
假设场景:用户在商品详情页直接点击“立即购买”下单购买,进入确认订单页,付款成功后跳转到付款成功页面,此时用户点击左上角箭头进行了返回…… 处理:此时理应进入商品详情页,所以在确认订单页付款成功跳转时应当将确认订单页出栈,新页面入栈,那么就不可以使用wx.navigateTo来进行页面跳转,应当使用wx.redirectTo

小程序页面栈详解

文章插图
 
情景:确认订单页用户选择已有收货人
假设场景:在确认订单页,用户需要选择已有的收货人,而已有收货人列表在另一个页面,那么用户点击“选择收货人”之后,使用wx.navigateTo跳转到收货人列表,点击某个收货人,带参数返回确认订单页…… 处理:在确认订单页使用wx.navigateTo跳转到收货人列表,然后在收货人列表里click事件中获取页面栈,直接往上一个页面setData,然后退回上一个页面,show code:
const page = getCurrentPages()if (page.length > 1) { page[page.length - 2].setData({ 收货人: 选中的某个收货人详情 //[object] }) wx.navigateBack({ delta: 1 })}复制代码
上面例子中提到过,在页面中通过 getCurrentPages() 方法来获取当前页面栈,并且获取到的是一个数组,其中每个item都是每个页面的Page对象,那么我们就可以使用 setData 方法直接改变上一个页面展示的数据,并且直接退回上一个页面 。
此时官方提醒:
小程序页面栈详解

文章插图
 
虽然这种方法简便,但是官方也给出提醒,页面栈数据可以自行修改,但是!一定要慎重,否则会导致页面状态错误 。
总结: 总觉得漏了点啥,又想不起来…… 官方文档应有尽有,多研究官方文档,多引发思考并手写demo尝试,总会有一些新的发现,另外,方法千万条,随便选一条,根据自己业务逻辑选用合适的方法 。

【小程序页面栈详解】


推荐阅读