微信小程序之 页面跳转方法汇总

原创 明天的地平线  2019-12-31 10:30  已被 226 人围观

任何框架都逃脱不了页面跳转的问题,微信小程序有自己的一套框架,并且也提供了我们一套很完整的页面直接跳转的方法,完全能够满足我们不同业务场景跳转的需求,下面我们来总结一下有哪些跳转的方法:

1、使用小程序的APi来进行跳转

1)使用wx.navigateTo进行跳转,navigateTo是保留当前页面,跳转到应用内的某个页面,跳转时会将该页面加入到堆栈,因此可以使用wx.navigateBack可以返回到原页面

wx.navigateTo({
  url: 'page/home/indes?id=11'
})

2)使用wx.redirectTo进行跳转,redirectTo会关闭当前的页面跳转到指定页面

wx.redirectTo({
  url: 'page/home/index?id=11'
})

3)使用wx.switchTab进行跳转页面,switchTab跳转的页面只能是pp.json中注册过的tabBar页面,跳转同时会关闭非tabBar页面

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

4)使用wx.reLanch进行跳转页面,reLanch会关闭堆栈中所有的页面,打开应用中指定的页面

wx.reLanch({
  url: 'page/home/index?id=11'
})

5)使用wx.navigateBack进行页面跳转,navigateBack是返回上一级页面,delta:返回的页面数,如果 delta 大于现有页面数,则返回到首页,默认值为1

wx.navigateBack({
  delta: 2
})

2、使用wxml页面组件跳转,我们可以通过open-type属性来指明页面跳转的方式,参数和调整效果与上面的api效果一致

// navigator 组件默认的 open-type 为 navigate 
<navigator url="/page/navigate/navigate?title=12" hover-class="navigator-hover">跳转到新页面</navigator>

// redirect 对应 API 中的 wx.redirect 方法
<navigator url="../../redirect/redirect/redirect?title=12" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>

// switchTab 对应 API 中的 wx.switchTab 方法
<navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切换 Tab</navigator>

// reLanch 对应 API 中的 wx.reLanch 方法
<navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">关闭所有页面,打开到应用内的某个页面</navigator>

// navigateBack 对应 API 中的 wx.navigateBack 方法
<navigator url="/page/index/index" open-type="navigateBack" hover-class="other-navigator-hover">关闭当前页面,返回上一级页面或多级页面</navigator>

本文地址:https://www.somta.net/article/129.html
关注我们:请关注一下我们的微信公众号:扫描二维码明天的地平线的公众号,公众号:明天的地平线
版权声明:本文为原创文章,版权归 明天的地平线 所有,欢迎分享本文,转载请保留出处!

发表评论