微信小程序跳转方式及问题

一、五种跳转方式

1.wx.navigateTo()

保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面

通常推荐使用 wx.navigateTo进行跳转，以便返回原页面，以提高加载速度

wx.navigateTo({
  url: ''
})

2.wx.redirectTo()

关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面

wx.redirectTo({
  url: ''
})

3.wx.reLaunch()

关闭所有页面，打开到应用内的某个页面

wx.reLaunch()与 wx.redirectTo()的用途基本相同， 只是 wx.reLaunch()先关闭了内存中所有保留的页面，再跳转到目标页面

wx.reLanch({
  url: ''
})

4.wx.switchTab()

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

对于跳转到 tabBar 的页面，最好选择 wx.switchTab()，它会先关闭所有非 tabBar 的页面。其次，也可以选择 wx.reLaunch()，它也能实现从非 tabBar 跳转到 tabBar，或在 tabBar 间跳转，效果等同 wx.switchTab()。使用其他跳转 API 来跳转到 tabBar，则会跳转失败

wx.switchTab({
  url: ''
})

5.wx.navigateBack

关闭当前页面，返回上一页面或多级页面。可通过getCurrentPages 获取当前的页面栈，决定需要返回几层

这个 API 需要填写的参数只有 delta，表示要返回的页面数。若 delta 的取值大于现有可返回页面数时，则返回到用户进入小程序的第一个页面。当不填写 delta 的值时，就默认其为 1（注意，默认并非取 0），即返回上一页面

wx.navigateBack({
  delta: 1
})

二、跳转问题汇总（不定时更新）

微信小程序路由跳转有个隐藏的坑，就是 wx.navigateTo打开新页面，最多只能打开10个，超过10个之后就没反应，控制台也不会报错。

方案一：简单粗暴navigateTo不行，用redirectTo

小程序路由跳转的方式有五种，分别是wx.navigateTo（打开新页面，新页面入栈）、wx.redirectTo（重定向，当前页面出栈，新页面入栈）、wx.navigateBack（返回，页面不断出栈，直到目标返回页）、wx.switchTab（切换tab页面，页面全部出栈，只留下新的 Tab 页面）、wx.reLaunch（页面全部出栈，只留下新的页面）由此产生了第一种方式，当页面栈超过 10 时，直接用redirectTo。但这样太粗暴了，显然很多场景是需要保留访问过的页面的，由此有了方案一的升级版。

方案一升级版：根据页面栈决定当前跳转方式

每次跳转先去页面栈中查找目标页面是否已经访问过，如果访问过则用wx.navigateBack返回，如果没有访问过则判断页面栈中是否已经有10个页面，有则用wx.redirectTo，没有则navigateTo

class RouteMap {
  constructor(opt={}) {
    this.MAX_DEEP = opt.MAX_DEEP || 10
    this.IS_AUTO_BACK = opt.IS_AUTO_BACK || true
    this.PAGE_STACk = getCurrentPages()
  }
 
  _findPageInHistory(path) {
    const { PAGE_STACk } = this
    let delta = -1
    for (let i = 0; i < PAGE_STACk.length; i++) {
      if (PAGE_STACk[i].route === path) {
        delta = i + 1 // 目标页在栈中的位置
        break
      }
    }
    return delta
  }
 
  _dataToUrlQuery(data={}) {
    let query = '?';
    const prop in data) {
      if (data.hasOwnProperty(prop)) {
        const value = data[prop];
        query += `${prop}=${value}&`
      }
    }
    return query.replace(/&$/,'');
  }
 
  goPage(opt) {
    if (!opt) return new Error('缺少参数')
    if (opt && !opt.path) '缺少跳转目标path')
    const pageStackLen = PAGE_STACk.length
    let { path,data } = opt
    let delta = this._findPageInHistory(path)
    path = '/' + path.replace(/^\//,0);">'') + this._dataToUrlQuery(data)
 
    if (delta > -1 && this.IS_AUTO_BACK) {
      // 如果有目标页已经是被访问过的
      const backPage = PAGE_STACk[pageStackLen - delta]
      backPage.setData({data});
      wx.navigateBack({
        delta: pageStackLen - delta
      })
    } else {
      if (pageStackLen < this.MAX_DEEP) {
        wx.navigateTo({
          url: path
        })
      } else {
        wx.redirectTo({
          url: path
        })
      }
    }
  }
 
}
 
module.exports = RouteMap

但是这样依然有问题，页面传参数变得无法统一，而且明明是前进页面，用户使用的时候很可能看着就是返回了几个页面。

方案二：在小程序页面栈之外维护多一个自己的逻辑栈

详细细节见该博客