微信小程序调用上一页的方法(主包,分包)

微信小程序调用上一页的方法(主包,分包)

  • 一、介绍
  • 二、代码
    • [1、const pages = getCurrentPages();](#1、const pages = getCurrentPages();)
    • [2、const prevPage = pages[pages.length - 2];](#2、const prevPage = pages[pages.length - 2];)
    • [3、const prevVm = prevPage.vm \|\| prevPage;](#3、const prevVm = prevPage.vm || prevPage;)
    • [4、if (prevVm) { prevVm.getList.call(prevVm); }](#4、if (prevVm) { prevVm.getList.call(prevVm); })

一、介绍

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

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

微信小程序页面页面栈: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); }

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

bash 复制代码
// 获取当前所有已加载的页面栈(数组形式)
const pages = getCurrentPages();
// 从页面栈中获取「上级页面实例」(数组倒数第二个元素 = 上一级页)
const prevPage = pages[pages.length - 2];
// 兼容分包页面:获取上级页真实的Vue实例(分包页方法挂载在$vm上)
const prevVm = prevPage.$vm || prevPage;
// 确保上级Vue实例存在
if (prevVm) {
	// 调用上级页的getList方法,并强制绑定this指向(这里根据需要进行调用方法)
	prevVm.getList.call(prevVm);
}
相关推荐
斯班奇的好朋友阿法法6 小时前
鸿蒙 vs iOS vs 微信小程序:开发平台全面对比
ios·微信小程序·harmonyos
cosinmz1 天前
图片太多太乱怎么整理?分享一个我最近常用的图片转 PDF方法
经验分享·小程序·pdf
科技互联.1 天前
2026年小程序定制市场:个性化需求激增,技术深度成竞争关键
人工智能·小程序
小羊Yveesss2 天前
2026年小程序商城的现状和发展趋势
小程序
Greg_Zhong2 天前
微信小程序如何关闭:当前渲染模式为webview?
微信小程序·微信小程序渲染引擎·渲染引擎需搭配更高基础库
橘子海全栈攻城狮2 天前
【最新源码】养老院系统管理A013
java·spring boot·后端·web安全·微信小程序
智慧景区与市集主理人2 天前
五一市集分账混乱?巨有科技智慧市集小程序实现统一收款、自动分账
大数据·科技·小程序
程序鉴定师2 天前
深圳小程序制作哪家好?2026深度市场分析与选择指南?
大数据·小程序
河北清兮网络科技2 天前
广告联盟全解析:从开发接入到运营优化,多视角拆解流量变现逻辑
小程序·app
计算机学姐2 天前
基于微信小程序的校园失物招领管理系统【uniapp+springboot+vue】
java·vue.js·spring boot·mysql·信息可视化·微信小程序·uni-app