uni-app 返回上一个页面并传递参数(微信小程序)-Toy模板网

这篇具有很好参考价值的文章主要介绍了uni-app 返回上一个页面并传递参数(微信小程序)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

uni-app 返回上一个页面并传递参数(微信小程序)

方法一：

// 第一个页面
onShow() {
	let that = this
	uni.$on('getuser',function(data){
		console.log('监听到事件来自返回的参数：' , data);
	})
},


// 第二个页面
methods: {
	confirm(e) {
		let userinfo = {
			avatarUrl: "123456",
			nickName: 'Function'
		}
		uni.$emit('getuser', userinfo)
		uni.navigateBack()
	}
}

方法一问题:

会记住每次返回. 并在下次获取参数时把所有的返回监听进行 `全部返回` ( 不确定别人使用时是否会出现此问题 )

打印示例结果如下:

uni-app 返回上一个页面并传递参数(微信小程序)

打印说明:

获取用户信息1: 为每次进入第二个页面 (onload) 请求的数据
监听到事件来自返回的参数: 为第一个页面监听获取的数据

方法二：

// 第一个页面
onShow() {
	let that = this	
	let pages = getCurrentPages();
	let currPage = pages[pages.length - 1]; //当前页面
	let json = currPage.data.userinfo;
	console.log('监听到',json);
},


// 第二个页面
methods: {
    // 第一个事件
	confirm(e) {
		let userinfo = {
			avatarUrl: "123456",
			nickName: 'Function'
		}
		var pages = getCurrentPages();
		var prevPage = pages[pages.length - 2];
		// #ifdef H5
		prevPage.$vm.userinfo = userinfo;
		// #endif
		// #ifdef MP-WEIXIN
		prevPage.setData({
			userinfo
		});
		// #endif
		uni.navigateBack()
	},
	// 第二个事件
	confirm1(e) {
		let userinfo = {
			avatarUrl: "123456",
			nickName: 'func'
		}
		var pages = getCurrentPages();
		var prevPage = pages[pages.length - 2];
		// #ifdef H5
		prevPage.$vm.userinfo = userinfo;
		// #endif
		// #ifdef MP-WEIXIN
		prevPage.setData({
			userinfo
		});
		// #endif
		uni.navigateBack()
	}
}
// 注意: 
// prevPage.setData({
//  	userinfo
// });
// 需要使用{} 大括号将数据(userinfo)框起来 否则 第一个页面let json = currPage.data.userinfo;将会获取不到
// 需要使用 let avatarUrl= currPage.data.avatarUrl; let nickName= currPage.data.nickName;来获取数据

方法二问题:

进入页面会立即返回参数 (生命周期onshow的原因) , 如果不使用`confirm`事件 ‘存储’ ( 是的 , 感觉用 “存储” 这个词是合适的 ) , 返回的参数将会一直是`undefined`. 直到使用`comfirm`事件进行 ‘存储’ 一次, 那么每次返回的都会是`comfirm` 事件存储的参数 ( 包括直接使用`uni.navigateBack()`进行返回、原生的导航栏返回 ) , 除非使用第二个事件`comfirm1`方法进行修改覆盖, 那么再返回的将会获得`comfirm1`存储的值.

打印示例结果如下:

uni-app 返回上一个页面并传递参数(微信小程序)

打印说明:
一、获取用户信息1: 为每次进入第二个页面 (onload) 请求的数据
二、
标注1: 返回的参数: 首次进入第一个页面(onshow) 立即获取的数据;
标注2: 返回的参数: 第二次进入第二个页面后 , 未进行 ‘存储’ (comfirm事件), 然后使用uni.navigateBack()、原生的导航栏返回后, 第一个页面(onshow)获取到的数据;
标注3: 返回的参数: 再次进入第二个页面后 , 进行第一次 ‘存储’ (comfirm事件)返回, 第一个页面(onshow)获取到的数据;
标注4: 返回的参数: 再次进入第二个页面后 , 未进行 ‘存储’ (comfirm事件) , 直接使用uni.navigateBack()、原生的导航栏返回后, 第一个页面(onshow)获取到的数据;
标注5: 返回的参数: 再次进入第二个页面后 , 进行第二次 ‘存储’ (comfirm1事件)返回, 第一个页面(onshow)获取到的数据;
标注6: 返回的参数: 再次进入第二个页面后 , 未进行任何 ‘存储’ 事件 , 直接使用uni.navigateBack()、原生的导航栏返回后, 第一个页面(onshow)获取到的数据;文章来源地址https://www.toymoban.com/news/detail-486612.html