刚接触小程序时,看到这 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);
}
})