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

微信小程序中提供了多种页面跳转方法，可以使用navigator页面链接组件，也可以在js文件中设置导航进行页面跳转，同时可以设置导航条标题和显示动画效果。

1. navigator页面链接组件
navigator组件用于在wxml文件中实现页面跳转，它有三种类型：

• 保留当前页面跳转，跳转后可以返回当前页
• 关闭当前页面跳转，无法返回当前页
• 跳转到底部标签导航指定的页面

以上三种跳转效果通过open-type属性来控制的，更多属性请查看https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

下面来演示下open-type不同导航类型的调转效果。
（1）在wxml文件中设置导航跳转的三种方式：保留当前页调转、关闭当前页跳转和跳转到tabBar页面。

	
		保留当前页跳转
	
	
		关闭当前页跳转
	
 	
		跳转到tabBar页面
	

（2）跳转到tabBar页面需要在app.json文件中设置tabBar属性

"tabBar": {
    "selectedColor": "red",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "pages/images/tab/headline-0.jpg",
        "selectedIconPath": "pages/images/tab/headline-1.jpg"
      },
      {
        "pagePath": "pages/tabbar/tabbar",
        "text": "关闭当前页打开导航",
        "iconPath": "pages/images/tab/me-0.jpg",
        "selectedIconPath": "pages/images/tab/me-1.jpg"
      }
    ]
  }

2. 使用api实现页面跳转
同navigator组件类似，实现页面调转的api有三种方式：

• wx.navigateTo: 保留当前页面跳转
• wx.redirectTo: 关闭当前页面跳转
• wx.switchTab: 跳转到底部标签导航指定的页面

wx.navigateTo()
这是最普遍的一种跳转方式，其官方解释为：保留当前页面，跳转到应用内的某个页面，类似于html中的 window.location.href=“XXX”;

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

小程序中左上角有一个返回箭头，可返回上一个页面，也可以通过方法 wx.navigateBack 返回原页面，其中delta属性表示返回的页面数，如果delta大于现有页面数，则返回到首页

wx.navigateBack({
  delta: 1
})

wx.redirectTo()
关闭当前页面，跳转到应用内的某个页面。类似于html中的 window.open(‘XXX’);

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

wx.switchTab()
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面，只能用 wx.switchTab 跳转到 tabbar 页面

//app.json >> tabBar
{
  "tabBar": {
    "list": [{
      "pagePath": "index",
      "text": "首页"
    },{
      "pagePath": "other",
      "text": "其他"
    }]
  }
}
//跳转
wx.switchTab({
  url: '/index'
})

3. 设置导航条
可通过wx.setNavigationBarTitle动态设置当前页面的标题

wx.setNavigationBarTitle({
   title: '新页面'
});