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

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

  • 一、介绍
  • 二、代码
    • [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);
}
相关推荐
打瞌睡的朱尤3 小时前
微信小程序1~25
微信小程序·小程序
hnxaoli4 小时前
win10小程序(十八)剪切板循环粘贴
python·小程序
拖孩4 小时前
我用 AI 搓了一个"比谁更持久"的微信小游戏,AI实现只用了一天,微信审核却用了一个月!!!
微信小程序·ai编程·游戏开发
河北清兮网络科技16 小时前
短剧 APP 产品说明
小程序·uni-app·短剧
AI品信智慧数智人1 天前
文旅景区小程序集成数字人智能语音交互系统,山东品信解锁AI伴游新玩法✨
人工智能·小程序
医疗信息化王工1 天前
钉钉小程序开发实战:投诉管理系统
小程序·钉钉·开发·投诉管理
灵机一物1 天前
灵机一物AI原生电商小程序(已上线)-从“48 小时失联”到“长期可触达”:一套小程序公众号关注引导 + 订阅消息授权的产品化设计
小程序
碎像1 天前
掌握uniapp发布微信小程序、App(Android)
微信小程序·小程序·uni-app
程序媛徐师姐1 天前
Java基于SSM的实验室管理微信小程序,附源码+文档说明
java·微信小程序·实验室管理·实验室管理微信小程序·java实验室管理微信小程序·java实验室管理小程序·实验室管理小程序
CHU7290352 天前
生鲜团购商城小程序:新鲜触手可及的便捷购物新体验
小程序