tabBar 页面和非tabBar 页面
在微信开发中有底部导航可以在app.json中tabBAR
设置tabBar页面,而在路由跳转这几个方法中有的只能指定非tab页面或者必须tab页面,除了在app.json中设置的页面外都算做非tab页面。
"tabBar" :{
"list": [
{
"pagePath": "pages/AAA/AAA",
"text": "AAA"
},
{
"pagePath": "pages/BBB/BBB",
"text": "BBB"
}
]
}
navigateTo
保留当前页面跳转到非tab页面,左上角指针可以返回上一页面。
我们新建A和B两个页面进行跳转。
在A页面设置按钮跳转到B页面,使用navigateTO
方法:
<view>
A页面
<button bindtap="tapB">跳到B页面</button>
</view>
tapB: function() {
wx.navigateTo({
url: '/pages/BBB/BBB'
})
}
效果图:
跳转传参
navigateTo
后可以跟参数传递到指定页面,参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 & 分隔;如 'path?key=value&key2=value2'
,然后在跳转的页面中 onLoad(options)
的参数来接收。
A页面:
tapB: function() {
wx.navigateTo({
url: '/pages/BBB/BBB?id=666'
})
}
B页面:
onLoad: function (options) {
console.log(options.id);
}
navigateBack
关闭当前页面并返回上一页或多个页,不可传参。
我们使用a页面跳到b页面在由b页面点击触发navigateBack
返回上一页。
A页面代码不变。
b页面代码:
<view class="container">
<text>B页面</text>
<button bindtap="tapA">点击</button>
</view>
使用delta
参数可以设置返回多少页面。
tapA :function (){
wx.navigateBack({
delta :1
})
}
效果图:
redirectTo
关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。可以传参。带有返回按钮。
例子一
在A页面使用redirectTo
跳到B页面查看效果:
A:
tapB: function() {
wx.redirectTo({
url: '/pages/BBB/BBB?id=666'
})
}
效果:
例子二
A页面使用navigateTo
跳到B页面由B页面使用redirectTo
跳到C页面来看效果:
B:
tapC :function (){
wx.redirectTo({
url:"/pages/CCC/CCC"
})
}
效果:
例子对比
对比两个例子发现,我们发现虽然第一个例子还是返回到A页面但按钮是回到第一页的图标,而在第二个例子中是跳过了B页返回A页,由此可以看出 redirectTo
方法带有返回按钮但使用了这个方法的页面关闭可以返回之前的页面,如果没有可以返回到首页。
reLaunch
关闭所有页面,打开到应用内的某个页面,可以带参数,可以跳转到tab页面和非tab页面。
我们把AB页面设置成tab页面来进行测试,A页面使用reLaunch
跳转到 非tab页的C页面,C页面在使用 reLaunch
跳转到 tab页的A页面。
A:
tapA: function() {
wx.reLaunch({
url: '/pages/CCC/CCC'
})
}
C:
tapC: function() {
wx.reLaunch({
url: '/pages/AAA/AAA'
})
}
可以看出AB为tab页,跳到非tab页的C页面时可以点击回首页,说明关闭了所有页面,C也可以跳到tab页的A页面:
switchTab
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面,不能带参数。
还是AB两页tab页面,我们先试试A页面使用 switchTab
跳转非tabC页面。
A:
tapA: function() {
wx.switchTab({
url: '/pages/CCC/CCC'
})
}
保存点击按钮后报错了:
用这个方法指定tab页面即可。