小程序跳转wx.redirectTo、wx.navigateTo、wx.switchTap与wx.reLaunch区别
微信小程序有几个跳转页面的写法,简单介绍一下他们之间的区别。
wx.redirectTo
关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
注:两个页面之间平级的跳转,不存在子父的关系。直观上来讲是跳到第二个页面的时,左上角是没有返回按钮的。页面跳走后会调用 onUnload 方法,即第一个页面被关闭和卸载了。
参考文档:https://developers.weixin.qq.com/miniprogram/dev/api/wx.redirectTo.html
wx.navigateTo
保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
注:两页面之间的跳转是父页面跳子页面的,直观上来讲就是跳到第二个页面时,左上角有返回按钮,页面跳走后会调用 onHide 方法,即第一个页面并没有被关闭,只是被隐藏起来了。
参考文档:https://developers.weixin.qq.com/miniprogram/dev/api/wx.navigateTo.html
wx.switchTab
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
参考文档:https://developers.weixin.qq.com/miniprogram/dev/api/wx.switchTab.html
wx.reLaunch
关闭所有页面,打开到应用内的某个页面,左上角没有返回按钮。
参考文档:https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.reLaunch.html
代码示例
跳转至页面URL,如果是是tab页面,则用 wx.switchTab 来处理
wxml 部分
<view bindtap="goUrl" class="btn btn-danger-o block mtop" hover-class="btn-hover">跳转测试</view>
js 部分
Page({ goUrl: function() { var t = "/pages/index/index"; //跳转非tab页 wx.navigateTo({ url: t, fail: function() { //跳转tab页 wx.switchTab({ url: t }); } }); }, });