小程序-页面跳转总结

  • Post author:
  • Post category:小程序


  1. 小程序提供的 API 跳转



navigateTo

保留当前页面,跳转到应用内的某个页面,可以使用wx.navigateBack返回原页面,状态也会保存,如果嵌入过深想直接返回前几层,可以先用getCurrentPages() 获取当前的页面栈,决定需要返回几层

wx.navigateTo({ url:'../user/user?id=1' })
// 传递的参数在接收页面onLoad()函数中的option就可以获取到
// 传递数组参数必须序列化
例如: let  categoryArr=[1,2,3,4,5]
      category = JSON.stringify(categoryArr)
      wx.navigateTo({ url:`../user/user/?arr= ${category} ` })

// 参数值过长接收时候内容不全或者乱码等问题
// 传参 encodeURIComponent  接收 decodeURIComponent
let pages = getCurrentPages();  // 获取当前页面栈
let prevPage = pages[pages.length - 2]; // -2 就是你上一页的数据 你上上页的数据就是-3 了以此类推!
// 操作上一页面的数据
prevPage.setData({
	modalName: 'Image'
})
wx.navigateBack({
  delta: 1  // 返回上一级页面
})



redirectTo

关闭当前页面,跳转到应用内的某个页面,左上角不会有返回标志



switchTab

跳转到tabBar页面(在app.json中注册过的tabBar页面),同时关闭其他非tabBar页面,注意tabbar监听事件第一次监听不到。。。



reLanch

关闭所有页面,打开到应用内的某个页面(一般用于返回首页)

2.wxml 页面组件跳转(可以通过设置open-type属性指明页面跳转方式)

<navigator url="/page/navigate/navigate">跳转到新页面</navigator>
<navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect">在当前页打开</navigator>
<navigator url="/page/index/index" open-type="switchTab">切换 Tab</navigator>
<navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect">关闭所有页面,打开到应用内的某个页面</navigator>
<navigator url="/page/index/index" open-type="navigateBack">关闭当前页面,返回上一级页面或多级页面</navigator>



版权声明:本文为qq_30138187原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。