- wx.switchTab()
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 - wx.reLaunch()
关闭所有页面,打开到应用内的某个页面(包括 tabBar页面) - wx.redirectTo()
关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。 - wx.navigateTo()
保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层 - wx.navigateBack()
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈,决定需要返回几层。(页面栈最多十层)
下面看代码
1、wx.switchTab()
wx.switchTab({
url: '/xxx'
})
{
"tabBar": {
"list": [{
"pagePath": "home",
"text": "首页"
},
{
"pagePath": "classify",
"text": "分类"
}]
}
}
注意 wx.switchTab() 它只可以跳转tabBar页面!并且关闭其他不是tabBar页面,也就是我们的子页面。
2、wx.reLaunch()
wx.reLaunch({
url: 'xxx?id=xxx'
})
// 已跳转xxx页面
Page({
onLoad (option) {
console.log(option.query)
}
})
注意 wx.reLaunch() 它会关闭所有页面!然后打开某一个指定的页面,在这里没有 tabBar 与子页面之分。
3、wx.redirectTo()
wx.redirectTo({
url: 'xxx?id=xxx'
})
// 已跳转某子页面
Page({
onLoad (option) {
console.log(option.query)
}
})
注意 wx.redirectTo() 它唯一不可以跳转 tabBar 页面!跳转前只关闭当前页面。
4、wx.navigateTo()
// A页面
wx.navigateTo({
url: '../xxx?id=xxx',
events: {
//events里的函数是监听B页面的事件,获取其传过来的数据。events里可以有多个监听事件
BarriveA: function(data){
console.log(data) //这是从B页面向A页面传递的数据
},
success: function(res) {
//通过eventChannel向B页面发送数据。
res.eventChannel.emit('ArriveB', {text: '这是从A页面向B页面传递的数据'})
}
}
})
// B页面
onLoad: function(option) { // 这个页面里接收数据和发送数据大onLoad里执行。
//获取A页面中url里的参数值
console.log(option.id)
//B页面发送数据用getOpenerEventChannel()里的emit函数,接收数据用其on函数。
const eventChannel = this.getOpenerEventChannel()
eventChannel.emit('BarriveA', {text: '这是从B页面向A页面传递的数据'})
eventChannel.on('ArriveB', function(data) {
console.log(data) //这是从A页面向B页面传递的数据
})
}
注意 wx.navigateTo() 它可以保留当前页面并跳转到应用内的某个页面,但是不能跳到 tabbar 页面!通过以上写法可以使A与B组件互相通信。
5、wx.navigateBack()
// 此处是A页面
wx.navigateTo({
url: 'B?id=xxx'
})
// 此处是B页面
wx.navigateTo({
url: 'C?id=xxx'
})
// 在C页面内 navigateBack,将返回A页面
wx.navigateBack({
delta: 2
})
注意调用 wx.navigateTo 跳转时,调用此方法的页面会被加入堆栈,而 redirectTo 方法则不会。