微信小程序使用页面栈修改上一个页面的data数据

微信小程序中从一个页面A进入一个页面B，如果页面B的数据有改变，再返回页面A的时候需要把数据同步到页面A。

一般的方法有：

1. 使用本地缓存 wx.setStorage() 和 wx.getStorage()

// 页面B
wx.setStorage({key: "name",data: "mossbaoo"
})

// 页面A
wx.getStorage({key: 'name',success (res) {console.log(res.data)}
})

2. 使用app.js的全局变量

// 页面B
getApp().globalData.name = 'mossbaoo';

// 页面A
console.log(getApp().globalData.name)

以上两种方法，不仅可以用于返回上一页时更新数据，它们是全局通用的；但是，有些数据也就仅用于两个页面间的数据同步，如果使用全局来存储的话，就会有反作用了，一是耗内存耗性能，二是不利于后期维护。

那么，接下来介绍的是怎么使用页面栈去实现：

首先，可以先到微信小程序官方文档了解一下页面路由：《页面路由》

获取当前页面栈的实例可以通过 getCurrentPages() 函数，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。

注意：

不要尝试修改页面栈，会导致路由以及页面状态错误
不要在 App.onLaunch 的时候调用 getCurrentPages()，此时page还没有生成。

以下是页面栈的使用栗子：

// 页面A
data: {name: ''
},
changeDataPageA(name){this.setData({name: name})
}

// 页面B
changeDataPageB() {// 获取页面栈var pages = getCurrentPages();var currPage = pages[pages.length - 1]; // 当前页var prevPage = pages[pages.length - 2]; // 上一个页面var data = prevPage.data // 获取上一页data里的数据// 如果存在上一页if(prevPage){// 可以调用上一页的函数prevPage.changeDataPageA('mossbaoo');// 可以修改上一页的数据prevPage.setData({name: 'mossbaoo'})// 返回上一页wx.navigateBack();}
}

这样就可以实现数据传递给上一个页面，要注意页面页面A必须使用 wx.navigateTo() 跳转到下一页面B，不能使用wx.redirectTo等其它的跳转方式，这样会关闭上一个页面，导致页面B无法获取上一页的Page实例。

微信小程序使用页面栈修改上一个页面的data数据相关推荐

微信小程序页面栈_微信小程序使用页面栈改变上一页面的数据
微信小程序中如果从一个页面中进入下一个页面,如果下个页面的数据有删除或者增加再返回上一个页面的时候,就会导致页面不刷新(数据加载函数在onload中),从而造成数据不一致的情况.其实在微信小程序中是可 ...
微信小程序中带参数返回上一页的方法总结（三种）
本篇文章给大家带来的内容是关于微信小程序中带参数返回上一页的方法总结(三种),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 方法一把当前页面数据放入本地缓存( wx.setStor ...
（已解决）微信小程序调查问卷所有题放在一个页面上
最近做一个调查问卷的小程序改需求时遇到了一个问题: 要将所有单选题放在一个页面上,我用了双层循环嵌套将每道题的下标以及每个题对应的选项下标循环出来但是每个单选的radioChange绑定事件都是同一 ...
微信小程序获取页面栈
let pages = getCurrentPages(); //获取当前页面信息栈 let prevPage = pages[pages.length-2] //获取上一个页面信息栈页面的信息栈包 ...
微信小程序中页面跳转时要始终返回首页的问题
首先,要先说一下项目的需求,我要实现的功能是在首页有一个按钮可以跳转到一个展示的页面,这个展示的页面上下两个部分,上边的部分是可以切换学科种类的,下面的部分可以展示这个学科下的所有科目,上面切换的部 ...
微信小程序页面栈_微信小程序之页面传值(路由、页面栈、globalData、缓存)
1. 通过url带参数传递 1.1 固定参数传递例如,从 list 页面到 detail 页面, 传递一个或多个固定值 list页面传值: 点此进入 detail detail页面取值: onLoa ...
参数携带跳转_微信小程序：页面跳转及参数传递
本文首发自个人自有博客:[FaxMiao个人博客],一个关注Web前端开发技术.关注用户体验.记录前端点滴,坚持更多原创,为大家提供高质量技术博文! 前言小程序的跳转方法有很多种,有的人一直只用wx ...
html下拉刷新原理,微信小程序下拉刷新及上拉加载原理解析
这篇文章主要介绍了微信小程序下拉刷新及上拉加载实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.下拉刷新的概念及应用场景. 概念: 下拉 ...
微信小程序零基础入门（上）
目录第一章.前言 1.1 小程序与网页开发的区别 1.2 首次开发小程序的准备工作第二章.小程序基础结构了解 2.1 项目构成 2.1.1 项目的基本组成结构 2.1.2 小程序页面的组成部分 2 ...

微信小程序使用页面栈修改上一个页面的data数据

微信小程序使用页面栈修改上一个页面的data数据相关推荐

最新文章

热门文章

微信小程序 使用页面栈 修改上一个页面的data数据

微信小程序 使用页面栈 修改上一个页面的data数据相关推荐

最新文章

热门文章

微信小程序使用页面栈修改上一个页面的data数据

微信小程序使用页面栈修改上一个页面的data数据相关推荐