持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第8天，点击查看活动详情

第一种:< navigator>< /navigator>标签.

这是最常见的一种跳转方式,相当于html里的a标签.但需要注意的是 该方法不能跳转tabbar页面.

格式为:

 <navigator url="........"></navigator>

第二种:wx.navigateTo.

通过构造js函数,在函数中调用该接口可实现页面跳转的效果.但该接口同样不能跳转tabbar页面.当使用该方法跳转时开发者工具会报错. 例:

 post_calculator: function () {
    // wx.switchTab({
    //   url: '/pages/calculator/calculator',
    // })

    wx.navigateTo({
      url: '/pages/calculator/calculator',
    })
  },
  

当成功跳转非tabbar页面后左上角有返回小箭头,点击可返回原本页面.

格式为:

wxml:
<view class="select_calculator" bindtap="next_calculator">
js:
next_calculator:function () {
    wx.navigateTo({
      url: '/pages/calculator/calculator',
    })
 
  },

第三种:wx.redirectTo.

 关闭当前页面，跳转到应用内的某个页面(不能跳转tabbar页面)。类似于html中的 window.open('.....');

跳转后左上角出现返回小箭头,点击后可返回原本页面.

第四种:wx.switchTab.

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面；该方法只能跳转tabbar页面.

例如:

部分wxml:

    <view class="select_row1">
      <view class="select_help">
        <view class="select_text"> 使用说明</view>
      </view>
      <view class="select_calculator" bindtap="post_calculator">      
        <view class="select_text"> 计算器
        </view>
      </view>
    </view>

部分js: 

  post_calculator:function () {
    wx.switchTab({
      url: '/pages/calculator/calculator',
    })
  },
 

第五种:wx.reLaunch.

关闭所有页面，打开到应用内的某个页面。

跟 wx.redirectTo 一样左上角不会出现返回箭头，但两者却不完全相同； 在wx.navigateTo 中，每跳转一个新的页面,其原本的页面都会被加入到堆中,通过调用wx.navigateBack可通过堆中保存的页面返回上一级或前几级页面. wx.redirectTo方法不会被加入堆,但仍可通过wx.navigateBack返回保存的页面. wx.reLaunch 方法则会清空当前的堆栈。 返回上级页面:

wx.navigateBack({ 
	delta: 1 //返回上一级页面
});