需求:每次点击确定按钮的时候,需要将本页面的数据,带到上个页面中,如何最简单最优的实现呢?废话不多说,直接上代码。

util.js源码:
ini
export function setPrePageData(dataObject, addType = "update", refresh = false) {
const pages = getCurrentPages(); // 获取页面栈
if (pages.length < 2) {
console.error("没有上一个页面,无法设置数据");
return;
}
const prevPage = pages[pages.length - 2]; // 获取上一个页面
console.log("addType", addType);
if (addType == "update") {
prevPage.setData(dataObject); // 动态设置多个键值对
if (prevPage && typeof prevPage.refresh === 'function' && refresh == true) {
prevPage.refresh();
}
} else if (addType == "add") {
// 拼接数据到上一个页面的数据数组第一个
const keyName = Object.keys(dataObject)[0];
const currentData = getNestedValue2(prevPage.data, keyName) || [];
const newData = [dataObject[keyName]];
// 使用工具函数设置嵌套数据
const updatedData = [...newData, ...currentData];
setNestedValue2(prevPage.data, keyName, updatedData);
if (prevPage && typeof prevPage.refresh === 'function' && refresh == true) {
prevPage.refresh();
}
// 更新页面数据
prevPage.setData({
[keyName]: updatedData,
});
}
wx.navigateBack(); // 返回上一个页面
},
// 获取嵌套属性值的工具函数
const getNestedValue2 = (obj, path) => {
return path.split(".").reduce((acc, key) => acc && acc[key], obj);
};
// 设置嵌套属性值的工具函数
const setNestedValue2 = (obj, path, value) => {
const keys = path.split(".");
const lastKey = keys.pop();
const target = keys.reduce((acc, key) => (acc[key] = acc[key] || {}), obj);
target[lastKey] = value;
};
页面中使用:
kotlin
import { validateForm, formatTime,setPrePageData } from "@utils/util.js";
// 不传数据,返回到上一个页面,只做刷新
setPrePageData({},"update",true)
// 传递数据,返回到上一个页面,同时刷新页面
setPrePageData({ searchData: e.detail}, 'update', true);
// 只传递数据,返回到上一个页面,不做任何操作
setPrePageData({ searchData: this.data.waybillCheckedList })
页面中接收:
- utils.JS文件中,通过prevPage.setData()方法,将数据进行了双向同步,你可以理解为,在页面返回的同时,将数据进行了同步更新,所以不需要可以接收,直接通过this.data.searchData进行取值即可
- 如果要对返回的值,做特殊处理,可以使用watch进行监听,或者在onShow生命周期里进行处理,本文主要使用第二种:
kotlin
onShow() {
// 从添加库位页面进入
if (this.data.searchData && Object.keys(this.data.searchData).length > 0 ) {
this.setData({
warehouseId: this.data.searchData.warehouseAddressId
})
setTimeout(() => {
// 从新调取接口,刷新数据
this.initData()
}, 500);
}
},
END...