一、介绍

小程序页面跳转有时候需要进行数据的更新操作

从列表页面点击某一条数据跳转到详情页 ,然后再详情页操作完成提交之后,一般都会返回上一页(列表页),这里需将上一页的数据进行更新(刚才操作的数据)等操作

在这里插入图片描述
微信小程序页面页面栈:https://developers.weixin.qq.com/miniprogram/dev/reference/api/getCurrentPages.html

在这里插入图片描述
微信小程序返回上一页面:https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateBack.html#功能描述

二、代码

1、const pages = getCurrentPages();

使用getCurrentPages()获取当前页面栈

2、const prevPage = pages[pages.length - 2];

我这里是从主页面(主包)----->列表页面(分包2)----->详情页面(分包2)进行跳转的,索引为0,1,2,长度length为3,这里是要从info页面跳转到list页面在这里插入图片描述
获取上级页面pages[pages.length - 2],因为数组索引为0,1,2,,数组长度为3,数组长度比数组索引大1,又因为当前页面为最后一个,所以当前页面为pages[pages.length - 1]`,那上级页面就是pages[pages.length - 2]

3、const prevVm = prevPage.$vm || prevPage;

因为小程序有文件大小的限制,有的文件不在主包pages里面,存在于其他分包里面(uni-app 分包页面的实例挂载规则特殊:分包页面不会直接挂载到prevPage根节点,而是挂载在 prevPage.$vm【Vue 实例的真实载体】上),对于不是分包的就为空使用后面的
在这里插入图片描述

4、if (prevVm) { prevVm.getList.call(prevVm); }

确保实例存在,然后进行调用上一个页面的方法

// 无版本限制
// 获取当前所有已加载的页面栈(数组形式)
// const pages = getCurrentPages();
// 从页面栈中获取「上级页面实例」(数组倒数第二个元素 = 上一级页)
// const prevPage = pages[pages.length - 2];

// 拿到页面栈倒数第二项(ES2022,新版小程序基础库支持)
const prevPage = getCurrentPages().at(-2);
// 兼容分包页面:获取上级页真实的Vue实例(分包页方法挂载在$vm上)
const prevVm = prevPage?.$vm ?? prevPage;
// 确保上级Vue实例存在,确保上级页的getList方法存在
if (prevVm && typeof prevVm.getList === 'function') {
	// 调用上级页的getList方法
	prevVm.getList();
}

执行上一页的方法,然后返回上一页

const prevPage = getCurrentPages().at(-2);
const prevVm = prevPage?.$vm ?? prevPage;
const goBack = () => {
	uni.navigateBack({
		success: function() {
			uni.showToast({
				title: 'XX成功',
				icon: 'none'
			});
		}
	});
};
if (typeof prevVm?.getList=== 'function') {
	const req = prevVm.getList();
	if (req && typeof req.then === 'function') {
		req.then(goBack).catch(() => {
			goBack();
		});
	} else {
		goBack();
	}
} else {
	goBack();
}

更多推荐