小程序跳转功能以及参数传递
前言
最近在做小程序开发时，遇到了一些问题，比如页面跳转以及页面传参，这里总结一下，方便以后查阅。
一、几种页面跳转方式
- wx.switchTab
- wx.navigateTo
- wx.redirectTo
- wx.reLaunch
- wx.navigateBack
- 自定义路由
1、wx.switchTab 跳转 tabBar 定义的页面
使用示例
app.json 配置
```json
{
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/logs/logs",
"text": "日志"
}
]
}
}
```
代码示例
```
wx.switchTab({
url: '/pages/index/index', // 注意路径必须为 tabBar 中的路径
success: function () { // 调用成功回调函数
console.log('跳转成功')
},
fail: function () { // 调用失败回调函数
console.log('跳转失败')
},
complete: function () { // 调用完成回调函数
console.log('跳转完成')
}
})
```
2、wx.navigateTo 跳转到应用内的某个页面，但是不能跳到 tabbar 页面
使用示例
app.json 配置
```json
{
"pages": [
"pages/index/index",
"pages/logs/logs"
]
}
```
代码示例
a页面 JS 文件
```
wx.navigateTo({
url: '/pages/logs/logs?id=1', // 跳转路径 ?后为参数
success: function () { // 调用成功回调函数
console.log('跳转成功')
},
fail: function () { // 调用失败回调函数
console.log('跳转失败')
},
complete: function () { // 调用完成回调函数
onsole.log('跳转完成')
}
})
```
b页面 JS 文件
```
Page({
onLoad: function (options) { // options 为跳转路径携带的参数
console.log(options.id) // 输出 1
}
})
```
3、wx.redirectTo 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
使用示例
app.json 配置
```json
{
"pages": [
"pages/index/index",
"pages/logs/logs"
]
}
```
代码示例
a页面 JS 文件
```
wx.redirectTo({
url: '/pages/logs/logs?id=1', // 跳转路径 ?后为参数 非 tabBar 页面
success: function () { // 调用成功回调函数
console.log('跳转成功')
},
fail: function () { // 调用失败回调函数
console.log('跳转失败')
},
complete: function () { // 调用完成回调函数
console.log('跳转完成')
}
})
```
b页面 JS 文件
```
Page({
onLoad: function (options) { // options 为跳转路径携带的参数
console.log(options.id) // 输出 1
}
})
```
4、wx.reLaunch 关闭所有页面，打开到应用内的某个页面。但是不允许跳转到 tabbar 页面
使用示例
app.json 配置
```json
{
"pages": [
"pages/index/index",
"pages/logs/logs"
]
}
```
代码示例
a页面 JS 文件
```
wx.reLaunch({
url: '/pages/logs/logs?id=1', // 跳转路径 ?后为参数 非 tabBar 页面
success: function () { // 调用成功回调函数
console.log('跳转成功')
},
fail: function () { // 调用失败回调函数
console.log('跳转失败')
},
complete: function () { // 调用完成回调函数
console.log('跳转完成')
}
})
```
b页面 JS 文件
```
Page({
onLoad: function (options) { // options 为跳转路径携带的参数
console.log(options.id) // 输出 1
}
})
```
5、wx.navigateBack 关闭当前页面，返回上一页面或多级页面。可以返回多级页面，返回的页面由开发者调用 navigateTo 或 redirectTo 而来
使用示例
a页面 JS 文件
```
// 此处是A页面
wx.navigateTo({
url: 'B?id=1'
})
// 此处是B页面
wx.navigateTo({
url: 'C?id=1'
})
// 此处是C页面
const pageList = getCurrentPages() // 获取当前页面栈, 通过 pageList 长度判断返回页面层级
wx.navigateBack({
delta: 1, // 返回的页面层级
success: function () { // 调用成功回调函数
console.log('跳转成功')
},
fail: function () { // 调用失败回调函数
console.log('跳转失败')
},
complete: function () { // 调用完成回调函数
console.log('跳转完成')
}
})
```
6.自定义路由
wx.router
app.json 配置
```json
{
"pages": [
"pages/index/index",
"pages/logs/logs"
],
"renderer": "webview",
"rendererOptions": {
"skyline": {
"defaultDisplayBlock": true,
"disableABTest": true,
"sdkVersionBegin": "3.0.0",
"sdkVersionEnd": "15.255.255"
}
},
"componentFramework": "glass-easel",
}
```
代码示例
a页面 JS 文件
```
// 定义自定义效果，从右侧推入
const {windowWdith, screenHeight} = wx.getWindowInfo()
const slideRouteBuilder = (customRouteContext) => {
const { primaryAnimation } = customRouteContext
const handlePrimaryAnimation = () => {
'worklet'
const transX = windowWidth * (1 - primaryAnimation.value)
return {
transform: `translateX(${transX}px)`,
}
}
return {
handlePrimaryAnimation
}
}
wx.router.addRouteBuilder('slide', slideRouteBuilder)
// 使用自定义路由
wx.navigateTo({
url: 'xxx',
routeType: 'slide'
})
```
