微信小程序前端页面跳转有多种方式,汇总如下:
Tips:
小程序前端的页面跳转之后,跳转之前的页面并不会凭空消失,而是存进了一个类似“页面栈”的空间里;
只有当这个所谓的“页面栈”满了之后页面才会退出栈(遵循队列先进先出规则)
一、JS跳转方式
①navigateTo
wx.navigateTo({ url: '/pages/good/index/index?id=1', success:function(){}, fail:function(){}, complete:function(){} })
路径限制规则:应用内非 tabBar 的页面的路径
②navigateBack
wx.navigateBack({ delta: 2 })
参数说明:delta参数是指回跳到页面栈的倒数第n个页面,如果页面栈页面数量少于该参数,那么返回首页
③redirectTo
wx.redirectTo({ url: '/pages/good/index/index?id=1', success:function(){}, fail:function(){}, complete:function(){} })
路径限制规则:应用内非 tabBar 的页面的路径
④switchTab
wx.switchTab({ url: '/pages/index/index', success:function(){}, fail:function(){}, complete:function(){} })
路径限制规则:应用内 tabBar 的页面(需在 app.json 的tabBar字段定义的页面)的路径,并关闭其他非tabBar页面
⑤reLaunch
wx.reLaunch({ url: '/pages/good/index/index?id=1', success:function(){}, fail:function(){}, complete:function(){} })
路径限制规则:应用内任意页面的路径
二、WXML方式跳转
wxml页面实现页面跳转有一个标签<navigator url="xxx" open-type="xxx">点击跳转</navigator>
这里是根据open-type的值来定义跳转的方式的:
①navigate
默认值,对应wx.navigateTo跳转方式或 wx.navigateToMiniProgram跳转方式
②navigateBack
对应wx.navigateBack跳转方式
③redirect
对应wx.redirectTo跳转方式
④switchTab
对应wx.switchTab跳转方式
⑤reLaunch
对应wx.reLaunch跳转方式
⑥exit
退出小程序,当target="miniProgram"时生效