小程序的页面跳转
在小程序开发中 因为小程序是搭载在微信中的 所以我们平常所用的Js或者JQuery等页面跳转的方法都不能使用了 但小程序也自带了几种页面跳转的方式 下面来逐一介绍
微信官方开放文档: 戳这里查看
第一种方式
wx.navigateTo(Object object)
保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层
这种跳转方式默认有返回按钮,返回到上一个页面
wx.navigateTo({
url: '../register/student/index/index',
})
第二种方式
wx.navigateBack(Object object)
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈,决定需要返回几层。
// 注意:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,而 redirectTo 方法则不会。见下方示例代码
// 此处是A页面
wx.navigateTo({
url: 'B?id=1'
})
// 此处是B页面
wx.navigateTo({
url: 'C?id=1'
})
// 在C页面内 navigateBack,将返回A页面
wx.navigateBack({
delta: 2
})
第三种方式
wx.redirectTo(Object object)
关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
这种跳转方式默认有返回按钮,返回到上一个页面的再上一层
wx.redirectTo({
url: 'test?id=1'
})
第四种方式
wx.switchTab(Object object)
跳转到 tabBar 页面(需在 app.json 的 tabBar 字段定义的页面),并关闭其他所有非 tabBar 页面
当要跳转的页面是由tabbar定义的页面的时候,就要用到此方法。并且除了该方法其他的都不能跳转到tabar定义过的页面
wx.switchTab({
url: '/index'
})
第五种方式
wx.reLaunch(Object object)
关闭所有页面,打开到应用内的某个页面
这种跳转方式默认没有返回按钮,不需要默认返回按钮的页面就可以使用此方法
wx.reLaunch({
url: 'test?id=1'
})
第六种方式
小程序组件navigator
详细查看手册文档
属性 | 说明 |
---|---|
target | 在哪个目标上发生跳转,默认当前小程序 |
url | 当前小程序内的跳转链接 |
open-type | 跳转方式 |
delta | 当 open-type 为 ‘navigateBack’ 时有效,表示回退的层数 |
path | 当target="miniProgram"时有效,打开的页面路径,如果为空则打开首页 |
extra-data | 当target="miniProgram"时有效,需要传递给目标小程序的数据,目标小程序可在 App.onLaunch(),App.onShow() 中获取到这份数据。 |
重要的是open-type的值:
navigate 对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能
redirect 对应 wx.redirectTo 的功能
switchTab 对应 wx.switchTab 的功能
reLaunch 对应 wx.reLaunch 的功能
navigateBack 对应 wx.navigateBack 的功能
exit 退出小程序,target="miniProgram"时生效
六种方式都能实现页面跳转 但大多有所不同 要注意的地方我已经给出了标记 用的时候注意一下标记的地方再使用的话应该没有什么问题了
希望能给你们带来帮助