原生小程序如何实现跨页面传值

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

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 })

页面中接收:

  1. utils.JS文件中,通过prevPage.setData()方法,将数据进行了双向同步,你可以理解为,在页面返回的同时,将数据进行了同步更新,所以不需要可以接收,直接通过this.data.searchData进行取值即可
  2. 如果要对返回的值,做特殊处理,可以使用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...

相关推荐
benbenAItalk14 小时前
数字人口播视频的批量生产实践:素材规范、任务编排与质量验收
java·前端·音视频
2601_9628857215 小时前
如何用 Python 扫描 A 股跳空缺口并统计缺口回补概率?
java·前端·python
西瓜太郎123415 小时前
Claude Code、Codex CLI、Gemini CLI 能否共用一枚 Key?先看协议选择矩阵
前端·api 网关·claude code·gemini cli·codex cli
多加点辣也没关系15 小时前
JavaScript|第31章:表单与控件
开发语言·javascript·ecmascript
陈随易17 小时前
在Finch用了62亿词元,我认为这是新一代Agent工具之神
前端·人工智能·后端
水域安全老周18 小时前
水趣钓鱼救生衣专利拆解:两级锁紧如何解决落水人衣分离
java·前端·网络
计算机魔术师18 小时前
Anthropic CEO突然喊踩刹车,OpenAI罕见力挺:AI这辆车不能只踩油门了
前端
wing9818 小时前
从codex转战workbuddy使用一周的感受
前端·人工智能·后端
Highcharts.js18 小时前
常见报错排雷指南2:导出失败的官方解法
javascript·react.js·ecmascript·highcharts·可视化图表·导出模块失败·导出服务
EatFan19 小时前
Java接入支付宝 JSAPI 支付保姆教程(二):流程讲解与前后端代码讲解
前端·spring boot·后端·微信小程序·小程序·uni-app