微信小程序的页面栈的业务场景实践

微信小程序的页面栈文档中有介绍,但我个人开发小程序的前一年并没有在实际业务开发中有使用,所以不十分理解。

之后开始陆续有一些业务在优化中发现熟悉页面栈的管理有助于提高性能和维护。

我主要在两块业务中使用:

一、修改其他页面的数据

以我最近开发的一个业务为例:场景中有一个page A,有一个弹窗上有一段文字“去完成任务”。这时需要我们跳转到page B上完成任务再回来,希望能显示“已完成任务”

原本写的是当从page B回到page A时,在onShow里初始化把弹窗弹出来并把文字根据状态修改,其实发现性能并不好,逻辑也不合理。

之后使用页面栈来获取页面并管理:

let pages = getCurrentPages()
let prevPage = pages[pages.length-2]

prevPage.setData({
    ...data
})

如此一来,相比于把逻辑放在页面A上初始化判断,将该逻辑写在页面B的事件触发上,更自然也更容易管理。

二、页面栈相同页面去重

小程序刚发布的时候限制了页面栈最多只有5个,后面拓展到了10个。如果业务场景存在多页面交互的情况,这就成为一个棘手的处理。

以过去我开发过的一个场景为例:有index、player、detail三个页面,通常路径是index-->player-->detail

然而实际中detail也会有路径可以跳到player,那这样路径就显得特别乱了。用户多点几个也会导致性能急剧下降。

我写了一个通用的jumpTo方法,在方法里有一段示例代码是处理这样的业务场景:

let jumpTo = (toPage='')=>{
  let pages = getCurrentPages()
  if(pages.includes(toPage)){
      wx.navigateBack({
          delta:pages.indexOf(toPage)
      })
  }
  else{
      wx.navigateTo({
          url:toPage
      })
  }
}

其核心逻辑是当页面栈内存在同样的页面时,回退到该页面,当不存在时就是正常的跳转。

以这样的方式管理路由跳转可以很好的解决在用户跳转路径特别多时,有效的增加性能。


页面栈的实际应用还会更多,希望这篇文章能帮助到开发者们。