微信小程序的几种页面跳转方式及传参

 

       微信小程序中有几种用来进行页面之间跳转的api，也有组件，在刚开始学习微信小程序的时候并不清楚，导致自己需要花很多时间去思考跳转的关系和跳转的传参，现在来记录一下这几种简单好用的跳转方式吧。

一、wx.switchTab

       如果要跳转到tabBar页面，那么就只能用它了，而且它在跳转之后会把其他的页面关闭掉，这样在对其子页面进行跳转时就不会受到层级的影响。那么什么是tabBar页面呢？

        这个tabBar栏是指在app.json文件里进行配置的导航栏，如果是自定义的导航栏是不生效的。其配置如下：(json文件不能有注释，复制的请自行删除注释)

{
  "tabBar": {
    "selectedColor": "#EA5149",
    "list": [
      {
        "pagePath": "pages/books/index", //tabBar的路径
        "text": "图书",
        "iconPath": "static/img/book.png",//未选择的图片
        "selectedIconPath": "static/img/book-active.png"//选中的图片
      },
      {
        "pagePath": "pages/tools/index",
        "text": "工具",
        "iconPath": "static/img/todo.png",
        "selectedIconPath": "static/img/todo-active.png"
      },
    ]
  }
}

 

使用方式也是很简单，直接调用switchTab API 加上url就搞定了，其用法如下：

wx.switchTab({

  url: '/books/index'

})

忘了说一点了，这个跳转方式是不能带参数的

二、wx.navigateTo

1、通过navigateTo API的方式跳转

保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。在使用的时候需要注意层级的关系，微信小程序之前限制的是最多五个层级，现在限制的是十个层级。这里参数的传递跟其他的请求一样在请求的路径后面加上？参数名=参数，有多个参数的话记得也是需要用&来连接。

其使用方法如下：

wx.navigateTo({
  url: index?id=1',
  success: function(res) {//成功的回调函数
  }，
})

1. 通过组件navigator来实现跳转

其用法也很简单，但是我发现这个跳转方式有点不足，之前公司的项目用的时候，鼠标移到相应位置会有一个透明背景，跟a标签的默认样式差不多，所以我不太喜欢使用这个跳转方式。

<view>
    <navigator url="/pages/index/index?q=1>
       <button class='btn'>跳转</button>
    </navigator>
</view>

三、wx.navigateBack

把当前页关闭，然后通过设置参数delta，来实现页面的多级返回，可以是上一页面或多级页面。这样能够让我们减少使用navigateTo，实现减少页面的层级。

其用法如下：

wx.navigateBack({

  delta: 2 //返回几个层级的参数

})

四、wx.redirectTo

它的作用是关闭当前页面，只保留跳转后的页面，但是不能跳转到tabBar页。在担心层级过多的情况下，使用它可以减少层级，如果需要返回页面，可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层，然后需要通过自定义的方式来实现。

其使用方法、传参和navigateTo一样

wx.redirectTo({

  url: index?id=1'

});

五、wx.reLaunch

它的话我目前还没用过，主要是还没这个需求用到，它的主要是关闭所有页面，只保留跳转后的页面。虽然用的少，但也要先记录一下，它的用法都一样的。

wx.reLaunch({

  url: index?id=1'

})

总体来说，能够传参数的跳转方式用法都是参不多的，不过他们的使用场景是不一样的，使用的时候需要按照自己的需要选择不同的跳转方式。