小程序 - 页面跳转 扒一扒

       刚接触小程序时，看到这 4 个单词:reLaunch、switchTab、redirectTo、navigateTo，都有类似跳转的感觉，但随便拿一个出来用，都有种看韩国选美比赛，指着其中一个，问你叫什么名字的感觉。个人的习惯是，首字母联想记忆，这四个跳转的首字母，分别是，R、S、R、N，我记忆成：认识RN，小程序的页面标签，不就是 RN 那一套嘛！这个方法，比较容易形成永久记忆！而且，这个四哥个单词都是驼峰命名！

     提示：about.wxml 是导航页面，demo.wxml 是非导航页面，微信小程序版本是：1.02

     主要从页面跳转是否导航页，可否传递参数，是否带返回按钮 3 个方面进行测试。

1、reLaunch 重启

跳转支持：导航页、非导航页，可传参

跳转的页面，不带返回按钮

<!-- index.wxml -->
<view>
  <button bindtap="jump1">跳转 - reLaunch</button>
</view>

//index.js
Page({ 
  jump1() {    
    wx.reLaunch({
      url: '../about/about?t=reLaunch',
      //url: '../demo/demo?t=reLaunch',
    })
  }, 
})

2、switchTab 切换标签

跳转支持：只支持导航页，不支持传参，页面会提醒：wx.switchTab: url 不支持 queryString

跳转的页面，不带返回按钮

<!-- index.wxml -->
<view>
  <button bindtap="jump2">跳转 - switchTab</button>
</view>

//index.js
Page({ 
  jump2() {
    wx.switchTab({
      url: '../about/about'
    })
  },
})

3、redirectTo  重定向

跳转支持：只支持 非导航页，支持传参

跳转的页面，不带返回按钮

<!-- index.wxml -->
<view>
  <button bindtap="jump3">跳转 - redirectTo</button>
</view>

//index.js
Page({ 
  jump3() {
    wx.redirectTo({
      url: '../demo/demo?t=redirectTo',
    })
  },
})

4、navigateTo 导航到

跳转支持：只支持 非导航页，支持传参；也就是跟 redirectTo 一样，但是：

带返回按钮  “<”，唯一的！

<!-- index.wxml -->
<view>
  <button bindtap="jump4">跳转 - navigateTo</button>
</view>

//index.js
Page({  
  jump4() {
    wx.navigateTo({
      url: '../demo/demo?t=navigateTo',
    })
  },
})

5、navigateBack

测试过程中，暂时只有通过 navigateTo 方式 跳转的页面，navigateBack 才会返回原页面，且不支持回传参数！

 用例 6 的 <navigator> 也是一样的。

<!-- index.wxml -->
<view>
  <button bindtap="jump4">跳转 - navigateTo</button>
</view>

//index.js
Page({  
  jump4() {
    wx.navigateTo({
      url: '../demo/demo?t=navigateTo',
    })
  },
})

<!-- demo.wxml -->
<view> 
  <button bindtap="jumpBack">跳转 - navigateBack </button>
</view>

//demo.js
Page({ 
   jumpBack() {
    wx.navigateBack({
      url: '../index/index'
    })
  }
})

* 6、<navigator>

发现 跟 navigateTo  效果一样：只支持非导航页，能传参，跳转的页面，还带熟悉的返回按钮 “>”

<navigator url="../demo/demo?t=navigator">跳转</navigator>

其实，是因为 <navigator> 有个的属性 open-type，刚好他的默认值是：navigate，也就等同于：navigateTo

open-type 属性值：reLaunch |  switchTab |  redirect | navigate | navigateBack | exit

显而易见，这些属性，分别对等于上面例中的 reLaunch 、switchTab 、redirectTo、navigateTo、navigateBack；

exit 暂时无效，官网显示是 2.1 版本 

 

ps：以上范例中，demo.wxml、about.wxml 页面接收参数：

//导航页： about.js
Page({
  onLoad: function (options) {
    console.log(options.t)
  }  
})


//非导航页： demo.js  
Page({
  onLoad: function (options) {
    console.log(options.t);
  }
})