小程序跳转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
				});
			}
		});
	},
});