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

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

• 保留当前页面跳转，跳转后可以返回当前页
• 关闭当前页面跳转，无法返回当前页
• 跳转到底部标签导航指定的页面
  以上三种跳转效果通过open-type属性来控制的，更多属性请查看https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

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

<view class="btn-area">
  <navigator url="../navigator/navigator?title=navigator11" open-type="navigate" hover-class="navigator-hover">保留当前页跳转</navigator>
  <navigator url="../redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">关闭当前页跳转</navigator>
  <navigator url="../tabbar/tabbar" open-type="switchTab" hover-class="other-navigator-hover">跳转到tabBar页面</navigator>
</view>

（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实现页面跳转
   （1）同navigator组件类似，实现页面调转的api有三种方式：

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

<view class="btn-area">
  <button type="primary" bindtap="navigateBtn">保留当前页跳转</button>
  <button type="primary" bindtap="redirectBtn">关闭当前页跳转</button>
  <button type="primary" bindtap="switchBtn">跳转到tabBar页面</button>
</view>

navigateBtn:function(){
      wx.navigateTo({
        url: '../navigator/navigator',
        success: function(res){},
        fail: function() {},
        complete: function() {}
      })
   },
   redirectBtn:function(){
      wx.redirectTo({
        url: '../redirect/redirect',
        success: function(res){},
        fail: function() {},
        complete: function() {}
      })
   },
   switchBtn:function(){
     wx.switchTab({
       url: '../tabbar/tabbar',
       success: function(res){},
       fail: function() {},
       complete: function() {}
     })
   }

实现后的效果与navigator组件是一样的。

3. wx.navigateBack返回上一页

wx.navigateBack({
      delta: 1
    })

其中delta属性表示返回的页面数，如果delta大于现有页面数，则返回到首页

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

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

小结：
以上是对页面跳转基本方法进行的简单整理，具体用法及实现效果都罗列出来了，如有不足请指正，感谢！