微信小程序的路由跳转方法
2018-06-03 本文已影响1人
郭的妻
路由跳转的方法
1.打开新页面
1.wx.navigateTo 或使用组件 <navigator open-type="navigateTo"/>
保留当前页面,跳转到应用内的某个页面,使用 wx.navigateBack 可以返回到原页面。
属性用法:
url: 类型是String 跳转非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2'
success: 类型Function 接口调用成功的回调函数
fail: 类型Function 接口调用失败的回调函数
complete: 类型Function 接口调用结束的回调函数(调用成功、失败都会执行)
例 : wx.navigateTo({
url: 'test?id=1'
})
//test.js
Page({
onLoad: function(option){
console.log(option.query)
}
})
目前页面路径最多只能十层。
2.页面重定向
1.wx.redirectTo 或使用组件 <navigator open-type="redirectTo"/>
属性用法:
url: 类型是String 跳转非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2'
success: 类型Function 接口调用成功的回调函数
fail: 类型Function 接口调用失败的回调函数
complete: 类型Function 接口调用结束的回调函数(调用成功、失败都会执行)
例 : wx.redirectTo({
url: 'test?id=1'
})
//test.js
3.页面返回
1. wx.navigateBack 或使用组件 <navigator open-type="navigateBack">
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈,决定需要返回几层。
属性用法:
url: 类型是String 跳转非 tabBar 的页面的路径 , 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2'
success: 类型Function 接口调用成功的回调函数
fail: 类型Function 接口调用失败的回调函数
complete: 类型Function 接口调用结束的回调函数(调用成功、失败都会执行)
例 :// 此处是A页面
wx.navigateTo({
url: 'B?id=1'
})
// 此处是B页面
wx.navigateTo({
url: 'C?id=1'
})
// 在C页面内 navigateBack,将返回A页面
wx.navigateBack({
delta: 2
})
})
4.Tab 切换
1.wx.switchTab 或使用组件 <navigator open-type="switchTab "/>
属性用法:
url: 类型是String 需要跳转的 tabBar 页面的路径(需在 app.json 的 [tabBar]字段定义的页面),路径后不能带参数
success: 类型Function 接口调用成功的回调函数
fail: 类型Function 接口调用失败的回调函数
complete: 类型Function 接口调用结束的回调函数(调用成功、失败都会执行)
例 :{
"tabBar": {
"list": [{
"pagePath": "index",
"text": "首页"
},{
"pagePath": "other",
"text": "其他"
}]
}
}
wx.switchTab({
url: '/index'
})
5.Tab 切换
1.wx.reLaunch 或使用组件 <navigator open-type="reLaunch"/>
闭所有页面,打开到应用内的某个页面
属性用法:
url: 需要跳转的应用内页面路径 , 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2',如果跳转的页面路径是 tabBar 页面则不能带参数
success: 类型Function 接口调用成功的回调函数
fail: 类型Function 接口调用失败的回调函数
complete: 类型Function 接口调用结束的回调函数(调用成功、失败都会执行)
例 :wx.reLaunch({
url: 'test?id=1'
})
//test.js
Page({
onLoad: function(option){
console.log(option.query)
}
})