【小程序01】页面跳转与生命周期

1,737 阅读3分钟

目标位置位于tabBar中,

使用wx.switchTab跳转界面

wx.switchTab(Object object)

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

跳转操作与生命周期

wx.navigateTo(Object object)

不能跳到 tabbar 页面,调用onHide()页面周期函数

wx.redirectTo(Object object)

关闭当前页面,不允许跳转到 tabbar 页面。

小结:

  • wx.navigateTo 用于保留当前页面、跳转到应用内的某个页面,使用 wx.navigateBack可以返回到原页面。对于页面不是特别多的小程序,通常推荐使用 wx.navigateTo进行跳转, 以便返回原页面,以提高加载速度。当页面特别多时,则不推荐使用。

  • wx.redirectTo 当页面过多时,被保留页面会挤占微信分配给小程序的内存,或是达到微信所限制的 5 层页面栈。这时,我们应该考虑选择 wx.redirectTo。wx.redirectTo()用于关闭当前页面,跳转到应用内的某个页面。这样的跳转,可以避免跳转前页面占据运行内存,但返回时页面需要重新加载,增加了返回页面的显示时间。

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

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

  • wx.navigateBack 用于关闭当前页面,并返回上一页面或多级页面。开发者可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。这个 API 需要填写的参数只有 delta,表示要返回的页面数。若 delta 的取值大于现有可返回页面数时,则返回到用户进入小程序的第一个页面。当不填写 delta 的值时,就默认其为 1(注意,默认并非取 0),即返回上一页面。

wx.switchTab({
  url: '/index'
})

wx.navigateBack({
  delta: 2
})

微信小程序的生命周期函数

属性 类型 描述
onLoad Function 生命周期回调—监听页面加载
onShow Function 生命周期回调—监听页面显示
onReady Function 生命周期回调—监听页面初次渲染完成
onHide Function 生命周期回调—监听页面隐藏
onUnload Function 生命周期回调—监听页面卸载

onLoad

页面加载时触发。一个页面只会调用一次,可以在 onLoad 的参数中获取打开当前页面路径中的参数。

onShow

页面显示/切入前台时触发。

onReady

页面初次渲染完成时触发。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。

onHide

页面隐藏/切入后台时触发。 如 navigateTo 或底部 tab 切换到其他页面,小程序切入后台等。

onUnload()

页面卸载时触发。如redirectTo或navigateBack到其他页面时。 下图说明了 Page 实例的生命周期。

页面路由

Tips:

  • navigateTo, redirectTo 只能打开非 tabBar 页面。
  • switchTab 只能打开 tabBar 页面。
  • reLaunch 可以打开任意页面。
  • 页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar。
  • 调用页面路由带的参数可以在目标页面的onLoad中获取.
  • 首次进入页面时,页面周期函数调用的顺序为onLoad()、onShow()、onReady()。