导航API

本文编辑：  心城浏览 4036 1 版权所有，严禁转载

接口说明:

对页面的切换的操作,实现页面之间的跳转

接口用法：

 wx.navigateTo(OBJECT),对页面的跳转,保留当前页,但是为了不让用户在使用小程序时造成困扰，腾讯规定页面路径只能是五层，请尽量避免多层级的交互方式。
wx.navigateBack(OBJECT),关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层

【图片】

【代码】

wxml

<!--index-->
<view class="container">
<button bindtap="navigateTo">跳转到新界面</button>
</view>
<!-- navigator.wxml -->
<view> 点击左上角返回回到之前页面 </view>
<view>跳转携带的数据:{{id}}</view>
<button bindtap="back">返回界面</button>

js

//index
navigateTo:function(){
    wx.navigateTo({
      url: 'navigate?id=1'
    })
  }
//navigator
back:function(){
    console.info(getCurrentPages() );
    wx.navigateBack({
    delta: 1
  })
  }

wx.redirectTo(OBJECT),关闭当前页面，跳转到应用内的某个页面
【图片】

【代码】

wxml

<!--index-->
<view class="container">
<button bindtap="navigateTo">跳转到新界面</button>
<button bindtap="redirectTo">跳转到新界面redirectTo</button>
</view>
<!-- navigator.wxml -->
<view> 左上角并没有返回的按钮 </view>
<view>跳转携带的数据:{{id}}</view>
<button bindtap="back">返回界面</button>

js

//index
redirectTo:function(){
  wx.redirectTo({
     url: 'navigate?id=1'
  })
  }

wx.switchTab(OBJECT),跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
【图片】

【代码】

wxml

<!--index-->
<view class="container">
<button bindtap="navigateTo">跳转到新界面</button>
<button bindtap="redirectTo">跳转到新界面redirectTo</button>
</view>
<!-- navigator.wxml -->
<button bindtap="toTabBar">返回TabBar</button>

js

//index
redirectTo:function(){
  wx.redirectTo({
     url: 'navigate?id=1'
  })
  }
//navigator
toTabBar :function(){
   wx.switchTab({
    url: '/pages/index/index'//一定注意要在前面加上/
  })
  }

json

{
  "pages":[
    "pages/index/index",
    "pages/index/navigate",
    "pages/index/redirect",
    "pages/index/index2"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": " navigator测试",
    "navigationBarTextStyle":"black"
  },
    "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/index/index2",
      "text": "index2"
    }]
  }
}

主要方法：

【wx.navigateTo(OBJECT)】：【跳转到另一页面并保留当前的页面】

【方法内容描述】

//跳转页面
wx.navigateTo({
  url: 'test?id=1'
})
//test 跳转到的页面
Page({
  onLoad: function(option){
    console.log(option.id)
  }
})

【wx.redirectTo(OBJECT)】：【关闭当前页面，跳转到应用内的某个页面】

【方法内容描述】

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

【wx.switchTab(OBJECT)】：【跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面】

【方法内容描述】

{
  "tabBar": {
    "list": [{
      "pagePath": "index",
      "text": "首页"
    },{
      "pagePath": "other",
      "text": "其他"
    }]
  }
}

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

特别提醒,请在url前面加上/

【wx.navigateBack(OBJECT)】：【关闭当前页面，返回上一页面或多级页面】

【方法内容描述】

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码

// 此处是A页面
wx.navigateTo({
  url: 'B?id=1'
})

// 此处是B页面
wx.navigateTo({
  url: 'C?id=1'
})

// 在C页面内 navigateBack，将返回A页面
wx.navigateBack({
  delta: 2
})

特别提示:
wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面，只能用 wx.switchTab 跳转到 tabbar 页面