刚接触小程序时, 看到这 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);
- }
- })
来源: http://www.qdfuns.com/article/25669/d9507321988f1147feaa980316fb0ede.html