小程序 —— switchTab/navigateTo/redirectTo

说明

小程序中的页面有tabbar页面和非tabbar页面，页面跳转主要通过switchTab/navigateTo/redirectTo这几种方式（reLaunch/navigateBack暂不讨论）。

• tabbar 跳到 非tabbar 可以通过navigateTo/redirectTo （见示例2.1）
• 非tabbar 跳到 非tabbar 可以通过navigateTo/redirectTo （见示例3）
• tabbar 跳到 tabbar 可以通过switchTab （见示例1）
• 非tabbar 跳到 tabbar 可以通过switchTab （见示例2）

小程序官方文档
小程序社区关于wx.switchTab的提问

文档中描述switchTab的时候，说道：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。我理解的【关闭其他所有非 tabBar页面】是会从页面栈中移除这些页面，重新打开这些页面会再次调用onLoad（见示例2）；对于【其他的tabbar页面】，会从页面栈中移除，重新打开不会调用onLoad，只会调用onShow（见示例1）

Code

// home
Page({
    onLoad() {
        console.log('onLoad in home tabbar')
    },
    onUnload() {
        console.log('onUnload in home tabbar')
    },
    onShow() {
        console.log('onShow in home tabbar')
        console.log(getCurrentPages())
    },
    onHide() {
        console.log('onHide in home tabbar')
    }
}
// center
Page({
    onLoad() {
        console.log('onLoad in center tabbar')
    },
    onUnload() {
        console.log('onUnload in center tabbar')
    },
    onShow() {
        console.log('onShow in center tabbar')
        console.log(getCurrentPages())
    },
    onHide() {
        console.log('onHide in center tabbar')
    }
}

1. 假设home和center都是tabbar页面，那么依次打印的是：

• onLoad in home tabbar
• onShow in home tabbar
• 页面栈：[home]
• ---- home switchTab center ----
• onHide in home tabbar // 此时是【hide】home，不是【unload】
• onLoad in center tabbar
• onShow in center tabbar
• 页面栈：[center] // 此时页面栈中只有center，没有home
• ---- center switchTab home ----
• onHide in center tabbar // 此时是【hide】center，不是【unload】
• onShow in home tabbar // 由于之前只是【hide】home，因此，这里是【show】home
• 页面栈：[home] // 此时页面栈中只有home，没有center

2. 假设home是非tabbar页面，center是tabbar页面，那么依次打印的是：

• onLoad in home tabbar
• onShow in home tabbar
• 页面栈：[home]
• ---- home switchTab center ----
• onUnload in home tabbar // 此时是【unload】home，不是【hide】，注意和home是tabbar页面对比
• onLoad in center tabbar
• onShow in center tabbar
• 页面栈：[center] // 此时页面栈中只有center，没有home

2.1 在上面的基础上，center再分别以 navigateTo 和 redirectTo 回到home，此时周期函数和页面栈的区别如下：

• 2.1.1 ---- center navigateTo home ----
• onHide in center tabbar // 此时是【hide】center，不是【unload】
• onLoad in home tabbar // 由于之前【unload】home，因此，这里是【load】home
• onShow in home tabbar
• 页面栈：[center, home] // 此时页面栈中有center和home，home处于栈顶
• 2.1.2 ---- center redirectTo home ----
• onUnload in center tabbar // 此时是【unload】center，不是【hide】
• onLoad in home tabbar // 由于之前【unload】home，因此，这里是【load】home
• onShow in home tabbar
• 页面栈：[home] // 此时页面栈中只有home，没有center

3. 假设home和center都是非tabbar页面，那么依次打印的是：

• onLoad in home tabbar
• onShow in home tabbar
• 页面栈：[home]
• ---- home navigateTo center ----
• onHide in home tabbar // 此时是【hide】home，不是【unload】
• onLoad in center tabbar
• onShow in center tabbar
• 页面栈：[home, center] // 此时页面栈中有home和center，center处于栈顶
• ---- home redirectTo center ----
• onUnload in home tabbar // 此时是【unload】home，不是【hide】
• onLoad in center tabbar
• onShow in center tabbar
• 页面栈：[center] // 此时页面栈中只有home，没有center