小程序跳转多次返回首页

小程序跳转多次返回首页

小程序跳转多个页面后直接返回首页 问题

例： 跳转：A(首页) - > B -> C -> D 返回：D -> A(首页)

1、页面中按钮跳转

<view class="-btn">
	<button bindtap="goBack">返回button>
view>

1.1、已知 跳转次数

如果已知了跳转次数 比如上面跳转了 3 次

A(首页) - > B -> C -> D 之间的跳转 用 wx.navigateTo

wx.navigateTo({
 url:'/pages/...'
})

D -> A 返回 用 wx.navigateBack

// D页面 js
goBack(){
  wx.navigateBack({
  	delta: 3
	})
}

1.2、未知 跳转次数

D -> A 返回之间的跳转 用 wx.reLaunch

wx.reLaunch({
  url: '/pages/A/A'
})

2、点击左上角返回

正常点击左上角返回 是直接返回的 C 页面

要想返回 A（首页）需要了解 路由方式

所以当 D - A 时 会触发 onUnload

2.1、已知 跳转次数

  // D页面 js
  onUnload () {
      wx.navigateBack({
        delta: 3
      })
  },

2.2、未知 跳转次数

  // D页面 js
  onUnload () {
    wx.reLaunch({
  		url: '/pages/A/A'
		})
  },

3、我自己遇到的问题

两种进 E(页面) 路径，但是 E(页面) 只能返回（点击左上角）到 A(首页)。

A(首页)->E(页面)
A(首页)->B(页面)->C(页面)->D(页面)->E(页面)

我是已知了两种情况

并且已知了 跳转的 次数

然后 结合路由信息getCurrentPages() 来实现返回的

• 上一个页面是 A(首页) 就直接返回，不做处理
• 上一个页面是 D(页面) 使用 wx.navigateBack 返回

实现代码：

data:{
  prevPageUrl: "", // 前一个页面的路由 路径
}

onUnload () {
    if (this.data.prevPageUrl !== "pages/index/index") {
      wx.navigateBack({
        delta: 4
      })
    }
},
    
// 获取上个页面的路由
getPrevPageUrl() {
    const pages = getCurrentPages() // 获取加载的页面
    const prevPage = pages[pages.length - 2] // 获取当前页面的对象
    const url = prevPage.route // 当前页面url
    this.setData({
      prevPageUrl: url
    })
}

4、路由方式

对于路由的触发方式以及页面生命周期函数如下：

路由方式	触发时机	路由前页面	路由后页面
初始化	小程序打开的第一个页面		onLoad, onShow
打开新页面	调用 API wx.navigateTo 使用组件 ``	onHide	onLoad, onShow
页面重定向	调用 API wx.redirectTo 使用组件 ``	onUnload	onLoad, onShow
页面返回	调用 API wx.navigateBack 使用组件`` 用户按左上角返回按钮	onUnload	onShow
重启动	调用 API wx.reLaunch 使用组件 ``	onUnload	onLoad, onShow

Tab 切换对应的生命周期（以 A、B 页面为 Tabbar 页面，C 是从 A 页面打开的页面，D 页面是从 C 页面打开的页面为例）：

当前页面	路由后页面	触发的生命周期（按顺序）
A	A	Nothing happend
A	B	A.onHide(), B.onLoad(), B.onShow()
A	B（再次打开）	A.onHide(), B.onShow()
C	A	C.onUnload(), A.onShow()
C	B	C.onUnload(), B.onLoad(), B.onShow()
D	B	D.onUnload(), C.onUnload(), B.onLoad(), B.onShow()
D（从转发进入）	A	D.onUnload(), A.onLoad(), A.onShow()
D（从转发进入）	B	D.onUnload(), B.onLoad(), B.onShow()

5、注意事项

• navigateTo, redirectTo 只能打开非 tabBar 页面。
• switchTab 只能打开 tabBar 页面。
• reLaunch 可以打开任意页面。