一句话说明就是:
navigator是在 wxml 中用标签添加open-type属性来达到和wx.xxx系列一样的效果.
wx.switchTab(Object object)
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面(官网是这么说的,具体是先关闭再跳转还是先跳转后关闭,本人不知道。)
wx.reLaunch(Object object)
关闭所有页面,打开到应用内的某个页面
wx.redirectTo(Object object)
关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
wx.navigateTo(Object object)
保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。
使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
wx.navigateBack(Object object)
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈,决定需要返回几层。
遇到的bug
写小程序,遇到页面跳转时,发现有几次失败。查询资料已解决,总结一下知识点:
一、如下,第5层到到6层时失败(评论页⑤–>返回商品详情页⑥)
登陆①–>主页②–>商品列表页③–>商品详情页④–>评论页⑤–>返回商品详情页⑥
- wx.navigate :可以基本满足页面之间跳转需求,但是层级关系不要超过5层,最多5层。
- wx.redirectTo :当层级关系超过5层时,页面跳转采用这个。
二、第2层到到3层时失败(反馈建议②–>返回"我的"页③)
我的①–>反馈建议②–>返回"我的"页③
此时,没有超过5层,但wx.navigateTo和wx.redirectTo都无效,
后来查了小程序的API,找到了原因,因为"我的"页是tabbar页面。
wx.switchTab: 需要跳转到tabbar页面,需要用 wx.switchTab
三个跳转的使用方法一致,(只是是否能带参数问题)均为:
wx.switchTab(Object object)
需要跳转的 tabBar 页面的路径(需在 app.json 的 tabBar 字段定义的页面),路径后不能带参数。
wx.switchTab({
url: '/index'
})
wx.reLaunch(Object object)
需要跳转的应用内页面路径,路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 ‘path?key=value&key2=value2’
wx.reLaunch({
url: 'test?id=1'
})
需要跳转的应用内非 tabBar 的页面的路径, 路径后可以带参数。参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 & 分隔;如 ‘path?key=value&key2=value2’
wx.redirectTo({
url: 'test?id=1'
})
wx.navigateTo(Object object)
需要跳转的应用内非 tabBar 的页面的路径, 路径后可以带参数。参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 & 分隔;如 ‘path?key=value&key2=value2’
wx.navigateTo({
url: 'test?id=1',
events: {
// 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
acceptDataFromOpenedPage: function(data) {
console.log(data)
},
someEvent: function(data) {
console.log(data)
}
...
},
success: function(res) {
// 通过eventChannel向被打开页面传送数据
res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
}
})
//test.js
Page({
onLoad: function(option){
console.log(option.query)
const eventChannel = this.getOpenerEventChannel()
eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
eventChannel.emit('someEvent', {data: 'test'});
// 监听acceptDataFromOpenerPage事件,获取上一页面通过eventChannel传送到当前页面的数据
eventChannel.on('acceptDataFromOpenerPage', function(data) {
console.log(data)
})
}
})
wx.navigateBack(Object object)
返回的页面数,如果 delta 大于现有页面数,则返回到首页。
// 注意:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,而 redirectTo 方法则不会。见下方示例代码
// 此处是A页面
wx.navigateTo({
url: 'B?id=1'
})
// 此处是B页面
wx.navigateTo({
url: 'C?id=1'
})
// 在C页面内 navigateBack,将返回A页面
wx.navigateBack({
delta: 2
})
所以,当下次需要跳转页面时
①、首先检查页面是否在app.json中注册,不注册找不到页面。
②、注意文件夹的层级关系,注意相对路径是否正确。
③、查看一次性跳转页面的层级数量是否超过5层(是,选择wx.redirectTo)。
④、查看要跳转的页面是不是tabBar页面(是,选择 wx.switchTab)。