微信小程序页面跳转和参数传递总结

小程序页面跳转有使用API提供方法跳转和XML设置属性跳转两种方法

一、使用API中的js方法跳转页面

1. navigateTo

保留当前页面，跳转到其他页面，可使用wx.navigateBack返回原页面。

	wx.navigateTo({
  		url: 'page/home/home'
  	})

2.navigateBack

关闭当前页面，返回上一级页面或者多级页面，可通过getCurrentPages()获取当前页面栈序号，通过序号返回层级。

 	wx.navigateTo({
  		url: 'page/news/news'// 页面 A
	})
	wx.navigateTo({
  		url: 'page/detail/detail'// 页面 B
	})
	// 跳转到页面 A
	wx.navigateBack({
  		delta: 2
	})

3. redirectTo

关闭当前页面，跳转到应用内的某个页面。

wx.redirectTo({
  url: 'page/home/home'
})

4. switchTab

跳转到tabBar页面（在app.json中注册过的tabBar页面），同时关闭其他非tabBar页面。

wx.switchTab({
  url: 'page/index/index'
})

5. reLanch

关闭所有页面，打开到应用内的某个页面。

wx.reLanch({
  url: 'page/home/home?user_id=111'
})

二、使用wxml 页面组件跳转（可以通过设置open-type属性指明页面跳转方式）

1. navigator 组件默认的 open-type 为 navigate

//跳转到新页面
<navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover"></navigator>

2. redirect 对应 API 中的 wx.redirect 方法

//在当前页打开
<navigator url="../../home/home" open-type="redirect" hover-class="other-navigator-hover"></navigator>

3. switchTab 对应 API 中的 wx.switchTab 方法

//切换 Tab
<navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover"></navigator>

4. reLanch 对应 API 中的 wx.reLanch 方法

//关闭所有页面，打开到应用内`的某个页面
<navigator url="../../login/login" open-type="redirect" hover-class="other-navigator-hover"></navigator>

5. navigateBack 对应 API 中的 wx.navigateBack 方法

//关闭当前页面，返回上一级页面或多级页面
<navigator url="/page/index/index" open-type="navigateBack" hover-class="other-navigator-hover"></navigator>

三、页面跳转传递参数

页面跳转传值在url后面拼接要传的参数即可，有两种写法

方法一

	//传递一个参数
	wx.navigateTo({
  		url: 'page/home/home?user_id=1'
	})
	
	//传递多个参数
	wx.navigateTo({
  		url: 'page/home/home?user_id=1&&user_name=张三'
	})
	
	//传递对象
	wx.navigateTo({
  		url: 'page/home/home?user=JSON.stringify(user)'//将对象转换成json字符串
	})

	//在接收页面onLoad方法中获取参数
	onLoad: function (options) {
    	var user= JSON.parse(options.user);//将json字符串转成对象
    	console.log("user "+user);
  	},

方法二

	//传递一个参数
	wx.navigateTo({
  		url: `../detail/detail?name=${name}`
	})
	
	//传递多个参数
	wx.navigateTo({
  		url: `../detail/detail?name=${name}&&id=${id}`
	})
	
	//传递对象
	wx.navigateTo({
  		url: `page/home/home?user=$(JSON.stringify(user))`//将对象转换成json字符串
	})

	//在接收页面onLoad方法中获取参数
	onLoad: function (options) {
    	var user= JSON.parse(options.user);
    	console.log("user "+user);
  	},