微信小程序跳转
前言
学习微信小程序有一段时间了,今天对微信小程序的几种跳转页面的方式进行一下总结
js跳转的方式
微信小程序中,各个跳转页面的方式对应的情况都各不相同,合理运用才能给用户更好的体验,优化自己的项目。
1.wx.navigateTo / wx.navigateBack
- wx.navigateTo: 保留当前页面
page1
,跳转到其他指定页面page2
,使用wx.navigateBack
可以返回到原页面page1
。(不可对tabbar页面进行跳转)
但是如果多次使用会对后台造成压力,估计跳转5次可能就会卡死
wx.navigateTo({
url: 'page/home/home?id=1 &&type==1'
})
- wx.navigateBack: 关闭当前页面,返回上一页面或多级页面。可通过 [getCurrentPages()] 获取当前的页面栈,决定需要返回几层。
当使用wx.navigateBack
返回上一页面page1
时,不会触发onLoad
wx.navigateBack({
delta: 2
})
2.wx.switchTab
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 (必须是微信自身的tabbar)
wx.switchTab({
url: 'page/index/index'
})
3.wx.redirectTo
和wx.navigateTo
不同的是,wx.redirectTo
会关闭当前页面,再跳转到应用内的某个页面。不会对后台造成压力,但是也无法返回上一个页面
wx.redirectTo({
url: 'page/home/home?id=1'
})
4.wx.reLaunch
关闭所有页面,打开到应用内的某个页面,这个暂时我没用到过
wx.reLanch({
url: 'page/index/index'
})
组件跳转的方式[navigator组件]
- 1.open-type 有效值:
navigate
======》wx.navigateTo
- 2.open-type 有效值:
redirect
======》wx.redirectTo
- 3.open-type 有效值:
switchTab
======》wx.switchTab
- 4.open-type 有效值:
reLaunch
======》wx.reLaunch
- 5.open-type 有效值:
navigateBack
======》wx.navigateBack
- 6.open-type 有效值:
exit
======》退出小程序
,target="miniProgram"
时生效
//1.直接使用
<navigator url="../../index/index?id=1" open-type="redirect">跳转</navigator>
//2.包裹控件使用
<navigator url="../../index/index?id=1" open-type="redirect">
<button>跳转</button>
</navigator>