微信小程序学习笔记

前言

学习微信小程序有一段时间了，今天对微信小程序的几种跳转页面的方式进行一下总结

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>