小程序的页面路由(页面切换时onShow和onLoad的调用)

首先我们了解一下路由的触发方式

  •  wx.navigateTo  

       保留当前页面,跳转到应用内的某个页面,但是不能跳到 tabbar 页面。使用wx.navigateBack 以返回到原页面。小程序中页面栈最多十层。

wx.navigateTo({
  url: 'test?id=1',
  success: function(res) {
    //接口调用成功的回调函数
  }
})
  • wx.redirectTo

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

wx.redirectTo({
  url: 'test?id=1'
})
  • wx.navigateBack

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

        getCurrentPages()

        获取当前页面栈。数组中第一个元素为首页,最后一个元素为当前页面。

                注意事项

                        不要尝试修改页面栈,会导致路由以及页面状态错误。

                        不要在 App.onLaunch 的时候调用 getCurrentPages(),此时 page 还没有生成。

wx.navigateBack({
          delta: 1,
          success: function (e) {
            var page = getCurrentPages().pop();
            if (page == undefined || page == null) return;
            page.onLoad(page.options);
          }
        })

对于不同的路由的触发方式触发不同的页面生命周期函数

打开新页面调用 API wx.navigateTo
使用组件 <navigator open-type="navigateTo"/>
onHideonLoad, onShow
页面重定向调用 API wx.redirectTo
使用组件 <navigator open-type="redirectTo"/>
onUnloadonLoad, onShow
页面返回调用 API wx.navigateBack
使用组件<navigator open-type="navigateBack">
用户按左上角返回按钮
onUnloadonShow

总结

  • navigateToredirectTo 只能打开非 tabBar 页面。
  • 使用 navigateBack 只跳转回页面以后,只能触发onShow生命周期。
  • 调用页面路由带的参数可以在目标页面的onLoad中获取。
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值