目录
在小程序中实现页面的跳转,有两种方式:
1. 声明式导航:navigator 组件
参考:
2. 编程式导航:使用小程序提供的API
找到cart.wxml文件,创建五个按钮,并给其分别添加事件:
<button plain type="primary" bind:tap="navigateTo">navigateTo</button>
<button plain type="default" bind:tap="redirectTo">redirectTo</button>
<button plain type="primary" bind:tap="switchTab">switchTab</button>
<button plain type="default" bind:tap="reLaunch">reLaunch</button>
<button plain type="primary" bind:tap="navigateBack">navigateBack</button>
找到cart.js文件,在page中分别将事件列出:
Page({
navigateTo(){
},
redirectTo(){
},
switchTab(){
},
reLaunch(){
},
navigateBack(){
}
})
2.1 页面跳转
2.1.1 wx.navigateTo
保留当前页面,跳转到应用中其他页面,不能跳转到 tabBar 页面。
找到navigateTo()将其更改为:
navigateTo(){
// 保留当前页面,跳转到应用中其他页面,不能跳转到 tabBar 页面
wx.navigateTo({
// 普通页面
url:'/pages/list/list'
})
},
点击“navigateTo”,可以进行页面的跳转:
将普通页面更改为“tabBar”页面,这里使用的是分类页面:
navigateTo(){
// 保留当前页面,跳转到应用中其他页面,不能跳转到 tabBar 页面
wx.navigateTo({
// 普通页面
// url:'/pages/list/list'
// tabBar页面
url:'/pages/cate/cate'
})
},
点击后发现无法跳转:
2.1.2 wx. redirectTo
关闭(销毁)当前页面,跳转到应用中其他页面,不能跳转到tabBar页面
找到redirectTo()将其更改为:
// 关闭(销毁)当前页面,跳转到应用中其他页面,不能跳转到tabBar页面
redirectTo(){
wx. redirectTo({
// 普通页面
url:'/pages/list/list'
})
},
点击“navigateTo”,我们会发现页面发生跳转,并且不能再返回上一页面,只能返回主页面:
更改为tabBar页面:
// 关闭(销毁)当前页面,跳转到应用中其他页面,不能跳转到tabBar页面
redirectTo(){
wx. redirectTo({
// 普通页面
// url:'/pages/list/list'
// tabBar页面
url:'/pages/cate/cate'
})
},
会发现不能跳转:
2.1.3 wx.switchTab
保留当前页面,跳转到 tabBar 页面,不能跳转到应用中其他页面。
找到switchTab()将其更改为:
switchTab(){
// 保留当前页面,跳转到 tabBar 页面,不能跳转到应用中其他页面
wx.switchTab({
// tabBar页面
url:'/pages/cate/cate'
})
},
点击switchTab可以看到其发生了跳转:
更改代码:
switchTab(){
// 保留当前页面,跳转到 tabBar 页面,不能跳转到应用中其他页面
wx.switchTab({
// tabBar页面
// url:'/pages/cate/cate'
// 普通页面
url:'/pages/list/list'
})
},
此时点击未发生跳转:
2.1.4 wx.reLaunch
关闭所有页面,然后跳转到应用中某一个页面。
更改reLaunch()代码:
reLaunch(){
// 关闭所有页面,然后跳转到应用中某一个页面
wx.reLaunch({
// 普通页面
url:'/pages/list/list'
})
},
点击reLaunch:
可以发现,发生页面跳转:
需要注意的是由于删除所有页面所以无法返回上一页面
更改为tabBar页面:
reLaunch(){
// 关闭所有页面,然后跳转到应用中某一个页面
wx.reLaunch({
// 普通页面
// url:'/pages/list/list'
// tabBar页面
url:'/pages/cate/cate'
})
},
点击按键也能发生跳转:
2.1.5 wx.navigateBack
关闭当前页面,返回上一页或者返回多级页面,默认返回上一页。
找到cart.wxml将创建的navigateBack按键剪切:
<button plain type="primary" bind:tap="navigateBack">navigateBack</button>
找到list.wxml文件,粘贴:
找到cart.js将创建的navigateBack()剪切:
navigateBack(){
}
找到list.js文件,粘贴:
将navigateBack()更改为:
Page({
navigateBack(){
// 关闭当前页面,返回上一页或者返回多级页面,默认返回上一页
wx.navigateBack()
}
})
根据上图四个按键的功能,随机找一个能进入list页面的按钮,点击:
点击上图按钮就可以返回上一页。
如何返回多级页面呢?首先,将navigateBack()更改为:
Page({
navigateBack(){
// 关闭当前页面,返回上一页或者返回多级页面,默认返回上一页
wx.navigateBack({
// 返回几级写几
delta: 1
})
}
})
点击就能返回多级页面。
2.2 参数传递
路径后可以带参数,参数与路径之间使用 ? 分隔,参数键与参数值用 = 相连,不同参数用 & 分隔,例如:path?key=value&key2=value2 参数需要在跳转到的页面的 onLoad 钩子函数中通过形参进行接收。
2.2.1 wx.navigateTo
找到navigateTo()对url进行更改:
navigateTo(){
// 保留当前页面,跳转到应用中其他页面,不能跳转到 tabBar 页面
wx.navigateTo({
// 普通页面
url:'/pages/list/list?id=1&name=tom'
// // tabBar页面
// url:'/pages/cate/cate'
})
},
点击上图按钮,找到“页面参数”,可以看到传递的参数:
也可以在跳转到的页面的 onLoad 钩子函数中通过形参进行接收。
找到list.js文件,添加 onLoad 钩子函数:
Page({
navigateBack(){
// 关闭当前页面,返回上一页或者返回多级页面,默认返回上一页
wx.navigateBack({
// 返回几级写几
delta: 1
})
},
onLoad(options){
console.log(options)
}
})
点击按钮后会发现接收到的参数子啊console显示:
2.2.2 wx. redirectTo
找到redirectTo()更改url:
redirectTo(){
// 关闭(销毁)当前页面,跳转到应用中其他页面,不能跳转到tabBar页面
wx. redirectTo({
// 普通页面
url:'/pages/list/list?id=1&name=tom'
// tabBar页面
// url:'/pages/cate/cate'
})
},
2.2.3 wx.switchTab
找到switchTab()更改url:
switchTab(){
// 保留当前页面,跳转到 tabBar 页面,不能跳转到应用中其他页面
wx.switchTab({
// tabBar页面
url:'/pages/cate/cate?id=1&name=tom'
// 普通页面
// url:'/pages/list/list'
})
},
我们会发现此时点击按钮,并不能传递参数:
那是因为wx.switchTab不能再路径后面跟参数。
2.2.4 wx.reLaunch
找到reLaunch()更改url:
reLaunch(){
// 关闭所有页面,然后跳转到应用中某一个页面
wx.reLaunch({
// 普通页面
// url:'/pages/list/list'
// tabBar页面
url:'/pages/cate/cate?id=1&name=tom'
})
}
点击按钮:
普通页面亦是如此。