微信小程序 导航 4种页面跳转 详解

1、wx.navigateTo   保留当前页面，跳转到应用内的某个页面，目前页面路径最多只能十层。 

　　参数：url（可携带参数） 、success 、fail 、complete

　　可用wxml代替:   <navigator url='test?id=参数'  hover-class="none">

//本页面 
wx.navigateTo({
    url:'test?id=参数',
　　success:function(){
　　　　console.log('接口调用成功')
　　},
　　fail:function(){
　　　　console.log('接口调用成功')  
　　},
　　complete:function(){
　　　　console.log('调用结束，调用成功失败都会执行')
　　}
})

//test 页面拿 参数，在onload方法中 以对象的方式传回
Page({
　　onLoad:function(options){
　　　　console.log(options)  // {id:'参数'}
　　}
})

　　

2.wx.redirectTo　关闭当前页面，跳转到应用内某个页面。（如果下一页面 有返回上一页箭头，则跳过当前页面）

　　参数：url（可携带参数）、 success 、fail 、complete

　　用法同1

 

3.wx.reLaunch    关闭所有页面，打开到应用内的某个页面。（不会有返回上一页箭头）

　　参数：url（可携带参数）、 success 、fail 、complete

　　用法同1

 

4.wx.switchTab    跳转到tabBar 页面，并关闭其他所有非 tabBar 页面

　    参数：url（可携带参数）、 success 、fail 、complete

　　用法同1

　　另：  tabBar 在app.json中配置，附配置方法

//tabbar配置 示例
"tabBar": {
    "color": "#bcbcbc",
    "selectedColor": "#4d4d4d",
    "borderStyle": "#bcbcbc",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "libs/img/tab_index.png",
        "selectedIconPath": "libs/img/tab_index_on.png",
        "text": "主页"
      },
      {
        "pagePath": "pages/mall/mall",
        "iconPath": "libs/img/tab_mall.png",
        "selectedIconPath": "libs/img/tab_mall_on.png",
        "text": "商城"
      },
      {
        "pagePath": "pages/per/per",
        "iconPath": "libs/img/tab_per.png",
        "selectedIconPath": "libs/img/tab_per_on.png",
        "text": "个人"
      }
    ]
  }

 

5.wx.navigateBack 返回到上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定要返回几层

　　参数：delta 返回的页面数，如果大于现有页面数，则返回到首页。。。

wx.navigateBack({

　　　　delta:2     //如果delta大于等于2，返回目标页时，中间页会出现一下相继返回至目标页。  解决办法：中间页用 wx.redirectTo代替

})