小程序跳转页面几种方式 £神魔★判官ぃ 2022-12-11 07:29 192阅读 0赞 **需求:** 从home.wxml跳转到detail.wxml页; ### 一:js实现 ### 1. navigateTo (有返回键,不可以跳转到tabBar页面) //保留当前页面,跳转到应用内的某个页面 wx.navigateTo({ url: '/pages/detail/detail?id=1' }) 1. switchTab (没有返回键,只能跳转到tabBar页面,不可以携带参数) wx.switchTab({ url: `/pages/detail/detail`, }) 1. reLaunch (跳转任意页面, 没有返回, 有 首页 按钮 ) wx.reLaunch({ url: '/pages/detail/detail' }) 1. redirectTo ( 只可以跳转tabBar 页面, 没有返回,但有首页按钮 ) wx.redirectTo({ url: `/pages/detail/detail`, }) 1. navigateBack (应用在目标页面, delta值为1 ,表示跳转上一页,2表示跳两级 ) wx.navigateBack({ delta:1 }) ### 区别: ### 1. wx.navigator是开启一个新页面,那个页面是隐藏了,原页面是onHide,所以是可以返回的,但是返回之后,跳转的页面就unload了 2. wx.redirecTo是当前页面替换成新的页面,所以返回不去onunload(页面被卸载) 3. tabBar无论跳哪个页面都是onHide ### 传参注意: ### 跳转页面传递数组参数必须序列化 let arr=[1,2,3,4,5] category = JSON.stringify(arr) //取子集分类 数组传递需要序列化 wx.navigateTo({ url: `/pages/detail/detail/?cate= ${ category} `, }) 跳转页面传递数组参数必须序列化 onLoad: function (options) { let category = JSON.parse(options.cate); console.log(category) } 参数值过长接收时候内容不全得问题 //传参 wx.navigateTo({ //wx.redirectTo、wx.reLaunch url: '/pages/details/details?id=' + encodeURIComponent(id) }) //接收 onLoad(options) { var id = decodeURIComponent(options.id); } ### 二:navigator组件实现 ### 1. `<navigator url = "/pages/details/details">跳转到新页面</navigator>` 2. `<navigator url = "/pages/details/details" open-type = "redirect">跳转到新页面</navigator>` 3. `<navigator url = "/pages/details/details" open-type = "switchTab">跳转到新页面</navigator>`
还没有评论,来说两句吧...