小程序跳转多次返回首页

在这里插入图片描述

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

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

1、页面中按钮跳转

<!--D页面 WXML-->
<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()