当前位置:   article > 正文

微信小程序页面跳转三种方式_微信小程序跳转

微信小程序跳转

为了不让用户在使用小程序时造成困扰,微信小程序规定页面路径只能是五层,请尽量避免多层级的交互方式。
页面跳转的话就涉及到了多个页面层级

第一种:wx.navigateTo(OBJECT)
保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。

object参数说明:

参数 类型 必填 说明
url String 是 需要跳转的应用内页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 ‘path?key=value&key2=value2’

  1. goto: function (e) {
  2. let a =e.currentTarget.dataset.id
  3. wx.navigateTo({
  4. url: '../index/index?id'+id
  5. })
  6. }

另一个页面在 onLoad 接参数

  1. onLoad(options) {
  2. // console.log(options.id);
  3. let id =options.id
  4. },

第二种:wx.redirectTo(OBJECT)
关闭当前页面,跳转到应用内的某个页面。

OBJECT参数说明:

参数 类型 必填 说明
url String 是 需要跳转的应用内页面的路径

  1. goto: function (e) {
  2. let a =e.currentTarget.dataset.id
  3. wx.navigateTo({
  4. url: '../index/index?id'+id
  5. })
  6. }

第三种:wx.navigateBack(OBJECT)
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈,决定需要返回几层。
OBJECT参数说明:

参数 类型 默认值 说明
delta Number 1 返回的页面数,如果 delta 大于现有页面数,则返回到首页

  1. onLoad: function(options) {
  2. var pages = getCurrentPages()
  3. var num = pages.length
  4. navigateBack:function(){
  5. wx.navigateBack({
  6. delta: num
  7. })
  8. }
  9. }

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/很楠不爱3/article/detail/131693
推荐阅读
相关标签
  

闽ICP备14008679号